Add a custom banner with 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.

Sample announcement div for our release notes

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!

Step 1: Create your div

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, select the magic wand next to the text formatting controls to view Div Style:
   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, select the </> Code View button in the editor to switch to Code View.
   The Code View button
6. Copy the HTML code for the div you created. For example, mine looks a bit like this:

   <div class="alert alert-success">
       <p><strong>Stay informed</strong>
           <br>Read our latest <a href="/help/release-notes">release notes</a>!</p>
   </div>

Step 2: Add to your homepage

Congratulations, you now have a fully-formed div in HTML format! Now we'll add this into the homepage itself:

1. Go to Settings > Style. 
2. Below the preview pane, be sure Custom HTML is selected.
3. In the Custom HTML dropdown, select Homepage.
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 the  <div class="hg-article-body>.
7. 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 Homepage HTML).
8. Paste your HTML onto that line.
9. So the Custom HTML should now look a little like this, with the new div at rows 7-10 (though your div is probably a bit different!):

   <div class="ko-homepage-top">
       <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
       [template("large-search")]
   </div>
   <div class="hg-article">
       <div class="hg-article-body">
           <div class="alert alert-success">
                <p><strong>Stay informed</strong>
                    <br>Read our latest <a href="/help/release-notes">release notes</a>!</p>
           </div>
           <div>[template("icon-cats,max=8,col=4,desc=0")]</div>
           <div>[homepage("body")]</div>
           <div class="homepage-widgets row">
               <div class="col-md-4 col-sm-6"><h3></h3>[template("pop-articles")]</div>
               <div class="col-md-4 col-sm-6"><h3></h3>[template("new-articles")]</div>
               <div class="col-md-4 col-sm-6"><h3></h3>[template("up-articles")]</div>
           </div>
       </div>
   </div>

10. 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.
11. Once you like the look of it, be sure to Save your changes.

Alternatives

If you have some 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:

<div style="background-color: #a5edef; color: #7f0707; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; text-align: center;">
    <img src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/5e5d6e4c8e121c80424f245f/n/lightbulb-linus200px.png" style="max-height: 50px;" class="fr-fic fr-dii">Read our latest <a href="/help/covid-19">COVID-19 Updates</a>.
</div>

Produces this:

Read our latest COVID-19 Updates.