▶ Watch: Styling your club site (1:30)
Overview
The Theme Builder is a guided, visual tool for styling your club site. You pick a design style and 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
In the organiser menu down the left of the screen, choose Club Site (on a riding-school plan, Website), then the Theme tab along the top (Club Site → Theme). On a phone, open the menu first with the small tab on the right edge of the screen. The Theme Builder opens as its own full page (titled "Theme Builder"), not a pop-up.
Access Requirements
- Access: an admin of the organisation, or staff with Website and sponsors at Manage (see Staff Access)
- Subscription: a Club Site plan, or a riding-school plan (where the theme styles your school's website)
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: Design Style
A design style sets how your whole site is drawn: the headings, how sections are divided, the edge of your hero, buttons, menu and footer. Each style card is shown in your own colours, so you can see how it would really look. There are eight:
- Classic: clean panels on a calm page, the look every club site started with. Suits any club.
- Broadsheet: a magazine layout with fine rules between sections, a drop cap and an accent bar over each heading. Suits clubs with news, results and stories to tell.
- Grandstand: heavy upper-case headings, a slanted hero edge, slanted buttons and a bold footer band. Suits competition clubs, show jumping, campdraft and rodeo.
- Heritage: framed panels, a framed hero, fine ornamental dividers and widely spaced capitals. Suits studs, breed societies, dressage and long-established clubs.
- Meadow: a wave along the hero, tinted rounded panels and a hand-drawn underline. Suits riding schools, trail and pleasure riding, and family clubs.
- Pony Pop: bold and playful, with thick outlines and highlighter headings. Suits pony clubs, youth and gymkhana.
- Gallery: minimal, with no panels, lots of space and big quiet headings. Suits clubs with great photos to show off.
- Spotlight: cinematic, with a tall hero, gradient headings and glowing panels. Suits events, championships and clubs that want to make an entrance.
Picking a style also sets the fonts and panels to match, and leaves your colours unchanged. You can change the fonts and panels afterwards in the later steps.
Step 2: Choose a Look
Start from a ready-made set of colours and fonts. There are fifteen: Classic Green, Bold Blue, Modern Mono, Warm Earth, Fresh Air, Dark Prestige, Paddock Natural, Pink & Pony, Midnight Glass, Editorial, Coastal Breeze, Sunset Ridge, Stable Slate, Arena Bold and Heritage Navy. Each preset card shows its brand, accent, navigation and background colours. Every new club site starts on the default deep sage green look. Some looks are marked with a design style (for example Arena Bold with Grandstand, Paddock Natural with Meadow, Editorial with Broadsheet) and switch your site to that style too; the others keep the style you already have. You can fine-tune everything after picking a preset.
Step 3: 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.
- Page background: the colour behind your content. Leave it for plain white, or pick a soft off-white; Reset clears it.
- 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 4: Logo
Your logo is optional and appears in your navigation bar and browser tab. It's 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 5: Typography
Pick a heading-and-body font pairing from the ready-made options (Modern, Classic, Elegant, Friendly, Bold, Natural, Statement, Refined, Contemporary and Playful) rather than typing font names. Each names the look rather than the typeface, so you don't need to know one serif from another. Then choose a Heading size (Compact, Balanced or Dramatic) and set the Base font size with the slider, which ranges from 14 to 20 px.
Step 6: Layout & style
Fine-tune the layout and surfaces. Every change previews instantly:
- Content panels: Card, Flat, Bordered or Glass
- Page backdrop: None, Soft glow, Mesh, Dots, Grid or Paper
- Navigation bar: Solid, Bordered, Transparent, Glass or Floating
- Corners: Sharp, Soft, Rounded or Pill
- Buttons: Filled, Outline, Soft or Gradient
- Button hover: None, Lift or Glow
- Content width: Narrow, Standard or Wide
- Section spacing: Compact, Normal or Spacious
- Panel shadow: None, Subtle, Elevated or Floating (only shown for panel styles that use a shadow)
- Scroll animation: None, Fade or Rise (switched off automatically for visitors who prefer reduced motion)
Footer, Contact Details & Social Links
An expandable Footer, contact details & social links section sets what appears at the bottom of every page:
- Footer layout: Columns or Simple (see Footer Layouts below)
- Tagline, and the footer Address, Email and Phone
- 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. Add a status label, a message and an optional link, then choose a Colour: Accent, Brand colour, Green (open / good news), Amber (heads-up), Red (closed / urgent) or Charcoal. You can 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.
Found this useful? Share it with your friends.
\n\n---\n\nSource:
wiki/features/THEME_EDITOR.md \nLast synced: 2026-10-21 13:14:27 UTC