Need to change the page layout completly

[Chaithra D]

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?

[Nick Coates]

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

[Chaithra D]

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

[Sriram PH]

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