Using H5 and H6 for custom formatting

If you're not using H5 and H6 headings in your documentation, you can use some custom styles to take advantage of that default formatting for other purposes. Users have found this handy for tips, warnings or a fun way to pull out certain text without using the Div Styles.

You will not be able to see these changes in the editor. You will only be able to see them from the Preview or Live Link. 

Setup

Before you begin: you might want some sense of what kind of style you'd like to create.

To add the styles:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Add custom CSS for either .hg-article-body h5 or .hg-article-body h6 depending on which header you want to use.
  4. You can also use the :before pseudoclass to insert formatting or icons before the heading.
  5. Save your changes.
  6. View an article with the heading and you'll be able to see your formatting applied!

For example, here's some sample CSS that will format our H5:

 And here's some additional CSS that will insert the lightbulb icon (Unicode value f0eb) in front of our heading text:

Put these together and here's what they look like:

Now whenever someone selects the Heading 5 and adds text, this will be the treatment that's used! The uses are fairly endless.

And if you want to use our sample as some base CSS, here's the full code:

/* Format h5 as purple call-out */
.hg-article-body h5 {
  border: 2px solid #2c0e66; /* Set border width, style, and color */
  border-radius: 5px; /* Lightly curve corners */
  background-color: #cbb8ef; /* Set background color for header area */
  color: #2c0e66; /* Set font color for header */
  font-size: 16px; /* Set font-size */
  padding: 1em; /* Add padding in all directions to add some space */
  text-align: center; /* Center text */
}

/* Add lightbulb icon before h5 text, add a little padding */
.hg-article-body h5:before {
  font-family:'FontAwesome';
  content: "\f0eb";
  font-weight: normal;
  padding-right: 0.5em;
}