Modern websites let you combine a layout, colour theme, header and fonts without writing HTML or CSS. The design applies across your club website; use the modern website builder to arrange the content within individual pages.
Open Setup > Website > Settings and find the Website Template section.
Choose Your Website Design Mode
New clubs joining from 9 September 2026 use Modern Layout & Theme. Clubs that joined before that date can also see Legacy Template and Bespoke HTML in Website Design Mode.
To use the modern options on an older club website, select Modern Layout & Theme. Changing the design does not automatically convert existing pages into blocks: existing content continues using its current editor.
Preview and Apply a Modern Design
- In Preview Modern Design, choose a layout, theme and header. For layouts with a sidebar, choose its position too. You can also try fonts, larger text and custom colours.
- Click Preview to open the sample design.
- When you have chosen your design, set the corresponding options under Saved website design.
- Click Update to apply those saved settings to your website.
The preview controls are separate from the saved design controls. Opening a preview does not apply that design to your website. Updating the saved settings changes the live website design; it is separate from publishing page content in the builder.
Modern Layouts
| Layout | What it displays |
|---|---|
| Classic two column | Page content alongside an optional sidebar. |
| Full width | Page content across the content area, with no sidebar. |
| Hero with content | A prominent introduction with the club name, followed by page content and an optional sidebar. |
| Dashboard tiles | Page content followed by tiles for latest news, featured pages and search, with no sidebar. |
For Classic two column and Hero with content, set Modern Sidebar to Right, Left or Hidden. Individual pages and the built-in website sections can also hide their sidebar. The sidebar setting is not shown for Full width or Dashboard tiles.
Modern Themes and Custom Colours
Modern Theme offers these 20 preset colour schemes:
- Black, White & Red
- Blue & Gold - High Contrast
- Blue & Teal
- Blue, Teal & Orange
- Bright Blue & Black
- Burgundy & Navy
- Copper & Brown
- Emerald Green
- Gold & Brown
- Green & Teal
- Green & Yellow
- Indigo & Cyan
- Navy & Gold
- Pink & Magenta
- Purple & Aqua
- Rose & Coral
- Rose & Orange
- Slate & Sky Blue
- Steel Grey
- Teal & Gold
Choose Custom Colours to set your own Main Colour and Accent Colour. Navbar Style then lets you choose Main colour nav, Dark main nav, Accent nav or White nav.
For any modern theme, Override Background Colour > Use custom colour replaces the website background with a solid colour. Untick it to restore the theme's default background.
The builder uses your website's main and accent colours in its design controls. Accent text and tints may be adjusted for readable contrast.
Fonts and Readability
Choose Body Font for paragraphs, lists and general content, and Heading Font for page titles and headings. Leave Theme body font and Theme heading font selected to use the theme defaults.
Both selectors include system fonts such as Arial and Georgia, plus fonts including Open Sans, Lato, Montserrat, Poppins, Nunito, Roboto, Raleway, Source Sans 3, Ubuntu, Quicksand, Comfortaa, Merriweather and Playfair Display. Headings also offer Oswald, Anton, Lobster and Amatic SC.
Enable Use larger text and more generous line spacing for a more spacious reading layout. This can be used with any font choice.
Headers and Mobile Banners
Modern Header offers Logo in navigation, Centred logo and Hero banner. The header uses the image selected as Website Logo under General Settings.
When using Hero banner, you can select an optional Mobile Hero Banner from your uploaded club document images. Use a less-wide image to keep the club logo prominent on phones. If you leave it empty, the website uses Website Logo on phones too.
The Hero banner header and Hero with content layout are separate choices: you can choose the header independently of the page layout.
Enable the Modern Website Builder
With the modern design selected, switch on Enable block editor and update the settings. New pages and news items then use the block builder, with example section layouts, images, club content blocks, automatic draft saving, previews and publishing.
See Modern Website Builder for the full editing workflow, including how existing content is handled.
Legacy and Bespoke Templates
For clubs that still have these options, Legacy Template provides the original numbered templates 1–15. Use Preview Legacy Website Template to view one and Legacy website Template to select it.
Bespoke HTML is for clubs maintaining their own template code. It requires an understanding of HTML, CSS and JavaScript. Selecting it exposes Website Template HTML, Website Template CSS and Website Template JavaScript. The legacy Bespoke Template choice also uses these fields.
The following library and template-tag information applies to legacy/bespoke designs. Use the modern settings and block builder for modern designs.
Libraries for Legacy and Bespoke Templates
Legacy and bespoke templates automatically include the following libraries, so you DO NOT NEED to include them in your template yourself:
-
JQuery version 1.11.0
-
Bootstrap version 3.3.6
-
Font Awesome version 4.2.0
-
HTML5Shiv
-
Respond
Bespoke Template Tags
There are certain special tags that you can insert into your template so that when your page is rendered, certain things happen such as the navigation is displayed.
The available tags are:
{clubLogo}
Inserts your club logo that you have set in the "General Settings" section on the "Website Settings" tab.
{navigationLinks}
Inserts a Bootstrap horizontal navigation menu.
{navmenu}
Inserts a vertical navigation menu.
{sideBar}
Inserts a sidebar with search form, featured news & featured pages tabs as well as any social media links you have added and Twitter widget code.
{searchForm}
Inserts a search form
{webAddress}
Inserts your club website address
{featuredNews,05}
Inserts the top 5 featured news items (no spaces and 2 digit number from 01 to 99)
{latestNews,05}
Inserts the top 5 news items ordered in descending order (no spaces and 2 digit number from 01 to 99)
{featuredPages,05}
Inserts the top 5 featured pages (no spaces and 2 digit number from 01 to 99)
{pageTitle}
Inserts the current page's title
{pageDescription}
Inserts the current page's description
{pageContent}
Inserts the current page's main content
{whosWho}
Inserts your who's who
{clubSessions}
Inserts a table of your club sessions
Hiding the Sidebar in a Bespoke Template
If you would like to be able to hide the sidebar on certain pages and news items, you need to give your main content div an id of "main_content" and your sidebar div an id of "side_bar".
Do not include any "forms" or form tags in your template.