Custom CSS

Complete styling control for your status page

Inject custom CSS to override any default styles on your status page. Get complete control over the visual appearance beyond the built-in theming options.

Clean Build Default: Custom CSS is empty by default. Add your styles in Admin → Settings → Appearance.

Adding Custom CSS

Navigate to Admin Panel → Settings → Appearance
Find the customCSS field
Enter your CSS code
Save settings and view your status page

Common Examples

Custom Font

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Custom Accent Color

:root {
  --accent-color: #8b5cf6;
}

.dark {
  --accent-color: #a78bfa;
}

Rounded Cards

.component-card {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Status Colors

.status-operational { color: #10b981; }
.status-degraded { color: #f59e0b; }
.status-partial-outage { color: #f97316; }
.status-major-outage { color: #ef4444; }
.status-maintenance { color: #3b82f6; }

CSS Variables

ATStatus uses CSS custom properties that you can override:

Variable	Description
--background	Page background color
--foreground	Primary text color
--muted	Muted background color
--muted-foreground	Secondary text color
--accent-color	Primary accent color
--card	Card background color
--border	Border color
--radius	Border radius

Useful CSS Selectors

Selector	Element
.header-logo	Header logo image
.component-card	Service component cards
.incident-card	Incident display cards
.status-badge	Status indicator badges
.subscribe-form	Email subscription form
.footer	Page footer

Pro Tip: Use your browser's DevTools (F12) to inspect elements and find the exact CSS selectors you need to target.

Caution: Overly aggressive CSS rules may break the layout on different screen sizes or themes. Always test your custom CSS in both light and dark modes.