Customizing Status Pages

Go beyond the defaults with four tiers of status page customization — branding, layout, content, and advanced options.

Overview

Signalog status pages are customizable through four tiers, from simple branding changes to full custom CSS. All changes preview in real-time before publishing.

Tier 1: Branding

The most common customizations. Found under Status Page > Settings > Branding.

  • Logo — Upload your company logo (SVG, PNG, or JPG). Displayed in the status page header.
  • Accent color — Your brand color, used for status indicators, links, and buttons. Enter a hex code or use the color picker.
  • Favicon — Upload a custom favicon for the status page.
  • Header style — Choose between:
    • Full-width — Logo and title span the full page width with a colored background bar.
    • Centered — Logo and title are centered with a clean, minimal look.

Tier 2: Layout

Control the structure and data displayed. Found under Status Page > Settings > Layout.

  • Component layout — Display components as a list (compact, one per row) or grid (cards, good for many components).
  • Uptime history days — Show 30, 60, or 90 days of uptime bars per component. Each bar represents one day, color-coded by uptime percentage.
  • Show response time — Toggle response time graphs on or off per component.
  • Group behavior — Set component groups to start expanded or collapsed by default.

Tier 3: Content

Add context and customize labels. Found under Status Page > Settings > Content.

  • Announcements — Pin a message at the top of the status page. Useful for planned maintenance notices or important updates. Supports Markdown formatting.
  • Custom labels — Override default status labels. For example, change “Operational” to “All Systems Go” or “Major Outage” to “Service Disruption”.
  • Show/hide sections — Toggle visibility of:
    • Overall status banner
    • Uptime history bars
    • Incident history timeline
    • Subscriber form

Tier 4: Advanced

For complete control over look and feel. Found under Status Page > Settings > Advanced.

Custom CSS

Inject CSS to override any style on the page. The status page HTML uses semantic class names that remain stable across updates:

.sp-header {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.sp-component-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sp-uptime-bar--good {
  background-color: #2da770;
}

Custom head HTML

Add arbitrary HTML to the <head> of your status page. Common uses:

  • Analytics scripts (Google Analytics, Plausible, etc.)
  • Custom fonts via <link> tags
  • Additional meta tags for SEO
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
  .sp-component-status { font-family: 'JetBrains Mono', monospace; }
</style>

Dark mode

Status pages support both light and dark themes. Under Settings > Appearance:

  • Light only — Always displays in light mode.
  • Dark only — Always displays in dark mode.
  • Auto — Respects the visitor’s system preference.
  • Toggle — Shows a light/dark toggle in the header for visitors to choose.

Live preview

Every setting change shows a live preview on the right side of the settings panel. The preview updates in real-time as you adjust values, so you can see exactly how your status page will look before publishing.

Next steps