CSS and Javascript snippets for customizations

Over the years we've seen a pattern in the types of customizations people want to make to their status page. We wanted put together a resource that had the CSS or Javascript snippet required to make these changes happen.

If you're on the Startup plan (or otherwise only have access to Custom CSS), some of the customizations won't be possible as they require the use of Javascript (which can be used via the Custom HTML fields).

Changing the amount of history you show

Show fewer days of history on the main status page

If you are on the Startup Plan, you can show fewer days of history by hiding days after a given number.

Here's the CSS.

If you are on the Business Plan, you can show fewer days of history by removing days after a given number from the page.

Here's the JS.

If you are on the Startup Plan, hide the link that takes users to the "/history" page.

Here's the CSS.

If you are on the Business Plan, you can completely remove the link that takes users to the "/history" page.

Here's the JS.

Changing the subscribe button

Remove the subscribe button

Some people want to remove the ability for any end-user to subscribe to notifications.

If you are on the Startup Plan, you can hide the subscribe button.

Here's the CSS.

If you are on the Business Plan, you can completely remove the subscribe button.

Here's the JS.

Changing the components section

Use the two-column layout

You can switch to the two-column layout that uses icons instead of text descriptions for the component statuses.

Note: the 2-column layout can cause issues with how Component Groups are rendered. If you're using Component Groups, we suggest using an even number of groups, and placing them side-by-side.

Here's the JS.

Change the names of component statuses

You can customize the names of the different component statuses. For example, you can change "Operational" to "Everything's Great!"

Here's the JS.

Move the components section above the active incidents section

Insert this snippet into the Custom Footer HTML field:

1 2 3 4 <script> $('.components-section').insertBefore('.unresolved- incidents'); </script>

Other changes

Change the 'About This Page' heading to something else

In the Custom HTML Footer section, add the following:

1 2 3 <script> $('.text-section').find('h4').text('Text goes here') </script>

Hide all completed Scheduled Maintenance from "Past Incidents" list

In the Custom HTML Footer section, add the following jquery:

1 2 3 $('.incidents-list').find('.impact- maintenance').parent().replaceWith($('<p class="color- secondary">No incidents reported.</p>'));

Change the top level status banner (default is All Systems Operational)

Swap out the ‘Replacement text’ with the text you want to show instead of All Systems Operational:

1 2 3 4 5 <script type="text/javascript"> $( document ).ready(function() { $("span.status:contains('All Systems Operational')").text('Replacement text'); }); </script>

Additional Help