Design recipes

Design recipes to help you customize your status page easily.

Paste one of the following "recipes" into your status page's "Custom CSS" Design setting field to implement a customization.

Hide the past incidents section and link

.past-incidents, .previous-incidents { display: none !important }

Hide the uptime percentage from your Uptime Graphs

.uptime { display: none }

Auto-select "Select services" Checkbox and Hide "All" in the Subscription Modal

This recipe automatically selects the "Select services" checkbox and hides the "All" option in the subscription modal. Ideal for when you want to make sure your customers select the specific status page services they should get notifications about.

JavaScript Snippet: This JavaScript code automatically selects the "Select services" checkbox when the subscription modal is opened. Add this to the Status Page Settings section:

document.addEventListener("sp:subscribeModalOpened", function() {
  document.querySelectorAll('[name="subscription[filter]"][value="services"]').forEach(checkbox => {
    checkbox.checked = true;
  });
});

CSS Snippet: This CSS code hides the "All" option in the subscription modal. Add this to the Status Page Design section:

.filter-toggle label:first-child { 
  display: none; 
}