Custom Code Examples

Fully customize your status page by using custom HTML, CSS and JavaScript.

Custom code can be used to change the look and feel of your status page, from minor changes such as fonts and colors, to major changes such as creating an entirely new layout.

Custom code can also be used to add functionality such as analytics tools or chat widgets.

Below are some code snippets to get you started using custom code on your status page.

Remove a section from your status page

#statusio_external_services {
  display: none;
}

Modify the subscribe button (shape and color)

#subscribe_button{
  margin-top: 16px;
  margin-right: 10px;
  border-radius: 18px;
  color:#BA343D;
}

Change the font

@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700');

body{
  font-family: 'Muli', sans-serif;
  -webkit-font-smoothing: antialiased;
}

Add a background image

body {
  background:url(https://www.example.com/background.jpg) repeat;
}

Modify the shape of the infrastructure container labels

.label {
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  border-radius: 5px;
  font-weight: normal;
}

Add Google Translate

<div id="google_translate_element">
</div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>