
- Start by opening your dashboards in a separate browser tab.
- Generate some boilerplate CSS code by hitting the Generate boilerplate button.
- Open the hints tab so see all the classes available for you to target.
- Make some edits, hit Save dashboard and reload your dashboard.
Custom CSS is only available on certain plans. For more details, see our Pricing page.
CSS Classes
The following table lists the CSS classes available for customizing your dashboard appearance:Name | Class name |
---|---|
Dashboard header | .header |
Logo | .logo |
Status summary | .status-summary |
Status passing | .status-summary--passing |
Status failing | .status-summary--failing |
Main content | .main |
Incidents summary | .incidents-summary |
Check | .check |
Check result | .check__result |
Passing check | .check__result--passing |
Failing check | .check__result--failure |
Degraded check | .check__result--degraded |
Check metrics | .check__metrics |
Check list | .check-list |
Empty check list | .check-list--empty |
Time range | .period |
Active time range | .period--active |
Time range selector | .period-selector |
Pagination | .pagination |
Incident | .incident |
Incidents page | .incidents-page |
Incidents detail page | .incidents-detail-page |
Incident list | .incident-list |
Incident list date | .incident-list__date |
Active incident list | .active-incident-list |
Active incident card | .active-incident |
Major incident | .active-incident--major |
Minor incident | .active-incident--minor |
Incident header | .active-incident__header |
Metric | .metric |
Metric improved | .metric--improved |
Metric worsened | .metric--worsened |
Metric badge | .metric__badge |
Dashboard footer | .footer |
Error 500 | .error-500 |
Error 400 | .error-400 |
Login background | .login-background |
Login box | .login-box |
Login input | .login-input |
Login button | .login-button |
Login social button | .login-social-button |
Logout button | .logout-button |
Logout icon | .logout-button__icon |
Styling examples
We created some examples of how you can style your dashboard using the brand colors from well known brands. This should help you explore the possibilities you have available.Amazon Web Services style
In this example we aim to replicate the brand style of Amazon Web Services (AWS).
- We set a dark
background
for the header with lightcolor
text. We also tweak the status and incident summary. - We set the link
color
to the orange brand color. - We remove the
border-radius
on the check cards and add abox-shadow
.
Linear style
In this example we aim to replicate the dark style of Linear.
- We set a dark
background
for both the header and main sections. - We set a lighter
color
for a range of text elements to contract with the dark background - We set a new color pattern for the big red incident alert at the top of the page.
- We tweak the brand “red” and “green” colors to better match the palette.
Hello Kitty style
“Why so serious?” you might ask. No reason, you can go crazy with styling, adding repeating backgrounds and images.