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

Need to change the page layout completly

Screenshot 2020-07-14 at 12.25.16 PM.png

I need to design my page like this, can I get any help in how to customize the CSS, HTML, and JS files. How to replace the default code?

1 comment

Hi @Chaithra D welcome to the Atlassian Community. Nick from the Broadcom team here, long-term Statuspage customer.

You will need to be on a plan that supports Customer HTML/CSS/JS. Free and Hobby do not include this. Once you are on a plan, you will have the option under Your Page -> Customize page and emails -> Customize HTML & CSS.

Thanks,
Nick

Hi, @Nick Coates  thank you for the reply. We have an option to customize the HTML header, footer, and CSS. We are not able to see the body section.  Is it necessary to have body section to make necessary JS or jQuery changes or can it be done in the header section itself?  FYI - https://kb.status.io/design/custom-html/ this is where we found body section and its missing here. 

 

Also, is it possible to point us to an example code where customization is done currently which matches our requirement?

 

Thanks,

Chaithra D

Hi @Chaithra D ,

Here are few things which might be helpful:

First of all, we don't have access to body content of the page, So you need to play around with the custom header and footer provided. 


In my case I have used only Custom header portion for my changes.

You can hide the default body content by writing JQuery functions in your script tag of Custom header. 
ex:- 

$(function() {
$('.page-status').hide();
});
$(function() {
$('.components-section').hide();
});
$(function() {
$('.unresolved-incidents').insertBefore('#custom-table');
});

In the above code snippet I have hidden default table(components-section).

You are flexible to write your own HTML, CSS and JS code. 
In order to get a table format, you can use the HTML table tag.

<table>

  <tr>

    <th>Service</th>

    <th>India</th>

    <th>USA</th>

  </tr>

  <tr>

    <td>Component 1 </td>

    <td><span class="dot-green"></span></td>

    <td><span class="dot-red"></span></td>

  </tr>

  <tr>

    <td>Component 2</td>

    <td><span class="dot-red"></span></td>

    <td><span class="dot-yellow"></span></td>

  </tr>

 </table>

Once you are familiar with the Custom header and CSS parts, then you can make respective API calls in the same script portion of the custom header part. 

** Since my requirement was just an exploring of Status page, I made API calls using Ajax, NOT sure if we can make API calls. ** 


You are flexible to use additional libraries for getting the API response in desired format. In my case I have used lodash to customise my API response so that it can fits the table properly.

In crisp, this is how your custom header looks like:
Correct me, if you feel any changes to be done.

<div class="layout-content">
<div class='container'>
<script>
// API calls(using AJAX), Lodash import, script for hiding default content comes here
</script>

<!--Your code for heading, table and other stuff -->
<div>
<table id="custom-table"></table>
</div>
</div>
</div>
<script>
// Here you can use for computing the API response and appending them to your table.
$('#custom-table').append('tableContents');
</script>

Feel free to reach out, if you have any more questions.

Cheers,
Sriram P H

 

Comment

Log in or Sign up to comment
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,405 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