Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

How do we completely customize the layout of our statuspage?

Kurt King
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 12, 2020

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

2 answers

0 votes
94449 72835
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 14, 2023

 .

0 votes
Mark Campbell-Vincent
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 16, 2021

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.

Mallikarjun Reddy
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 11, 2022

landed here in search of examples on how to customize. Having at least one end-to-end example on how customizations can be done is helpful. Maybe a video tutorial.

Like Amanda Koster likes this
Amanda Koster December 15, 2022

I agree, a few static code examples would be extremely helpful.

As a front end dev, I'm finding squeezing all my customizations into the very small css/html/js header area is not a great dev experience. It's counter intuitive and tedious.

Amanda Koster December 15, 2022

Found this article which points to code, but no customization:
https://edenhare.medium.com/using-atlassian-statuspage-and-aws-cloudwatch-2d1ecc2b4d68

Amanda Koster December 15, 2022

How can we customize the components (vs header and footer)?

Dirk De Mal March 17, 2023

Hi all,

Just a question... Why isn't Atlassian developing a customisable front tool for their Statuspage. That would make a huge difference for everyone.

Just a thought.

Kind regards,

Dirk

94449 72835
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 14, 2023

is there any update on this!!! I see some sites have customized it, it would be great if you could offer a sample as a starting point.   

Like Amal P likes this

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events