Anleitung Widget

Our Weather on Your Homepage – The Weather Widget

The widget provided by the provincial weather service allows you to integrate the weather forecast on your own homepage, simply and easily.

Two kinds of widgets are available:

  • Widget forecasts: 3-day forecast for South Tyrol or your district
  • Widget map: the South Tyrol weather map for the current day

First select the locality, language, format and then copy the resulting HTML code into the desired location on your homepage.
The colour scheme and size of the widgets can also be individually tailored.

The following style elements can be customized:

<style>
    /* (only available in the widget-forecast) */
    #meteoprovbz_container    { }  /* id internal container */
    .meteoprovbz_min          { }  /* box for the low temperatures */
    .meteoprovbz_max          { }  /* box for the high temperatures */
    .meteoprovbz_temperatures { }  /* only by the landscape : temperature line */
     
    /* (even at the widget-map) */
    #meteoprovbz_widget       { }  /* container of the widget */
    .meteoprovbz_icon         { }  /* container of the images (not available in the portrait format) */
</style>

Here are three examples:

Change in size (e.g. reduction)

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/en/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script>
    meteoprovbz_Widget.CreateWidget(document.getElementById("meteoprovbz_widget"));
</script>

<style>
    .meteoprovbz_icon img { width: 60px;  }
    .meteoprovbz_icon img { height: 60px; }
</style>
Widget

Colours used for temperatures

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/en/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script>
    meteoprovbz_Widget.CreateWidget(document.getElementById("meteoprovbz_widget"));
</script>

<style>
    .meteoprovbz_min   { background-color: blue; color:white !important; }
    .meteoprovbz_max   { background-color: red; color:white !important;  }
</style>
Widget

Colour scheme of the entire widget

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/en/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script>
    meteoprovbz_Widget.CreateWidget(document.getElementById("meteoprovbz_widget"));
</script>

<style>
    #meteoprovbz_container  { background-color: #d3ddf1; color:black; }
    .meteoprovbz_icon       { background-color: #81aaf1; }
    .meteoprovbz_min        { background-color: #1c4d94; color:white !important; }
    .meteoprovbz_max        { background-color: #bc0000; color:white !important; }
</style>
Widget