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

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

Statuspage custom component grid layout by group (table)

I am wondering how I could create a grid layout for my components grouped by region where each group is a region and has the same components for each region/group. I am looking for something like this:

https://status.mypurecloud.com/

I am going to say I am no css/js/html expert, although I do understand it at a level enough to write/modify code, the way to modify with custom css/html/js provided in the status page is utterly and completely lost on me. I don't even know where to begin. I have looked at the following (only 2 questions with similar answer, the snippets page is of little help either - https://bitbucket.org/atlassian/statuspage-sample-customizations/src/master/2_column_component_js/2_column_component.html

 

Similar topics -

https://community.atlassian.com/t5/Statuspage-questions/Customise-Status-Page-using-HTML-and-CSS/qaq-p/1480457

https://community.atlassian.com/t5/Statuspage-discussions/Need-to-change-the-page-layout-completly/td-p/1431225

 

Would really appreciate a way to get started with how to create this grid view of components dynamically.

1 answer

0 votes

Hi @alexander_fichel -

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. 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.

 

Hope this helps.

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...

902 views 0 12
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