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

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,457,112
Community Members
 
Community Events
176
Community Groups

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

Atlassian Community Events