Hauptinhalt

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:

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

 

<script type="text/javascript"
        src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script type="text/javascript">
meteoprovbz_Widget.CreateWidget(document.getElementById("meteoprovbz_widget"));
</script>
  
<style>
 .meteoprovbz_icon img {width:60px;}
 .meteoprovbz_icon img {height:60px;}
</style>

 

Widget

 

2) Einfärbung der Temperaturen

 

<script type="text/javascript"
        src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script type="text/javascript">
     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

 

3) Einfärbung des gesamten Widgets

 

<script type="text/javascript"
        src="https://wetter.ws.siag.it/Widget_v1.svc/web/loadSimpleWidget/de/0/Landscape.js">
</script>
<div id="meteoprovbz_widget"></div>
<script type="text/javascript">
     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.

Nebennavigation

Wetter Südtirol

Get it on Google Play

Wetterradar

Wetterradar

Blitzaktivität

Blitzaktivität

Satellitenbild

Satellitenbild

Webcams

Webcam Plose Telegraph - 2479 m

Temperaturkarte

Temperaturkarte

Facebook

Facebook


Aktuelle Werte

Auer:7.0 °C
Bozen:6.3 °C
Brixen Vahrn:5.5 °C
Bruneck:2.0 °C
Meran:7.3 °C
Schlanders:5.0 °C
Sterzing:4.2 °C
Toblach:2.2 °C