Use custom CSS on a status page

You must set up a custom domain (e.g. status.companyname.com) in order to publish custom CSS.

Where Custom CSS Gets Inserted

Anything entered into the custom CSS field gets put into an external style sheet that will be included in the <head> of the document. This external stylesheet is inserted after the main stylesheet so that you can override styles as you see fit.

Check out our Customizations cookbook for helpful code snippets to customize your page!

Security headers such as X-Frame-Options are not allowed in status pages to enable cross-origin requests.

Notable Existing CSS Classes

There are several CSS classes defined by default that you'll want to be aware of

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 // defines the width of the content .container { width: 90%; max-width: 850px; } // the default font-size used on the page .font-regular { font-size:1rem; // 16px line-height:1.5rem; @media screen and (max-width: 650px) { font-size:.875rem; // 14px line-height:1.3125rem } } .font-large { font-weight:500; font-size:1.25rem; // 20px; line-height:1.875rem; @media screen and (max-width: 650px) { font-size:1.125rem; // 18px; line-height:1.6875rem; } @media screen and (max-width: 450px) { font-size:1rem; // 16px line-height:1.5rem; } } .font-largest { font-weight:500; font-size:1.75rem; // 28px; line-height:2.625rem; @media screen and (max-width: 650px) { font-size:1.375rem; // 22px; line-height:2.0625rem; } @media screen and (max-width: 450px) { font-size:1.125rem; // 18px; line-height:1.6875rem; } }

 

Additional Help