Pro Weather
Customizing your site

Appearance & branding

Make the site yours: logo, banner, twelve colour themes or your own page colour, light or dark with a visitor switch, typefaces and text size, card styles, tab order and names, chart colours, a footer line, and an AI style proposal from one sentence.

Your site's Appearance settings let you make it match your brand or club without touching any code. Open your site in the dashboard and go to Appearance. The controls are grouped under five tabs - Theme, Header, Layout, Charts and Footer - and a live preview of your site sits alongside them and updates as you tweak. One Save button saves all five tabs at once; saving makes it live.

Describe your site

Not sure which colours you want? At the top of Appearance, the Describe your site card takes a sentence instead - "warm and coastal, like a village by the sea", or "dark and cosy, warm colours, wind front and centre" - and an AI proposes a complete style to match.

A Pro feature

AI styling is available on the Pro plan. Unlike most Pro features it isn't part of the free trial, because every generation calls a paid AI service.

Press Generate and nothing on your live site changes yet. You get a sentence describing what was proposed, and a preview of your own site wearing the new style, right there in the page. From there:

  • Apply to site saves it, exactly like saving the form below.
  • Discard throws it away - generating on its own never changes anything.
  • Regenerate has another go; reword your description first if the result missed what you meant.

A proposal can only set options you could have set by hand: theme preset, background, page and accent colours, light or dark and the visitor switch, fonts and text size, corners, density, card style, cards or gauges and columns for the Overview tiles, chart colours and style, header, logo and banner options, tabs or one page, content width and tab bar, the order of your tabs and Overview tiles, and which panels are shown. It never writes text (so your section names and footer line are yours alone), adds images or touches your readings, so nothing it proposes can break your site - and once applied, every value appears in the controls below for you to fine-tune.

Getting a good result

Describe the feeling and what matters most, rather than hex codes: "calm and minimal", "our club's green and white", "rain and wind first". Asking for something to be front and centre moves that tab and its tiles forward, so say what visitors should see first. You can generate up to ten times an hour, so it's worth trying a few wordings.

Theme

