Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How do we completely customize the layout of our statuspage?

Hi,

So I have played around with the customize html/css/javascript section on the statuspage UI and have read through most of the guides and questions on here.

https://support.atlassian.com/statuspage/docs/audience-specific-page-example/

The examples in the documentation aren't giving me enough info to get started on the component section of the page. Are there any code examples out there on how to put our components into different sections, regions etc? Good examples of this are the twilio and digital ocean statuspages. 

Also there is this blog post by Atlassian showing that it is possible
https://www.atlassian.com/blog/statuspage/statuspage-examples-25-status-pages-showcasing-excellent-customization-design-incident-communication

1 answer

0 votes

Hi @Kurt King  -

Thanks for reaching out! We don't have any examples of these type of layouts from a code perspective since we recommend our customers have a front end developer on their side handle heavy customizations.

 

One thing I will say is you'll need to leverage CSS border and padding properties to accomplish the grid layout like you see on Twilio and Digital Ocean's Statuspage. You or your front end developer will need to add a few div class containers in the "Custom Header HTML" section we provide to change your elements to the preferred grid layout. Once you add the div class containers, you can use the "Custom CSS" section to add the border and padding properties for your div classes.

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Statuspage

New feature: Slack notifications for Statuspage

We're excited to announce the release of a long-requested feature on Statuspage. Now visitors to your status page can subscribe to get notified in Slack when you report an incident or maintenance. Th...

1,510 views 2 15
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you