Theme

The Theme page is where you choose the look of your public website — the colours, fonts, buttons and corner styling that visitors see on every page. You'll find it in the admin sidebar under Theme. It works like the page and navigation editors: a gallery of themes, and a canvas editor where you click the part of the page you want to change.

Who can use this

Editing the theme is limited to administrators. Every action — activating, cloning, saving and restoring — checks the admin role, so moderators and members can't make changes here.

What's on the page

The Theme page is a gallery. Your custom themes are shown as cards with a colour swatch preview, and the Default library of ready-to-use themes sits below. The line under the heading tells you which theme is currently active (this reads "Platform default" until you activate one of your own).

Clicking Edit on a theme opens its canvas editor — a mock club homepage drawn in your theme's colours and fonts. Click any part of the page (the navigation bar, a heading, body text, a card, a button, the status badges or the footer) and its settings open in a settings drawer on the right, the same drawer the page and navigation editors use. The canvas keeps working behind it, so clicking a different region moves the drawer to that one; Esc or the ✕ closes it. On a narrow screen the drawer fills the screen and its fields stack into one column. Tabs above the canvas switch to All theme settings (every colour, font, button, radius, spacing and card setting grouped in one place), the Style book (every section you can add to a page, drawn in the theme you're editing) and JSON (advanced) for export/import. A Version history of every saved change sits at the bottom.

On the gallery, Your fonts lists any fonts your club has uploaded (Pro).

A Helix Assistant hint also sits near the top. Describe a change in plain English (for example, "Switch the primary colour to navy blue and the accent to gold") and the assistant makes it for you.

Step by step

Start from a ready-made theme

1. Browse the Default library, each theme shown with a colour swatch preview.
2. Click Use as-is to make that theme your active site theme straight away.
3. Or click Clone & customise to copy it into Your custom themes and open its canvas editor.

Create a theme from scratch

1. In Your custom themes, click + New custom theme.
2. Give it a name (for example, "Junior squad") and click Create & edit — the canvas editor opens.

Customise on the canvas

1. Open a theme with its Edit button.
2. Click the part of the mock page you want to change — the navigation bar, a heading, body text, a card, a button, the status badges or the footer. Its settings appear in the drawer on the right.
3. Pick colours with the swatch picker, paste a hex value, or click a dot in the palette row under each picker — it holds your brand colours and any custom colours, so a button variant can reuse a saved colour in one click. Choose fonts from the searchable list; set heading sizes, weights and corner radii. The canvas updates as you type.
4. Use the Desktop / Mobile toggle to check both viewports, and the Add to this theme row — above the canvas, and along the bottom of the drawer — to add custom colours or button variants.
5. Click Save theme in the floating save pill (top right) when you're happy. It stays greyed out until you change something, so a version is only recorded when there is something to record.

Choose fonts

1. Click a heading or body text on the canvas, or open All theme settings, and click a font field.
2. The list shows only fonts that load on your site for every visitor: the system fonts, around twenty open-licence fonts we host for you, and any fonts your club has uploaded. Each name is shown in its own font. Type to filter the list, then click a font to choose it.
3. If your theme was set up with a font that isn't in the list, it's shown first, marked Not loaded. It still works as it always has: visitors who have that font installed see it, and everyone else sees the fallback. Pick a font from the list when you want everyone to see the same thing.
4. To go back to the standard font, pick Theme default at the top of the list. The field clears and your site uses ClubHelix's standard font (Inter, or Source Serif 4 for the serif font). The next time you open the theme, the field shows that font's name.

Set spacing, cards and scaling text

1. Open All theme settings.
2. Under Spacing and cards, choose the Space between sections on your pages (Compact, Standard, Roomy or Spacious), and a Shadow, Border and Border line for content cards (the boxes that hold events, links, people and similar items). You can also set the card settings from the canvas: click a card, then look under Cards.
3. Under Headings, fill in Smallest (phones) and Largest (desktops) to make a heading scale smoothly with the screen width. Use px or rem, such as 1.75rem and 3rem. Body text size has the same pair.
4. Leave a setting on Default (as now), or leave a size range blank, and your site looks exactly as it does today.

Check everything in the Style book

1. Click the Style book tab.
2. Every kind of section you can add to a page is drawn with sample content, in the colours, fonts, spacing and card styles you're editing, including changes you haven't saved yet.
3. Switch back to another tab, change something, and look again. When you're happy, click Save theme.

Upload your own font (Pro)

1. Get your font as a WOFF2 file, one file per weight (for example Regular and Bold). TTF, OTF and WOFF files aren't accepted, so convert them first. Each file can be up to 500 KB.
2. On the Theme gallery, find Your fonts. Choose the file, type the Font name you want to see in the font list, and pick its Weight and Style.
3. Tick the box to confirm your club is licensed to use the font on a website, then click Upload font.
4. Open a theme and choose the font from the list, under Your uploaded fonts. Upload each weight under the same font name so bold text uses your bold file.
5. To remove a font, click Delete beside it. Text that used it falls back to the next font in your theme.

Activate your theme

1. On the gallery, click Activate on a custom theme (or Use as-is in the library). You can also activate from the editor's header.
2. The button reads Active once it's live on your site.

Undo a change

• In Version history at the bottom of the editor, each row shows when a version was saved, who saved it, and how many settings it changed (for example "3 tokens changed", with their names). Click Restore on an earlier version and confirm to bring it back.
• A restore is saved as a new version, so nothing in the history is overwritten. If the theme is active, your public site changes straight away.
• A restore is checked like a save. If an old version holds a colour or font value that's no longer allowed, or body text that's too hard to read on the background, you'll see a message saying what to fix and nothing changes.
• For a cloned theme, Reset to source default (in the editor header) returns it to the library theme it came from.
• Discard in the save pill throws away unsaved edits.

Field reference

Tips & FAQ

• Who is responsible for a font's licence? Your club. Before you upload a font, check its licence allows use on a website. Many fonts bought for desktop use don't. The fonts in the built-in list are all open-licence, so you can use them freely.

• Why isn't my font in the list? The list only shows fonts that every visitor will see. On the Pro plan you can upload your own; otherwise pick the closest match from the list.

• What happens to uploaded fonts if we leave Pro? They're kept, but your site stops using them until you're back on Pro. You can still delete them.

• Why won't an old version restore? It holds a value we no longer accept, usually a colour or font that could break the page, or body text below the contrast minimum. Restore a different version, or change that setting and save.

• Why won't my colours save? To keep text readable, body text must reach at least 4.5:1 contrast against the page background (WCAG AA). If it's too low, you'll see a message asking you to adjust the Body text or Page background colour.

• Nothing changed? Saving an identical theme is skipped on purpose, so version numbers only reflect real edits.

• Buttons follow your brand. The primary, secondary, accent and navbar buttons track your brand colours automatically until you customise their colours directly — after that they keep their own.

• Need more than colours and fonts? On the Pro plan, Custom CSS (linked beside the active theme) lets you add your own CSS to your public website.

• Move faster with Helix. Click Open the assistant and describe your colours and fonts in plain English.

• Theme controls the site's overall styling; for your logo and club identity see Branding. To build out the site itself, see Pages and Navigation.