Istruzioni per il widget

Il nostro bollettino meteo sulla tua homepage. Istruzioni per il widget meteo

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

Puoi scegliere il widget che genera le previsioni di 3 giorni e la visualizzazione su mappa del giorno attuale.

Previsioni di 3 giorni

dell'Alto Adige,
di un comune: seleziona un comune,
del meteo montagna: seleziona uno dei sette gruppi montuosi.

Vista mappa

Meteo Alto Adige,
Panoramica del meteo in montagna.

Seleziona i parametri d’interesse tra cui località, lingua, orientamento e copia il codice HTML visualizzato nella tuo sito web. È possibile personalizzare i colori mediante interventi al foglio CSS della pagina ospitante.

Personalizzazione CSS (Design e Layout)

Il widget meteo può essere personalizzato facilmente tramite variabili CSS.
In questo modo puoi adattare colori, spaziature, dimensioni e comportamento responsive senza dover scrivere CSS aggiuntivo.

Le variabili possono essere definite direttamente sul widget oppure ereditate dal contenitore genitore.

Layout e Responsività

Queste variabili controllano la disposizione delle card meteo e il loro comportamento su diverse dimensioni di schermo:

Variabile	Descrizione	Valore predefinito
`--weather-gap`	Spazio tra le card meteo	`1rem`
`--weather-switcher-breakpoint`	Larghezza del contenitore sotto la quale le card vengono visualizzate in verticale (una sola colonna). `0px` disattiva il cambio forzato (comportamento standard con wrap).	`0px`
`--weather-card-min-width`	Larghezza minima di una card. Determina quando avviene il wrap o il layout verticale.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-card-max-width`	Larghezza massima di una card. Utile su dispositivi mobili per evitare card troppo larghe.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-padding`	Spaziatura interna delle card	`0.75rem`
`--weather-border-radius`	Arrotondamento degli angoli delle card	`0.5rem`

Colori e Stile

Queste variabili permettono di adattare il widget allo stile grafico del tuo sito:

Variabile	Descrizione	Valore predefinito
`--weather-min-temp-color`	Colore di sfondo per le temperature basse	`#345d8e`
`--weather-max-temp-color`	Colore di sfondo per le temperature alte	`#d11525`
`--weather-badge-text-color`	Colore del testo nei badge delle temperature	`white`
`--weather-bg`	Colore di sfondo delle card	`#fff`
`--weather-text-primary`	Colore del testo principale	`#000`
`--weather-text-secondary`	Colore del testo secondario (etichette, copyright, stato di caricamento)	`#666`
`--weather-shadow`	Ombra delle card	`0 0.125rem ...`

Esempio di utilizzo

<weather-app-st style=" --weather-gap: 2rem; --weather-switcher-breakpoint: 500px; --weather-bg: #f5f5f5; --weather-text-secondary: #888; --weather-badge-text-color: #000; " ></weather-app-st>

Comportamento con --weather-switcher-breakpoint: 500px:

Contenitore più largo di 500px → card disposte orizzontalmente
Contenitore più stretto di 500px → card disposte verticalmente in un’unica colonna

Ideale per layout responsive e mobile

Meteo