nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customize incident page

radoslaw.rymaszewski

Hello,

I would like to know how to customize incident page using our own CSS.

We are using custom CSS to customize main page and history page, but when we try to customize incident page our styles are not working.

Moreover I'm not able to locate definded custom styles which were added "Status Page Customize"

Could you advice what to do?

Regards,

Radek

Accepted answers

John M_2hpypf

Hi @radoslaw.rymaszewski ,

You can target CSS selectors to customize the individual incident pages the same way you can with the main page and history page.

For example, you can target the button on the incident pages with this selector:

page.flat-button.subscribe-button {
background-color: purple }

Any and all defined styles you've added will show up in the Custom CSS editor which any admin user can access by going to:

Your page >> customize page and emails >> click on the "Custom HTML and CSS" button

All comments

John M_2hpypf

Hi @radoslaw.rymaszewski ,

You can target CSS selectors to customize the individual incident pages the same way you can with the main page and history page.

For example, you can target the button on the incident pages with this selector:

page.flat-button.subscribe-button {
background-color: purple }

Any and all defined styles you've added will show up in the Custom CSS editor which any admin user can access by going to:

Your page >> customize page and emails >> click on the "Custom HTML and CSS" button

Rikku Bolske

It seems that your problem is that the preview iframe is not representing your custom CSS. It happens because when you navigate to an incident page within the iframe, the staged styling get ignored.

It's unfortunate that the "Select page:" just above the iframe does not include any incident view at all. However, you can workaround it by using your browser DevTools and manually overwriting page path with the one of your choice, while keeping the query-parameters.

For instance, change:

<iframe id="preview-iframe" https://mycompany.statuspage.io/history?staging=true&timestamp=123456789&jquery=undefined" data-js-hook="preview-iframe" style="height: 1057px;"></iframe>

<iframe id="preview-iframe" https://mycompany.statuspage.io/incidents/a1b2c3d4e5f6?staging=true&timestamp=123456789&jquery=undefined" data-js-hook="preview-iframe" style="height: 1057px;"></iframe>

Note that you have to do this procedure for every time you made changes that you want to preview.

It's not ideal, but seems to work for now. Hope it helps!

John M_2hpypf

Thanks @Rikku Bolske for adding your solution!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

statuspage