Find the answers you need

Support Database

How can I brand the status page?

You can easily brand our default status page (https://www.stackstatus.com/) and make it your own. You'll first need to choose which domain and subdomain you'd like the custom status page to appear on, you're then free to brand the status page with your own custom CSS.

Setting your status page domain

  • Head to Reseller Customisation.
  • Locate the Status Page Domain section.
  • Choose your status page domain and a subdomain.

Status page domain

Please note, we'd highly recommend using a new domain name for your status page which you can route through an external DNS such as Cloudflare by pointing the nameservers to them. This ensures that your status page is redundant from 20i's own DNS. So if we experience internal issues, this ensures your status page will remain live.

As an example, you could choose something like example-status.com as the domain name, and then type www as the subdomain.


1. Add the DNS records

You need to ensure that you've added the correct CNAME so your custom status page works. This simply needs to be a CNAME from your custom status hostname to stackstatus.com.

Custom DNS at Cloudflare

Log in to your Cloudflare account and select DNS, then add the CNAME record as show below, or for your chosen hostname.

DNS management at Cloudflare

Custom DNS at 20i

Head to Manage Hosting > Options > Edit > DNS, then add the CNAME record as shown below, or for your chosen hostname.

DNS management at 20i

You should then be able to head to your custom status hostname (i.e., www.example-status.com), which will then display your status page. You may need to wait a bit longer for DNS to propagate if you can't see this straight away. 

You can then brand your status page!


2. Branding your custom status page

To add custom CSS to your status page, head to StackCP Theme and locate the Status Page section. You'll see you have the options to make changes to the header, footer, and the CSS. For example, let's say you'd like to make changes to the “All systems operational” alert, you could add the following CSS with your own defined colours. 

.alert-success {

  color: #ffffff;

  background-color: #3490dc;

  border-color: #6cb2eb;

}

Your changes will then be reflected on your custom status domain.