Overview
The Theme Builder is a guided, visual tool for styling your club site. You pick a ready-made look, set two brand colours, upload a logo and choose a font pairing — and Horsify works out the rest of the palette so your text always stays readable. There's no code or colour theory to learn, and a live preview shows your changes as you make them.
Where to Find It
From your Club Site Management screen, open the Theme card. The Theme Builder opens as its own full page (titled "Theme Builder"), not a pop-up.
Access Requirements
- Role: Organiser, Organiser Admin, or Organiser Contributor
- Subscription: a plan that includes Club Sites
How It Works
The builder is laid out as a few simple steps on the left, with a live preview on the right.
Step 1 — Choose a Look
Start from a ready-made preset such as Classic Green, Bold Blue, Modern Mono, Warm Earth, Fresh Air, Dark Prestige, Paddock Natural, or Pink & Pony. Each preset card shows its brand, accent, navigation and background colours. Every new club site starts on the default deep sage green look. You can fine-tune everything after picking a preset.
Step 2 — Your Colours
You only set two colours:
- Brand colour — your main colour, used for buttons, links, and (by default) the navigation bar.
- Accent colour — used for highlights and secondary calls to action.
Horsify automatically derives the navigation, button, page and text colours from these two, and guarantees the text meets accessibility contrast. Pick colours with the colour picker or type a hex code (e.g. #2E4E3F).
You can also choose:
- Page style — Light or Dark.
- Navigation bar colour — Brand, Dark, Light, or Custom (choose your own colour if you pick Custom).
An "auto-generated palette" readout shows the derived navigation, button, accent and page colours so you can see the result at a glance.
Step 3 — Logo
Your logo is an uploaded image file, not a link. Click to choose a file — JPEG, PNG, WebP or SVG, up to 2 MB. You can also set:
- Logo alt text — describes the logo for accessibility
- Logo position — Left or Centre
- Logo size — Small, Medium, or Large
Use the remove button to clear a logo you've uploaded.
Step 4 — Fonts
Pick a heading-and-body font pairing from the ready-made options (Modern, Classic, Elegant, Friendly, Bold, and Natural) rather than typing font names. Then set the base font size with the slider, which ranges from 14 to 20 px.
Advanced Styling (Optional)
An expandable Advanced styling section lets you fine-tune the layout and footer:
- Corner style — Sharp, Soft, Rounded, or Pill
- Button style — Filled, Outline, or Soft
- Navigation layout — Solid, Bordered bottom, or Transparent over hero
- Section spacing — Compact, Normal, or Spacious
- Card shadow — None, Subtle, Elevated, or Floating
- Footer text — e.g. a copyright line
- Social links — Facebook, Instagram, Twitter/X and YouTube URLs
Previewing and Saving
- The right-hand panel shows an instant preview (navigation bar, headings, body text, buttons and a content card) plus a full-page preview you can view at desktop, tablet or mobile widths.
- Click Save & publish to apply your theme — changes take effect on your club site immediately.
- Click Reset to default to return to the default look (then Save to apply).
Best Practices
Colours
- Use colours from your club's brand
- Because Horsify derives readable text automatically, focus on picking a brand and accent you like — the rest is handled
- Check the look in both Light and Dark page styles
Fonts
- Choose a pairing that suits your club's tone
- Keep the base size in the comfortable-reading range
Logo
- Use a PNG with transparency or an SVG for the sharpest result
- Keep the file under 2 MB
- Set meaningful alt text
Footer
- Update the copyright year each year
- Use full URLs (including
https://) for social links - Only link social accounts you actively use
Header, Announcement & Contact Bar
Under Header, announcement & contact bar you can add the chrome that makes a club site read like a stand-alone club website:
-
Header button — a prominent call-to-action beside the menu (e.g. Become a member →
/membership). Styles: Accent, Brand colour, Outline, White. On mobile it appears inside the menu. - Contact bar — a slim strip above the menu with address · email · phone on the left and your social icons on the right. It uses the footer contact details unless you override them here.
- Announcement strip — a coloured strip at the very top of every page, ideal for grounds status (Grounds open — have a great ride!), entries closing or wet-weather notices. Choose a colour tone (green for open, red for closed, amber for heads-up) and optionally let visitors dismiss it; changing the message re-shows it to everyone.
Footer Layouts
The footer section supports two layouts:
- Columns (default for new sites) — logo + tagline, an Explore column of your nav links, a Contact column (address, email, phone) and a Follow-us column of social icons.
- Simple — the original single centred row. Existing sites keep this until you switch.
Troubleshooting
Colours Not Applying
- Make sure your colour is a valid hex code
- Click Save & publish, then hard-refresh your browser
Logo Not Showing
- Confirm the file uploaded (it appears in the preview)
- Check the file is under 2 MB and a supported format
- Save and refresh
Changes Not Appearing on the Live Site
- Click Save & publish — the preview updates live, but the site only changes once you save
- Hard-refresh your browser (Ctrl+Shift+R)
Related Documentation
Support
For help with the Theme Builder, review this guide and the troubleshooting steps above, then contact Horsify support if you're still stuck.\n\n---\n\nSource: wiki/features/THEME_EDITOR.md \nLast synced: 2026-09-07 11:48:24 UTC