Knowledge Base

Customization

With a Hund status page, minimal effort is needed to design your status page to match your company's brand. This guide is written for designers and developers.

Note: Team members that are invited for the purpose of customizing a status page must be made an admin to access the Look and Feel section of your dashboard.

Editing

The Look and Feel section of your dashboard provides you with all of the tools needed to edit custom styles and custom HTML while displaying a live preview of your changes.

Expandable Editors

Expand the current editor to fill half of the screen by pressing F11.

Staging

Changes made are not public until published; only admin members can view staged changes.

Browser Support

Upon publishing, generated CSS will be processed by an auto-prefixer to support >99% of all used browsers (inc. IE 9+, iOS 7.1+, and Android 4.4+). Because we handle prefixing, this means you do not need to concern yourself with browser-specific properties.

Responsive Design

For responsive design, the preview's viewport can be changed on-the-fly.

Preprocessors

Preprocessors are available for both CSS and HTML. When using a preprocessor, linters provide immediate feedback for syntax errors.

Styling

As mentioned, the structure of Hund status pages is designed for extendibility. We have focused on making a basic layout that can easily be changed. Our default status page CSS styling (excluding the dashboard) meets the highest Web Content Accessibility Guidelines 2.0 conformance level, level AAA.

We recommend inspecting pages with your browser's developer tools to understand how sections are structured.

Status Page Elements

For brevity sake, we use SCSS in the following examples of how you might style main blocks.

Status Colors

Across your status page are many elements that are colored by operational status classes. The following classes are used to indicate states:

  • .operational: Typically green, indicates good state
  • .degraded: Typically yellow/orange, indicates abnormal state
  • .outage: Typically red, indicates bad state
  • .pending: Typically gray, indicates unknown state

We do not recommend applying global !important styles for these states. Instead, we suggest styling these with regard to the containing element. Using global styles can break certain elements and make them unreadable.

Elements that use state colors: State bars, groups, and items

Example SCSS element styling:

$states: (
  operational: $color-operational,
  degraded: $color-degraded,
  outage: $color-outage,
  pending: $color-pending
);

.state-element {
  @each $state, $color in $states {
    &.#{$state} {
      color: $color;
    }
  }
}
Brand Header

Changing Header HTML may initially seem to break your status page's header causing navigation buttons to be misaligned, but this is intentional. This customization replaces your status page's logo so that you can entirely customize the header to match your brand's needs.

We suggest a wrapper element (e.g. .brand-header) for fine-tuning positioning. Header navigation can be positioned like so:

.brand-header {
  position: relative;
  height: 48px;

  .header-nav {
    position: absolute;
    right: 0;
  }
}

Note that .header-nav is used as a drop-down navigation on mobile and .toggle-nav-link is used to toggle its positioning.

State Bar

The state bar shows the current overall operational status on the homepage, as well as component statuses on component pages.

Example SCSS:

@mixin state-bar($color) {
  background: linear-gradient($color, darken($color, 5%));
  border-radius: 5px;
  color: $white;
  font-weight: 700;
}

.state-bar {
  @each $state, $color in $states {
    &.#{$state} {
      @include state-bar($color);
    }
  }
}
Groups

Groups are component containers which display an operational state.

Example SCSS:

This example replaces group operational states with a status circle and improves group headers.

@mixin state-circle($color) {
  background-color: lighten($color, 20%);
  border-top-color: lighten($color, 30%);
  border-bottom-color: lighten($color, 10%);
}

.container > section > header {
  background: linear-gradient(darken($white, 3%), darken($white, 5%));

  h2 {
    font-weight: 600;
  }

  .state {
    visibility: hidden;

    &::after {
      content: " ";
      background: transparent;
      border-radius: 0.4em;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      display: inline-block;
      height: 0.8em;
      width: 0.8em;
      line-height: 51px;
      visibility: visible;
    }

    @each $state, $color in $states {
      &.#{$state}::after {
        @include state-circle($color);
      }
    }
  }
}
Items

Items are elements used for history and issues.

Example SCSS:

.item .state {
  @each $state, $color in $states {
    &.#{$state} {
      color: $color;
    }
  }
}
Metrics

You can override the default colors used when rendering metric graphs by adding a script to the footer of your status page. This script should set a metrics object on the window, with the following properties:

window.metrics = {
  styles: {
    colors: ["#00C853", "#FF8700", "#E3005C"],
    drop_line_color: "#007E33"
  }
};

The colors array sets the colors that graphs will use for data series. The drop_line_color changes the color for the x-axis dropline shown beneath points on line graphs (defaults to colors[0]).

Analytics

To log analytics on your status page, we recommend putting your vendor's script in your footer.

Google Analytics

Hund uses Google Analytics, so you only need to add a script which sets your tracking ID:

ga("create", "UA-XXXXX-Z", "auto", "statusPage");