For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

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

status page custom design

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:

status page theme options

System status colors

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

status page system status colors settings

Custom CSS

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

status page custom CSS

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 HTML

Template tags

Use these special tags inside your custom header/footer HTML to control where Statuspal inserts built-in elements:

Tag
Description

{{subscribe_button}}

Inserts the subscribe button in your chosen position in the header.

{{lang_selector}}

Inserts the language selector dropdown (only appears if multiple languages are configured).

If you omit these tags, the subscribe button and language selector won't appear on your status page. You can combine custom HTML with custom CSS and head code for full control over the layout.

Last updated