Instructions for the Widget

Our Weather on your Homepage. Instructions for 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.

You can choose between the widget with the 3-day forecast or the widget with the map view of the current day.

3-day forecast in portrait and landscape format

for South Tyrol,
for one of the 116 municipalities,
for one of the 7 mountain groups.

Map view

with the South Tyrol weather for the current day,
with an overview of the mountain weather 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.

CSS Customization (Design & Layout)

The weather widget can be easily customized using CSS variables.
This allows you to adapt colors, spacing, sizing, and responsive behavior without writing custom CSS files.

Variables can be applied directly to the widget or inherited from a parent container.

Layout & Responsiveness

These variables control how the weather cards are displayed and how they react to different container sizes:

Variable	Description	Default
`--weather-gap`	Space between weather cards	`1rem`
`--weather-switcher-breakpoint`	Container width below which cards switch to a vertical (single-column) layout. `0px` disables forced switching (default wrapping behavior).	`0px`
`--weather-card-min-width`	Minimum width of a card. Defines when wrapping or vertical layout occurs.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-card-max-width`	Maximum width of a card. Useful on mobile to prevent oversized cards.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-padding`	Inner spacing of each card	`0.75rem`
`--weather-border-radius`	Corner rounding of cards	`0.5rem`

Colors & Styling

Use these variables to match the widget to your website’s design:

Variable	Description	Default
`--weather-min-temp-color`	Background color for low temperature badges	`#345d8e`
`--weather-max-temp-color`	Background color for high temperature badges	`#d11525`
`--weather-badge-text-color`	Text color inside temperature badges	`white`
`--weather-bg`	Card background color	`#fff`
`--weather-text-primary`	Primary text color	`#000`
`--weather-text-secondary`	Secondary text color (labels, copyright, loading)	`#666`
`--weather-shadow`	Card shadow	`0 0.125rem ...`

Example: Customizing the Widget

<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>

Behavior with --weather-switcher-breakpoint: 500px:

Container wider than 500px → cards displayed horizontally
Container narrower than 500px → cards stacked vertically

Perfect for responsive and mobile-friendly layouts

Weather