Appearance → Customize → Additional CSS. Stored in the database, previewed live, and untouched by theme updates. Use it before you reach for a child theme.
Change a token, not a rule
Stoat’s stylesheet is one file reading CSS custom properties. Setting a property is usually one line where overriding rules would be ten, and it moves everything that depends on it at once.
:root {
--border: rgba(0,0,0,.16);
--spacing: 1.6em;
}
The ones worth knowing:
| Token | Theme’s value | |
|---|---|---|
--container-width | 1170px | set it in Customize → Layout instead |
--reading | 640px | likewise |
--wide | 900px | the alignwide width |
--gutter | 24px | the strip between content and screen edge |
--body-font --body-size --body-line-height | Typography sets these | |
--heading-font --heading-weight --heading-transform --heading-spacing --heading-line-height | ||
--nav-font --nav-size --nav-weight --nav-spacing --nav-transform | ||
--logo-font --logo-size --logo-weight --logo-spacing --logo-transform | ||
--text | #111 | Customize → Style |
--bg | white | |
--accent | rgb(0,0,238) | |
--meta | #767676 | |
--border | rgba(0,0,0,.1) | every hairline the theme draws — no picker for this one |
--gray --dark-gray --dark | #767676 #555 #111 | the neutral ramp |
--header-bg --header-text --header-meta --header-border | Header colours | |
--header-padding | 1em | |
--button-radius | 0px | |
--thumb-width --thumb-ratio | 100px 1/1 | listing thumbnails |
--loop-thumb-ratio | 3/2 | featured images inside a Query Loop |
--spacing --spacing-md --spacing-lg --spacing-xl | 1.4em 2em 2.8em 3.4em | the vertical rhythm |
Anything with a Customizer control should be set there, not here — you get a live preview and the value survives in a form you can find again.
Class names
.site-header .stoat-branding .site-title .site-tagline | the header |
.primary-nav .offcanvas-nav .social-nav .header-button | navigation and actions |
.entry-list .stoat-entry .entry-thumbnail .entry-title .entry-summary .entry-meta | a listing row |
.featured-wrap | the hero |
.archive-header .archive-title .archive-description | above a listing |
.stoat-single .single-header .single-title .single-subtitle .single-thumbnail .entry-content .entry-tags | a single post |
.site-footer .footer-widgets .footer-bottom .copyright .footer-menu | the footer |
.stoat-modal | any dialog |
WordPress’s own body classes are all there too, which is how you target one entry: .postid-123, .page-id-45, .category-news, .single, .home.
Breakpoints
Match the theme’s, so your rules turn on where its do:
@media (max-width: 767.98px) { /* phones and small tablets */ }
@media (max-width: 479.98px) { /* phones */ }
@media (min-width: 768px) { /* tablet and up */ }
When to move to a child theme
Additional CSS is one text box with no syntax highlighting, no version control and no way to split a file. Past roughly a hundred lines, put the CSS in a child theme’s style.css instead — where you can format it, comment it and keep it in git.