Migrate Statuspage to use Atlassian accounts
Learn everything you need to know to migrate you and your team to Atlassian accounts.
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.
If you are on the Business Plan, you can show fewer days of history by removing days after a given number from the page.
Remove the link to the "/history" page
If you are on the Startup Plan, hide the link that takes users to the "/history" page.
If you are on the Business Plan, you can completely remove the link that takes users to the "/history" page.
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.
If you are on the Business Plan, you can completely remove the subscribe button.
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.
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!"
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>Was this helpful?
Still need help?
The Atlassian Community is here for you.