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

[John M · Accepted solution]

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> 

 to

<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]

Thanks @Rikku Bolske for adding your solution!