StatusPal
StatusPal.ioBlog
Documentation
Documentation
  • Introduction
  • Get Started
    • Key concepts
    • Step 1 - Configure services
    • Step 2 - Add your team
    • Step 3 - Personalize design
    • Step 4 - Enable notifications
    • Step 5 - Report an incident
  • Next Steps
  • FAQ
  • 1-Click Import
    • Atlassian Statuspage Importer
    • Status.io Importer (beta)
  • Platform
    • Services/components
      • Dependencies
    • Subscriptions & Notifications
      • Subscriptions
      • Notifications
      • Auto-maintenance notifications
      • Subscription Groups
      • Import email subscribers
      • Auto-subscribe to private status page
      • Custom email templates
        • Template examples
    • Incidents & Maintenance
      • Reporting an Incident
      • The Uptime Calendar Page
      • Custom Incident Types
      • Exporting your incidents
    • Information Notices
    • Private Status Page
      • Adding people to your status page
      • Access Groups/Audience Specific
    • Team Members
    • Status Page Settings & Design
      • Custom Domain
      • Advanced Settings
      • Design Customization
        • Design recipes
    • Multi-Language
    • Status Badge & Banner Widget
    • Integrations
      • Terraform
      • Datadog Metrics
      • Zoom Notifications
      • Google Analytics
      • Google Calendar
      • SendGrid Email Notifications
      • PagerDuty + Statuspal status page
      • Configure SSO for your status page with Okta
      • Configure SSO for your status page with Auth0
      • Configure your Mailgun Integration
      • Configure SMS Notifications (Twilio Integration)
      • Zabbix
      • Pingdom
      • Checkly
      • New Relic
      • Datadog
      • BetterUptime
  • Monitoring & automation
    • Out-of-the-box monitoring
    • Incident automation
    • Recurring maintenance
  • Security
    • Single Sign-On
      • Save your Recovery Codes
      • Configure Role provisioning from SAML attributes
      • Configure role provisioning for Okta
    • API Keys
Powered by GitBook
On this page
  • Basic fields
  • Theme options
  • System status colors
  • Custom CSS
  • Custom HTML
  1. Platform
  2. Status Page Settings & Design

Design Customization

Thanks to the live preview designer and custom CSS/HMTL, you can design your status page to fit your brand and any custom needs.

PreviousAdvanced SettingsNextDesign recipes

Last updated 1 year ago

Access your status page's Design settings by clicking on Status page > Design from the sidebar.

Our full-screen, live-preview-enabled designer tool allows you to make changes and see them take effect side by side in real-time, enabling you to quickly personalize your status page design to suit your needs.

Basic fields

Field
Description

Header logo text

The text displayed in your logo in the status page's header.

Public company name

You can override your company or project name displayed in your status page's footer.

Logo

Upload a logo to be used in the header.

Favicon

Upload a favicon.

Header background

Upload an image to be used as the background for the header.

Theme options

You can select from two themes currently:

  • Default: The theme is based on a standard top navigation bar.

  • Big logo: Display a larger logo as well as a bigger background image.

You can personalize a couple of colors based on the theme you select:

System status colors

You can also customize the colors used to communicate the different system statuses on your status page.

Custom CSS

If the above theme options are not enough, leverage the full power of CSS to customize every style of your status page.

Custom HTML

If customizing CSS doesn't cut it, it might be time to pull out the big guns. Configure custom HTML header and footer for your status page.

status page custom design
status page theme options
status page system status colors settings
status page custom CSS
status page custom HTML