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:
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
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>
Let's walk through this a bit:
<div class="alert alert-warning text-center">is setting up the div overall. The
alert-warningclasses 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:
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:
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.