Custom CSS for Status Pages
Custom CSS lets you go beyond the built-in logo, color, and font settings and apply arbitrary styles to your status page. It’s injected directly into the page <head> and supports the full CSS spec.
Plan Availability
Custom CSS is available on Starter and above.
| Plan | Custom CSS |
|---|---|
| Free | — |
| Starter | ✓ |
| Team | ✓ |
| Business | ✓ |
| Enterprise | ✓ |
| OSS Hero | ✓ |
Where to Find It
- Open your Status Page dashboard
- Go to Settings → Branding
- Scroll to the Custom CSS section
- Write your CSS in the editor
- Click Save
Changes take effect immediately on your live status page.
What You Can Target
Status pages are built on Bootstrap 5, so any Bootstrap utility or component class can be overridden. Some useful starting points:
/* Override the primary brand color */
:root {
--bs-primary: #e63946;
--bs-primary-rgb: 230, 57, 70;
}
/* Change the page background */
body {
background-color: #f8f9fa;
}
/* Customize the status page header */
.sp-header {
border-bottom: 2px solid var(--bs-primary);
}
/* Change the component status badge colors */
.sp-component-status-badge {
border-radius: 4px;
}
/* Hide the "Powered by StatusPage.me" footer */
.sp-footer-branding {
display: none;
}
Note: Hiding the footer branding requires White-label to be enabled on your plan. Custom CSS alone is not sufficient.
Common Use Cases
Match your product’s color scheme
:root {
--bs-primary: #6c47ff;
}
.sp-navbar {
background-color: #1a1a2e !important;
}
Change the body font
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
}
Increase component name font size
.sp-component-name {
font-size: 1.1rem;
font-weight: 600;
}
Add a custom announcement banner
body::before {
content: "Scheduled maintenance window: Sunday 02:00–04:00 UTC";
display: block;
background: #fff3cd;
color: #856404;
text-align: center;
padding: 8px;
font-size: 0.9rem;
}
Caveats
- No JavaScript — only CSS is accepted. Script tags are stripped.
- Platform updates may affect selectors — when StatusPage.me updates the status page template, custom CSS targeting specific markup may need adjustment. Stick to semantic classes (
.sp-*) where possible as these are more stable. - Dark mode — if your status page supports a dark theme toggle, test your custom CSS in both light and dark modes. Use CSS custom properties (
var(--bs-*)) rather than hardcoded colors where possible. - No
@importof external resources in production — for performance, prefer self-hosted fonts or those already available via Google Fonts CDN.
Relationship to Branding Settings
Custom CSS supplements, not replaces, the built-in branding controls:
| Setting | Where |
|---|---|
| Logo | Branding → Logo |
| Background / accent colors | Branding → Colors |
| Font family | Branding → Font |
| Full visual control | Branding → Custom CSS |
Built-in settings are applied first; custom CSS is applied on top and can override anything.
Related
- Branding Your Status Page — logo, colors, and fonts without CSS
- White-label — remove StatusPage.me branding entirely
- Custom Domain — serve your status page from your own domain