# Custom CSS class reference These class names and variables stay the same when a site is updated, so CSS written against them keeps working. Selectors that are not on this page can change without notice. --- ## Colour and layout variables Set colours in both :root, :root.light and :root.dark. Colours you pick in Appearance set the same variables; Custom CSS wins where both set one. | **Variable** | **What it changes** | **Light** | **Dark** | | ---------------------- | ----------------------------------------- | ------------------------- | ---------------- | | \--color-bg | Page background | #ffffff | #0f172a | | \--color-bg-secondary | Sidebar, cards, table headers, hover | #f8fafc | #1e293b | | \--color-sidebar-bg | Sidebar background only | uses --color-bg-secondary | your light value | | \--color-text | Body text | #1a1a2e | #f1f5f9 | | \--color-text-muted | Bylines, captions, the footer | #64748b | #94a3b8 | | \--color-primary | Links, current page, buttons, focus rings | #1a3bff | #60a5fa | | \--color-primary-light | Tint behind the current page and on hover | #dbeafe | #1e3a5f | | \--color-link | Links in page content only | uses --color-primary | your light value | | \--color-border | Borders and dividers | #e2e8f0 | #334155 | | \--color-code-bg | Code background | #f1f5f9 | #1e293b | | \--color-header-bg | Header background | your accent colour | your light value | | \--color-header-text | Header text and icons | #ffffff | your light value | | \--color-panel-info | Info panel background | #DEEBFF | #0c2a4d | | \--color-panel-note | Note panel background | #EAE6FF | #2b1f5c | | \--color-panel-warning | Warning panel background | #FFFAE6 | #3d3000 | | \--color-panel-error | Error panel background | #FFEBE6 | #3d1510 | | \--color-panel-success | Success panel background | #E3FCEF | #0f2d1a | | \--font-sans | Text font | system font | | | \--font-mono | Code font | system monospace font | | | \--content-max-width | Widest the page content grows | 820px | | | \--sidebar-width | Sidebar width | 280px | | --- ## Page | **Selector** | **What it is** | | ------------------------ | ------------------------------------------------ | | body.page-content | Every content page | | body\[data-space="KEY"\] | Content pages in one space | | .site-layout | The page grid: sidebar, content and On this page | | .site-main | The content column | | .article-body | The page content | | .article-body > h1 | The page title | | .site-page-banner | The announcement banner above the header | --- ## Header | **Selector** | **What it is** | | --------------------- | ------------------------------ | | .site-header | The top bar | | .site-header-title | The site name in the top bar | | .site-header-logo-img | The logo image | | .header-link | Each header link | | .site-search-input | The search box | | .theme-toggle | The light and dark mode button | --- ## Navigation | **Selector** | **What it is** | | ----------------------- | ----------------------------------------- | | .site-sidebar | The left sidebar | | .page-tree-link | Each page in the sidebar tree | | .page-tree-link--active | The page being viewed | | .space-tab | Each space tab, when navigation uses tabs | | .site-toc | The On this page panel | | .toc-item | Each heading in On this page | | .page-nav-link | The previous and next page links | --- ## Content | **Selector** | **What it is** | | ------------------------ | -------------------------------------------------------- | | .page-byline-meta | The author and date line under the title | | .site-panel | Every panel | | .site-panel--info | Info panels (also --note, --warning, --error, --success) | | .status | Status lozenges; each also has .status- | | details.expand | Expand sections | | .article-body table | Tables | | .article-body pre | Code blocks | | .article-body blockquote | Quotes | --- ## Macros | **Selector** | **What it is** | | ---------------- | ------------------------------------------------------------------ | | .c-macro | Every Capable macro | | .c-macro-- | One macro by name, for example .c-macro--buttons or .c-macro--tabs | --- ## Footer | **Selector** | **What it is** | | ----------------- | ---------------- | | .site-footer | The page footer | | .site-footer-text | Your footer text | --- ## Home page | **Selector** | **What it is** | | -------------- | --------------------------------- | | body.page-home | The site home page | | .home-hero | The heading area of the home page | | .home-hero h1 | The site name on the home page | | .space-card | Each space card | --- ## Ask AI | **Selector** | **What it is** | | ----------------- | -------------------------------------------------------- | | body.cap-ask-chat | The Ask AI chat, including where other websites embed it | --- ## A few things worth knowing * The footer always stays a block. You can restyle its colours, spacing and borders, but not turn it into a grid or flex row. * body\[data-space="KEY"\] uses the space key, not the space name. * Variables are the safer route. A colour set as a variable follows both modes; a colour set on a selector does not. --- ## Related ### [Custom CSS](https://help.gocapable.com/sites/custom-css.html) Where to write it and what is removed. ### [Style a published Confluence site with custom CSS](https://help.gocapable.com/sites/style-a-published-confluence-site-with-custom-css.html) Copyable examples. ### [Reference](https://help.gocapable.com/sites/reference.html) Other reference pages. --- _Stable names. Your CSS keeps working._