CSS and Javascript snippets for customizations | Statuspage

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 showShow fewer days of history on the main status pageIf 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.Remove the link to the "/history" pageIf 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 buttonRemove the subscribe buttonSome 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 sectionUse the two-column layoutYou 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 statusesYou 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 sectionInsert this snippet into the Custom Footer HTML field: $('.components-section').insertBefore('.unresolved- incidents'); Other changesChange the 'About This Page' heading to something elseIn the Custom HTML Footer section, add the following: $('.text-section').find('h4').text('Text goes here') Hide all completed Scheduled Maintenance from "Past Incidents" listIn the Custom HTML Footer section, add the following jquery:$('.incidents-list').find('.impact- maintenance').parent().replaceWith($(' No incidents reported.

'));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: $( document ).ready(function() { $("span.status:contains('All Systems Operational')").text('Replacement text'); });