Anleitung Widget

Unser Wetter auf Ihrer Homepage – Das Wetter Widget

Mit dem Widget des Landeswetterdienstes können Sie ganz einfach den Wetterbericht in Ihre eigene Homepage einbauen.

Dabei stehen Ihnen zwei Arten von Widgets zur Verfügung:

  • Widget-Vorhersagen: 3-Tages-Vorhersage für Südtirol oder Ihren Bezirk
  • Widget-Karte: Die Südtirol-Wetterkarte des aktuellen Tages

Wählen Sie zunächst Ort, Sprache, Format und kopieren Sie den daraus folgenden HTML-Code an die gewünschte Stelle in Ihre Homepage.
Des Weiteren kann das Farbschema und die Größe der Widgets individuell angepasst werden.

Folgende Styling Elemente können dabei personalisiert werden:

<style>
    /* (verfügbar nur beim Widget-Vorhersagen) */
    #meteoprovbz_container    { }  /* id interner Container  */
    .meteoprovbz_min          { }  /* Box der Tiefsttemperaturen */
    .meteoprovbz_max          { }  /* Box der Höchsttemperaturen */
    .meteoprovbz_temperatures { }  /* nur beim Querformat: Temperaturzeile */

    /* (auch beim Widget-Karte) */
    #meteoprovbz_widget       { }  /* Container des Widget */
    .meteoprovbz_icon         { }  /* Container der Bilder (nicht verfügbar beim Hochformat) */
</style>

Hier dazu drei Beispiele:

Änderung der Größe (z.B. Verkleinerung)

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/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

Einfärbung der Temperaturen

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/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

Einfärbung des gesamten Widgets

<script src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/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

Weitere Informationen zu der CSS Programmierung finden Sie auf der Internetseite Cascading Style Sheets des W3C. Die Visualisierung des Widgets hängt außerdem stark von den Eigenschaften des Internetbrowsers ab.