Custom CSS

Use style sheets to alter the appearance of your status page. Every element of the page can be customized using CSS.

Add your custom CSS from the Design tab in the Dashboard.

Warning: Due to the nature of web design, please test your CSS to ensure compatibility. 

Example CSS structure:

body {
  color: #dbd9d9;
  background-color: #2b2b2b;
}
a:link {
  color: #dbd9d9;
}
a:visited {
  color: #dbd9d9;
}
a:hover {
  color: #dbd9d9;
}
a:active {
  color: #dbd9d9;
}
hr { 
  display: block; height: 1px;
  border: 0; border-top: 1px solid #414142;
  margin: 1em 0; padding: 0;
}
.top_bar {
  background-color: #27AE60;
  color: #fff;
}
.text {
  color: #dbd9d9;
}
.section_no_border {
  background-color: #2b2b2b;
}
.section_border_0 {
  background-color: #2b2b2b;
  border: 0px solid #2b2b2b;
}
.section_border_1 {
  background-color: #2b2b2b;
  border: 1px solid #414142;
}
.status_td {
  color: #dbd9d9;
  background-color: #2b2b2b;
}
.external_service {
  font-size: 15px;
  color: #dbd9d9;
}