> ## Documentation Index
> Fetch the complete documentation index at: https://docs.betterstatus.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

You can customize the look of your status page with CSS. Custom CSS requires the default template and is configured in the dashboard under **Status Pages** → **Your page** → **Appearance**.

<Note>
  The BetterStatus branding in the footer cannot be customized, but it can be removed on the **Pro** plan.
</Note>

### Element reference

| Element                    | What it controls                                      |
| -------------------------- | ----------------------------------------------------- |
| `--bg`                     | Page background                                       |
| `--card`                   | Card and panel surface                                |
| `--border`                 | Dividers and separators                               |
| `--border-strong`          | Inputs, buttons, menus                                |
| `--text`                   | Primary text                                          |
| `--muted`                  | Secondary text                                        |
| `--muted-soft`             | Uptime range labels                                   |
| `--hover`                  | Row and button hover                                  |
| `--green`                  | Operational dot and uptime bar                        |
| `--amber`                  | Degraded dot and uptime bar                           |
| `--orange`                 | Outage dot and uptime bar                             |
| `--operational-text`       | Operational status label                              |
| `--amber-text`             | Degraded status label                                 |
| `--orange-text`            | Outage status label                                   |
| `.brand-logo`              | Logo block — use `background-image` for a custom logo |
| `.brand-name`              | Company name in the header                            |
| `.subscribe-button`        | Subscribe button                                      |
| `.status-banner`           | Full-width status bar                                 |
| `.banner-check`            | Status icon inside the banner                         |
| `.notice`                  | Active incident card                                  |
| `.notice-bar`              | Incident title bar                                    |
| `.notice-title`            | Incident title text                                   |
| `.notice-event-text`       | Timeline entry body                                   |
| `.notice-event-time`       | Timeline entry timestamp                              |
| `.component-group-title`   | Group header (e.g. "Core Platform")                   |
| `.component-name`          | Component name                                        |
| `.component-status`        | Status label next to a component                      |
| `.uptime-track`            | Uptime bar row container                              |
| `.uptime-day`              | Individual day bar                                    |
| `.uptime-meta`             | Range and uptime percentage labels                    |
| `.uptime-tooltip`          | Hover tooltip on uptime bars                          |
| `.history-toggle`          | Show / hide history button                            |
| `.incident-date`           | Date column in incident history                       |
| `.incident-title`          | Incident title in history                             |
| `.incident-status`         | Status label in history                               |
| `.subscribe-menu`          | Subscribe dropdown panel                              |
| `.subscribe-tab`           | Tab in the subscribe menu                             |
| `.subscribe-tab.is-active` | Active tab underline                                  |
| `.panel-note`              | Helper text inside a subscribe panel                  |
| `.email-input`             | Email address input                                   |
| `.url-input`               | Webhook and Discord URL input                         |
| `.email-subscribe`         | Email subscribe button                                |
| `.panel-submit`            | Webhook and Discord submit button                     |
| `.copy-button`             | Copy button for RSS, Atom, and Slack                  |
| `.check-box`               | Checkbox in the subscribe panel                       |
| `.subscribe-terms`         | Terms line at the bottom of the subscribe panel       |
| `.footer-copy`             | Copyright line in the footer                          |