Colours

  • Theme: choose a preset palette - Sky, Forest, Sunset, Mono, Midnight, Rose, Sand, Aurora, Ocean, Lavender, Ember or Olive.
  • Background: how the page behind the cards is painted, in the theme's colors - a soft gradient (the default), a vivid gradient with more color, or a solid flat tone.
  • Color mode: Light, Dark or Auto (Auto follows each visitor's device).
  • Let visitors switch between light and dark: adds a small sun/moon button to the header (and to the one-page menu). Each visitor's choice is remembered in their own browser; it never changes your setting. Off by default.
  • Custom accent color: turn this on to override the preset's accent with your own brand colour. It's used for the header, active tab and links.
  • Custom page color: turn this on to replace the theme's page background with a tint of your own. The colour you pick is what the top of the page shows in light mode, and the background style decides how it fades - to white for a soft gradient, part-way for a vivid one, or not at all for a solid page. Dark mode gets a deep shade of the same tint, or a second colour you pick yourself. Pick a light tint for light mode: the text is dark, and the page warns you when the two would clash.

Type & shape

  • Font: pick the typeface used across the site - Clean (the default), Elegant serif, Friendly rounded, Modern grotesque, Humanist sans, Display serif or Monospace.
  • Headings: optionally pair a second typeface for the site title and section headings - a display serif headline over clean body text, for example. The default is to match the body font.
  • Text size: Small, Normal (the default) or Large. Every heading, label and reading scales together; spacing stays put, so a larger size is the easy way to make a site readable from across the room.
  • Corners: how rounded cards, tiles and buttons are - Sharp, Rounded (the default) or Soft.
  • Density: how tightly the site packs its content together - Compact, Comfortable (the default) or Airy.
  • Cards: how every card and panel is drawn - Outlined (the default, a thin border and a soft shadow), Elevated (no border, a deeper shadow), Flat (no border or shadow, a tinted surface) or Glass (translucent and blurred over the background, which looks best over a vivid gradient or a banner photo).

How the Overview grid shows each metric - Cards or Gauges - and how many tiles fit across now live under Layout, next to the tile list.

  • Header style: Centered, Left, Compact or Hero. Compact skips the tagline for a slim, single-row header. Hero opens the page on the weather: a full-width band in your accent colour (or over your banner photo, if you have one) with the current temperature, the conditions, how it feels and up to four headline readings (humidity, wind, rain today and pressure, each only if its Overview card is on).
  • Logo: shown in the site header. Once a logo is saved you can also pick its size (Small, Medium or Large) and choose Show the logo instead of the site name for a logo that already carries your name - the name stays in the page for search engines and screen readers.
  • Favicon: the small icon shown in the browser tab (and used as the app icon when visitors install your site).
  • Banner photo: a wide photo shown behind the header - your station's view works great. Once a banner is saved you can set its height (Short, Medium or Tall), how much it is darkened so the white header text stays readable (Light, Medium or Strong), and which part of the photo to keep in view when it is cropped (Top, Centre or Bottom). With the Hero header style the height setting is available without a photo too, as the height of the coloured band.
  • Show station location & map link: display where your station is, with a link to a map (needs a station with a known location).

Image tips

Images can be PNG, JPG, WebP, GIF or ICO, up to 2 MB, and apply after saving. Use a transparent PNG or SVG-style logo so it sits cleanly on any header colour; banner photos look best wide (landscape) and at least 1600px across.

Layout

  • Template: how your sections are presented.
    • Tabs (the default): sections sit behind a tab bar and visitors switch between them.
    • One page: every section is stacked on a single scrolling page, so everything is visible without a click. Good for a site with only a few sections, or for a screen that's left on all day.
  • Content width (tabs template): how wide the page column is on a large screen - Narrow, Normal (the default), Wide or Full width. The one-page template always uses the full width, so it can lay sections side by side.
  • Tab bar (tabs template): how the tabs are drawn - Text (the default, the active tab takes the accent colour), Pills (the active tab is a filled accent pill) or Bar (a solid accent bar, like the one-page menu). Keep the tab bar in view while scrolling pins it to the top of the screen on a long tab.
  • Tab order and names (called Section order and names on the one-page template): put your sections in the order you want, and press the pencil on a row to give it your own name - "Greenhouse" instead of "Sensors", "Now" instead of "Overview". Names are shown as you type them, in your site's language; leave a name empty to keep the standard, translated one. Up to 24 characters.
  • Default tab: choose which tab visitors land on first. The one-page template has no default tab, since nothing is hidden.
  • Overview tiles: how the Overview grid shows each metric - Cards (the default), number tiles with a 24-hour trend line, or Gauges, round dials that show each reading on its scale, the classic weather-console look. Humidity, dew point, UV and air quality colour their dial by comfort or severity band, and wind by its Beaufort colour. Columns sets how many tiles fit across on a desktop screen (3 to 6; phones and tablets keep two and three). Below that, pick which metric tiles appear and the order they show in.

Sections only appear when their data exists and they're enabled in Settings - see Tabs & panels for how the sections work.

Switching template keeps everything

Your order, tiles and enabled sections carry over both ways, so you can try the one-page layout and switch back without redoing anything.

Charts

Every history chart on the site - the Overview trend, the Temperature, Wind, Rain and other tabs, the reports - follows two choices here:

  • Colors: Classic (the default) keeps the meteorological palette visitors know from other stations - red temperature, blue rain, green wind. Accent draws every chart in shades of your accent colour, so the charts match your brand. Severity bands (UV, air quality), the wind scale and the gauges keep their own meaning-carrying colours either way.
  • Style: Filled (the default) shades the area under each line; Lines draws plain lines.

The range visitors land on - 24 hours, a week, a month - is set on the Panels page. A visitor's own chart builder keeps its per-series colours.

  • Footer text: one line of your own at the bottom of every page - a credit, a disclaimer, a copyright line. Plain text, up to 200 characters.
  • Social links: YouTube, Facebook, Instagram and X (Twitter).
  • Custom link: one extra footer link with your own label and URL - perfect for your club's homepage.

Every site also carries a small "Powered by Pro Weather" line at the bottom of the page.

Your station's story lives on its own page - see About your station below.

Weather map

If your station has coordinates, Appearance gains a Weather map card. Turn on Show a Windy weather map to add an interactive Windy.com map, centred on your station, as its own Map tab or section. Pick the layer it opens on (wind, rain, temperature and more) and the forecast model. Nothing loads for visitors who never open the map.

Webcam

The Webcam card adds a live image from your camera as its own Webcam tab or section. Paste the direct image URL your camera serves - the snapshot endpoint of an IP camera, or a JPEG your camera uploads to your own web space. While a visitor has the page open, the image refreshes every few minutes on its own.

Our servers fetch the image and cache it briefly, then serve it to your visitors from your site's own address. That means:

  • Visitors never connect to your camera - your home connection stays private, and the camera never sees visitor traffic, no matter how busy the site gets.
  • Plain http:// cameras work on your secure https:// site.
  • Cameras that need a login work too: use the http://user:password@camera.example.com/snapshot.jpg form and the credentials stay on our servers, never in your public page.

The URL must point at a still image (JPEG, PNG, WebP, GIF or AVIF, up to 5 MB) - a video stream or a webpage containing the image won't work. Most cameras have a snapshot URL for exactly this; check the camera's manual for "snapshot" or "still image". Clear the field and save to remove the tab.

Visitor counter

The Visitor counter card puts a "visitors this month" line in your site's footer. It's off until you turn it on - see See your visitors for what's counted and how the numbers are collected.

About your station

The About page in the dashboard (its own item, next to Appearance) is where you tell visitors about the station - where it stands, its history, the equipment it runs:

  • Text: plain text, up to 5,000 characters. A blank line starts a new paragraph.
  • Photo: a shot of the station or its surroundings (PNG, JPG, WebP or GIF, up to 2 MB).
  • Links: up to 8 labelled links, for your club, a webcam or your old site.

Fill in any one of the three and your site grows an About section, ordered with the rest under Layout. Leave all three empty and no About section appears.

Mobile app

Visitors can install your site as an app on their phone - it gets its own icon (your favicon or logo) and opens full-screen. The "Add to home screen" banner toggle controls whether visitors see an invitation; installing stays possible from the browser menu either way.

Starting over

At the bottom of the Appearance page, Reset appearance puts every choice on that page back to how a brand-new site starts: theme, background, page and accent colours, color mode and the visitor switch, fonts, text size, corners, density, card style, chart colours and style, header, logo and banner options, tile style and columns, template, content width, tab bar and the order of your tabs and tiles, plus the location, home-screen and visitor-counter switches.

Your logo, favicon, banner photo, section names, footer text, custom link and social profiles are kept, and so is everything on the other tabs - the reset only covers the page you're standing on. There's a confirmation step, and no undo afterwards, so it's worth a look at the live preview first.

Tried something and don't like it?

This is the quick way back after experimenting, and the fastest way to undo a style you asked the AI customizer for. The panels have their own reset - see Tabs & panels.

Site name & description

Your site's title and tagline live on the Settings page, alongside units and language and search-engine options.

Next steps

On this page