Custom style sheet: names to style by
This page is for a person who writes CSS. A self-hosted site can have a style sheet of its own that is added to the public pages after the theme, so a rule of yours wins over one of the same weight. You need not write one: the theme choices in Choose a ready-made theme cover most needs. To add one, see Add a custom style sheet.
It applies to the public pages only. It is taken out of the page in the admin panel (/admin) and the member portal (/member), so a style sheet that hides everything can always be put right from the admin panel.
Names to style by
Each public section and page, and the notable parts of them, carries a data-cm attribute. Select with [data-cm="hero"], and reach inside with [data-cm="hero"] h1. Style by these names, not by the class names on elements: the class names change between releases, and the names below are kept stable.
| Name | What it marks |
|---|---|
header | The menu bar at the top of every public page |
footer | The footer of every public page |
hero | The top section of the home page |
about | The About section of the home page |
about-body | The box holding the About text |
about-person | Each leader's card in the About section |
concerts | The Concerts section of the home page |
concert-card | Each concert's card |
concerts-note | The box under the concerts, holding the note and the past events button |
sold-out | The "SOLD OUT" banner across a concert's poster, and the "Sold out" pill in the lists on the Tickets page |
promos | The section of promo boxes |
promo | Each promo box. Its data-cm-style is accent or primary, as chosen for the box |
gallery-preview | The gallery section of the home page |
contact | The Contact section of the home page |
tickets | The Tickets page |
subscription | The season subscription box on the Tickets page |
subscription-cta | The button in the subscription box |
donate | The Donate page |
donate-tier | Each giving level on the Donate page |
auditions | The Auditions page |
gallery | The Gallery page |
past-events | The Past Events page |
past-directors | The Past Directors page |
resources | The Resources page |
resource-library | The library heading and text on the Resources page |
resource-card | Each card on the Resources page |
resource-link | Each link tile on the Resources page |
members-note | The note for members on the Resources page |
custom-page | A page of your own (Pages in the admin panel) |
popup | The pop-up notice's box |
popup-body | The part of the pop-up under its title: the message and buttons |
section-heading | A section's or page's centred heading, with the rule under it |
page-intro | The introduction under such a heading |
rich-text | Text written in the formatting editor, wherever it is shown |
Example:
[data-cm="hero"] h1 { letter-spacing: 0.05em; }
[data-cm="concert-card"] { border-radius: 0; }
[data-cm="promo"][data-cm-style="accent"] { background: #f3f2ef; }
Theme variables
The theme's colours and fonts are CSS variables set on the html element itself. A rule of yours that changes one therefore needs !important to win:
:root { --font-heading: Georgia, serif !important; }
:root { --color-primary: 35 57 91 !important; }
Colours are written as three numbers separated by spaces, red green blue, not as #hex: --color-primary: 35 57 91. Fonts are written as a CSS font-family list.
| Variable | What it is |
|---|---|
--color-primary, --color-primary-dark | The main colour and the darker one used in gradients |
--color-action | The colour of buttons and links (the primary) |
--accent-on-light, --on-accent-on-light | The accent colour on a light background, and the text colour that sits on it |
--accent-on-dark, --on-accent-on-dark | The accent colour on a dark background, and the text on it |
--cream-on-light, --cream-on-dark | The pale tint colour on light and on dark backgrounds |
--color-heading, --color-ink, --color-slate | Heading, body text and caption colours |
--color-rule | Borders |
--color-tint, --color-tint-end | The light sections' background, from and to |
--color-stripe | The stripe or rule under a heading |
--color-header, --color-on-header, --color-on-header-accent, --color-header-rule | The menu bar's background, its text, its highlight and the line under it |
--header-stripe | The height of the coloured stripe above a white header (5px or 0px, a length, not a colour) |
--font-heading, --font-body | The heading and text fonts |
What the server refuses
A style sheet is refused when it is saved, with the reason, if it contains any of these. Nothing is quietly removed: what is saved is exactly what you wrote.
| Not allowed | Why |
|---|---|
| More than 20,000 characters | A size limit |
A backslash \ | Every CSS escape starts with one, and an escape can spell any of the words below |
The character < | Nothing in CSS needs it, and it keeps </style out |
| Control characters, other than tab and new line | |
@import | It fetches a style sheet from somewhere else |
url(...) with anything but a path on your own site, such as url(/files/images/photo.jpg), or a data:image/ address | No requests to other sites. url(//example.org/x) and url(https://...) are refused |
image-set( | It takes an address without url() |
expression(, javascript:, behavior:, -moz-binding | Old ways of running a script from a style sheet. scroll-behavior and overscroll-behavior are fine |
Capital letters, spacing and comments make no difference: URL (, @IMPORT and a comment in the middle of a word are caught, and a comment cannot contain any of these either.
After an update
An update may change how a page is built. The data-cm names are meant to stay as they are from release to release, but the styles you write are yours to check after each update. If a page looks wrong after one, clear the style sheet in Site Settings, Theme to see whether it is the cause.