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 one of the fastest/easiest: using your knowledge base's existing Div styles.

Pick a style

If you're not familiar with Div styles in KnowledgeOwl, open an article in edit mode and be sure you're in the Modern editor (the link above the editor window should say Switch Editor: Legacy).

Click on the little magic wand near the top of the editor. This will show you a dropdown with the built-in div styles available:
Built-in Div styles

For the fastest/easiest banner, you can leverage these styles. Pick one you'd like to use. In this example, I'll use Alert Warning.

Next, you'll need to create a div on your homepage that uses that style.

Create the div

Go to Settings > Style

Below the preview pane, click on Custom HTML and then select Home Page from the dropdown. 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.

For our standard layout, customers generally want to put an announcement banner like this between the search bar and the category list, as we do here with our Getting Started Guide:

To add the banner here, look for a section called  <div class="hg-article-body">:

Find the Home Page hg-article-body div

We'll put our banner immediately after that, before the template for the homepage body.

For the code, let's use this:

<div class="alert alert-warning text-center">Read our latest <a href="/help/covid-19">COVID-19 Updates</a>.</div>

Sample code inserted into Home Page Custom HTML

Let's walk through this a bit:

  • <div class="alert alert-warning text-center"> is setting up the div overall. The alert and alert-warning classes pull the built-in div styles. I used the Alert Warning, but you can adjust that text to match the alert you pulled from the editor:
    • <div class="alert alert-danger text-center">: Uses the "Alert Danger" style from the div dropdown; red background by default.
    • <div class="well text-center">: Uses the "Well" style from the div dropdown; grey background by default.
    • <div class="alert alert-info text-center">: Uses the "Alert Info" style from the div dropdown; blue background by default.
    • <div class="alert alert-success text-center">: Uses the "Alert Success" style from the div dropdown; green background by default.
  • By default, these divs have left-justified text. I wanted mine centered, so I added "text-center" to the classes above. You don't have to include this.
  • Read our latest <a href="/help/covid-19">COVID-19 Updates</a>.</div>: This sets up the text that's displayed and a hyperlink to direct people to. Here, I am directing folks to a page in my knowledge base (so I only need a relative URL to "/help/covid-19"), but you could use a link to any resource you'd like. The portion that comes between the <a> and the </a> tags is the hyperlink text.

Here's what the code above actually looks like live:

Read our latest COVID-19 Updates.

Alternatives

You can also design your own div rather than using the default styles of the call-outs, by creating a div and specifying 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.

Note: for simplicity's sake, I used in-line styles in HTML here. You can always use Custom CSS and classes; I was just trying to keep this more obvious for less technical folks.