Website management
Theme
Set your colours, fonts and overall look — with optional AI help.
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 the panel beside the canvas. Tabs above the canvas switch to All theme settings (every colour, font, button and radius grouped in one place) and JSON (advanced) for export/import. A Version history of every saved change sits at the bottom.
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
- Browse the Default library, each theme shown with a colour swatch preview.
- Click Use as-is to make that theme your active site theme straight away.
- Or click Clone & customise to copy it into Your custom themes and open its canvas editor.
Create a theme from scratch
- In Your custom themes, click + New custom theme.
- Give it a name (for example, "Junior squad") and click Create & edit — the canvas editor opens.
Customise on the canvas
- Open a theme with its Edit button.
- 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 side panel.
- 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.
- Use the Desktop / Mobile toggle to check both viewports, and the side panel's Add to this theme row to add custom colours or button variants.
- Click Save theme in the floating save pill (top right) when you're happy. Identical saves are skipped, so a version is only recorded when something changed.
Activate your theme
- 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.
- The button reads Active once it's live on your site.
Undo a change
- In Version history at the bottom of the editor, click Restore on an earlier version to bring it back.
- 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
| Field / control | What it does |
|---|---|
| Use as-is | Activates a library theme without copying it |
| Clone & customise | Copies a library theme so you can edit it |
| + New custom theme | Creates a blank custom theme and opens its editor |
| Edit name | Rename the theme and set an optional description (in the editor header) |
| Canvas tab | The mock page — click a region to edit its colours, fonts and shape in the panel |
| All theme settings | Every colour, font, heading, button variant and corner radius grouped in one place |
| JSON (advanced) | View the raw tokens, export them as a file, or import a theme JSON |
| Desktop / Mobile | Switches the canvas viewport |
| Save theme | Saves your edits as a new version (floating pill, top right) |
| Restore | Brings back a previous version |
Tips & FAQ
- 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.
- 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.