You're on your way to the next level! Join the Kudos program to earn points and save your progress.
Level 1: Seed
25 / 150 points
Next: Root
1 badge earned
Challenges come and go, but your rewards stay with you. Do more to earn more!
What goes around comes around! Share the love by gifting kudos to your peers.
Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!
Join now to unlock these features and more
The Atlassian Community can help you and your team get more value out of Atlassian products and practices.
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.
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.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Found this article which points to code, but no customization:
https://edenhare.medium.com/using-atlassian-statuspage-and-aws-cloudwatch-2d1ecc2b4d68
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.