Custom CSS

Custom CSS lets a club on the Pro plan add its own finishing touches to its public website: a denser fixtures table, a card with a softer shadow, a heading with a little more letter spacing. There are two places to write it: a site-wide stylesheet for the whole website, and a Custom CSS field on each page section for styling that one section.

Everything you write is checked before it is saved and checked again every time a page is shown. Anything that could harm your visitors or break the page is removed, and you're told what was removed and why.

Who can use this

• Site-wide CSS can be changed by your organisation's administrators. Moderators can open the page but can't edit it.
• Section CSS can be written by anyone who can edit that page.
• Custom CSS shows on your website only while your organisation is on the Pro plan. On a lower plan you can still see the page, with a note about the plan.

What's on the page

Open Theme in the admin sidebar and follow the Custom CSS link beside the active theme. The page has one large text box for your stylesheet, a size counter (the limit is 20 KB), and two buttons:

• Check reads your CSS and lists anything that would be removed, without saving.
• Save saves it. Your public website shows it straight away.

For a single section, open the page in the page editor, expand Layout & style on the section, and use the Custom CSS box at the bottom (the limit is 2 KB per section). It lists anything that will be removed as you type.

Step by step

Style your whole website

1. Go to Theme and click Custom CSS.
2. Type your CSS. Write selectors as you normally would, for example .card { border-radius: 12px }.
3. Click Check to see whether anything will be removed.
4. Click Save, then View your site to see the result.

Style one section

1. Open the page in the page editor and expand Layout & style on the section.
2. In Custom CSS, write rules for things inside the section, like .stat { font-size: 2rem }.
3. To style the section itself, start the selector with &, for example &:hover { opacity: .9 }.
4. Save the page as usual.

Field reference

What you can use. Layout (flex, grid, gap, width, height, aspect ratio), spacing (margin, padding), borders, corner radius and shadows, colours and backgrounds, typography, transforms, transitions and animations with @keyframes, plus @media, @supports and @container. Your theme's colours are available as variables, such as var(--color-primary).

What is removed, and why:

• @import and @font-face: custom CSS can't load other files. Add fonts in the theme editor.
• url() pointing anywhere except your own uploaded images, and images in anything other than background or background-image.
• position: fixed and position: sticky, and a z-index above 10: these can cover your whole page, including the menu.
• content: with text in it: words added by CSS can mislead visitors and screen readers skip them.
• Attribute selectors on form fields (for example input[value]): this is a known way to read what someone types.
• Custom properties (--anything: …): set colours and fonts in the theme editor instead.
• @layer, @page, @charset, @namespace, @property, vendor-prefixed properties, and anything the checker can't read.

What is refused outright. A selector that targets :root, html or body, or one that starts with *, isn't saved at all, and you're told why. Your CSS already applies only to your website, so these can't do what you'd expect.

Tips & FAQ

• Does it change the admin? No. Custom CSS appears only on your public website, never in this admin, so nobody can be misled by a restyled admin screen.
• What happens if we move off Pro? Your CSS is kept, but it stops showing on your website. It comes back as soon as you're on Pro again.
• What happens when we switch theme? Nothing: custom CSS belongs to your organisation, not to one theme, so it carries over.
• Why did my rule disappear after saving? It used something on the "removed" list above. Click Check to see the reason for each part.
• My section CSS looks different after saving. It's stored on one line, with & in front of each selector and anything removed left out. The rules that were kept mean exactly what you wrote.
• Can I use an image? Yes, as a background or background-image, if it's an image you uploaded to your own site (the address starts with /api/media/). Visitors see it only if the image itself is public: an image filed under a draft page stays private, so the background stays empty until that page is published.
• For colours, fonts and buttons, use the Theme editor; for your logo see Branding.