Add a custom banner using built-in div styles

It can be helpful to add a banner or announcement to your homepage to draw attention to outages, changes in policy/procedure, or to highlight certain content. There are a number of ways to do this, but here we'll use a fairly straightforward approach: using your knowledge base's existing Div styles.

The fastest way to create this banner and get it looking exactly how you want is to use our built-in div styles in the article editor, create the banner exactly how you'd like, and then copy that raw HTML and paste it straight into your theme.

If that sounds intimidating, don't worry, let's walk through it step by step!

First things first: let's use the article editor to create and style the div we want to use.

  1. Open an article in edit mode (we find it easier to create a new article for this so it's empty of any other code, but do whatever you feel comfortable with!)
  2. In the editor controls, click the magic wand next to the text formatting controls:Built-in Div styles
  3. Select the div style you want.
  4. With your div added to the editor, type whatever text and use the regular editor controls to insert hyperlinks and other formatting.
  5. Then, click the </> button in the editor to switch to Code View.
  6. Copy the HTML code for the div you created. For example, mine looks a bit like this:
<div class="alert alert-success">Read our latest <a href="/help/release-notes">Release Notes</a>.</div>

Congratulations, you now have a fully-formed div in HTML format! Now we just need to add this into the homepage itself.

For this part:

  1. Go to Settings > Style
  2. Below the preview pane, be sure Custom HTML is selected.
  3. In the Custom HTML dropdown, select Home Page.
  4. This page is going to look a bit different depending on how you've customized your knowledge base, so you may need to play with positioning a bit to get the look you want.
  5. For our standard layout, most often we see people put an announcement banner below the search bar and above the category panels, so that's what we'll do in this example.
  6. To add the banner here, look for a section called  <div class="hg-article-body">:
    Find the Home Page hg-article-body div 
  7. We'll put our banner immediately after that, before the template for the icon-cats and homepage body.
  8. Add a new line between the hg-article-body div and the icon-cats template (or the homepage body template if that comes first in your Home Page HTML) and paste that code onto that line. So your Custom HTML should now look like a little like this (though your div is probably a bit different!):
  9. You can Preview your changes to be sure they look good. If you're comfortable with HTML, you can make tweaks here, or head back to the article editor to re-create your div.
  10. Once you like the look of it, be sure to Save your changes.

Alternatives

For those of you with more HTML skills, you can also design your own div rather than using the default styles of the call-outs. Create a div and specify a background color, padding, etc. You can include a graphic or icon, as well. So, for example, this code:

Sample div constructed from scratch

Produces this:

Read our latest COVID-19 Updates.

For simplicity's sake, we used in-line styles in the HTML example here. You can always use Custom CSS and classes.