Customizations Cookbook

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.

Show fewer months on the "/history" page

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

Here's the CSS.

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

Here's the JS.

Move up the start date on the "/history" page

If you created an account but didn't actually start using it until several months later, your "/history" page will have a few months that just say "No incidents reported for this month."

If you are on the Startup Plan, you can chop off the last N months of history by hiding them.

Here's the CSS.

If you are on the Business Plan, you can chop off the last N months of history by removing them from the page.

Here's the JS.

Remove the link to the "/history" page

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.

Changes To 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.

Changes To 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.

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:

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

<script>
$('.text-section').find('h4').text('Text goes here')
</script>
Hide all completed sScheduled Maintenance from "Past Incidents" list

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

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