Istruzioni Widget

Il nostro bollettino sulla tua homepage – Il widget meteo

Con il widget del servizio meteorologico provinciale è possibile integrare facilmente il bollettino meteo sulla propria homepage.

Si può scegliere fra due widget diversi:

  • Widget-Previsioni: previsione di 3 giorni dell’Alto Adige e di un comprensorio a scelta
  • Widget-Cartina: La cartina della previsione del giorno attuale

Selezionare i parametri d’interesse tra cui località, lingua, orientamento e copiare il codice HTML visualizzato nella propria pagina web.
Sarà possibile procedere ad un’ulteriore personalizzazione mediante interventi al foglio CSS della pagina ospitante.

Nel frammento sotto sono riportate tutte le definizioni personalizzabili a livello di foglio di stile.

<style>
    /* (disponibili solo nel widget-previsioni) */
    #meteoprovbz_container    { }  /* id contenitore interno  */
    .meteoprovbz_min          { }  /* classe per le temperature minime */
    .meteoprovbz_max          { }  /* classe per le temperature massime */
    .meteoprovbz_temperatures { }  /* solo impostazione orizzontale: riga delle temperature */

    /* (comune anche al widget-cartine ) */
    #meteoprovbz_widget       { }  /* contenitore del widget */
    .meteoprovbz_icon         { }  /* contenitore delle immagini (non disponibile per impostazione verticale previsioni) */
</style>

Di seguito tre esempi:

Modifica delle dimensioni (es. riduzione)

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

Modifica della visualizzazione del colore delle temperature

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

Modifica della visualizzazione del colore dell’intero widget

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

Per ulteriori informazioni sui fogli di stile CSS rimandiamo al sito Cascading Style Sheets del W3C. Si ricorda tuttavia, che gli effetti sulla visualizzazione del widget dipendono fortemente dal supporto di tale tecnologia da parte del browser.