Homepage look and feel

Homepage Overview

Your knowledge base's homepage is the initial landing page that readers will see if they go to your default link. Usually, the homepage includes things like customer support contact information, announcements, or a description of what the knowledge base contains. You can also show a list of newest and most popular articles!

Why does my home page look different in the editor than it does live?

The WYSIWYG editor, much like when you are actually editing an article, will not pull in all of your styles as it is meant to assist in text formatting. We recommend saving and previewing your progress often by clicking on the homepage URL to make sure things are looking as they should be.

Can I style my home page separately from everything else?

Yes you can. You can use the CSS merge code for the Homepage class to target styles on only that page: .hg-home-page

How do I make changes to my homepage?

There are two places you can edit your homepage:

  1. The homepage template (Knowledge Base > Home Page)
    Sample homepage template
  2. The Custom HTML for the home page (Settings > Style, Custom HTML > Home Page)
    Sample homepage Custom HTML

In general, if you like the default layout with the category tiles and the widgets, but you just want to make a couple changes to it (such as removing one of the widgets or replacing it with some text of your own, etc.), edit the template directly. If you have a very specific design you're going for, remove everything from the template and edit the Custom HTML directly.

The template mergecode *must* be referenced in the Custom HTML for the Home Page, but for complete control over your homepage, you can save the template with nothing in it and code the entire homepage in HTML.

Change the background image on my homepage

The default knowledge base theme has a grey tweed background but it's easy enough to change! You can either replace it with a banner image or with colors.

Replace with colors

Go to Settings > Style and paste the below code in the Custom CSS field. 

.ko-homepage-top {
    background-color: #8bc34a; /* Adjust to use color of your choice */
    background-image: none;
}

Replace the background-color with a color of your choice.

Pro Tip: For a little extra pizzazz, consider using a color gradient:

.ko-homepage-top {
      background-image: linear-gradient(-90deg, red, yellow);
}

Replace with your own image

Go to Settings > Style and paste the below code in the Custom CSS field. 

.ko-homepage-top {
    background-image: url(/css/images/tweed.png);
}

Next, find a suitable image. This is the trickiest part. Here are some simple tips to help you find a good image.

  1. The image should have fairly large dimensions about 1500px x 300px (this are not strict dimensions as larger images can be adjusted in this space).
  2. The image file size should be relatively small. Ideally the image file size is in kilobites (KB) not megabites (MB) as large files will slow down your website.
  3. (Alternative) You might also choose a smaller image that would look nice as tiles in the background.

Once you've selected an image upload it to your KnowledgeOwl File Library and obtain the URL to your uploaded image

Once you've obtained your image URL go back to Settings > Style > Custom CSS replace the highlighted portion below with URL to your image. 

.ko-homepage-top {
    background-image: url(/css/images/tweed.png);
}

Before you save, remove the https: from the front of your URL. This will ensure that your images loads regardless of whether your site is secure or not.

.ko-homepage-top {
    background-image: url(//dyzz9obi78pm5.cloudfront.net/app/image/id/598f28df6e121c4f36ac0cdf/n/open-book-on-orange-low.jpg);
}

Is your image repeating?

If your image is smaller than the space provided it will repeat itself. 

To fix this, you have two options:

  1. Add background-size: cover to your CSS. This will stretch the image to make it fit the overall dimensions--but sometimes this will somewhat distort or cut off parts of the image, so take a good look at the results. Your resulting CSS should look like so:
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
    	background-size: cover;
    }
  2. If you don't like the look of background-size: cover, try adding background-size: 100% 100% to your CSS. This will try to stretch the image proportionately to fit the screen it's displayed on, which can be more elegant for lots of different devices and sometimes bypasses the off-center distortion of background-size: cover. Your resulting CSS should look like so:
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
    	background-size: 100% 100%;
    }

Remove the homepage title

By default, the title of your knowledge base will display above the search bar of your homepage.

Sometimes, your homepage banner image may already contain your company logo or knowledge base name. In these cases, you may want to remove the default homepage title completely.

To remove the homepage title, you need to delete one line of HTML from the Home Page styles.

  1. Go to Settings > Style > Custom HTML > Home Page.
  2. Delete the line that says "<h1 class="hg-article-title" >[homepage("title")]</h1>".
    Sample homepage Custom HTML with title line circled
  3. Click Save.
    Your custom HTML should now look something like this, and your title should be gone:
    Same code example, title removed

Change the color of the homepage title

By default, the color of the Homepage title is set to white as shown below:

To change it, to black for example, go to Settings > Style and paste the below code at the bottom of the Custom CSS field:

.ko-homepage-top .hg-article-title{
    color: #000000;
}

Replace the "#000000" part with the hex code of the color of your choice.

Article Widgets

KnowledgeOwl offers four article widgets that you can use in your knowledge base to help readers find new, updated, popular, and relevant content.

Popular Articles Widget

Our Popular Articles Widget allows you to display articles with the most traffic. This will increase your readers' engagement and the your ability to get them the most common answers they might need. Your home page is an excellent place to add this widget. Check out our documentation on the Popular Articles Widget to learn more. 

New Articles Widget

Our New Articles widget allows you to display articles that have the newest information. Your home page is a great spot to place this widget to help supply readers with the most up to date information! Check out our documentation on the New Articles Widget to learn more.

Updated Articles Widget

Our Updated Articles widget allows you to display articles that have recently updated content. This will increase your readers' engagement and your ability to get them the most up-to-date answers they need. Your home page is an excellent place to add this widget. Check out our documentation on the Updated Articles Widget to learn more. 

Related Articles Widget

Our Related Articles widget allows you to display articles that have content related to the current article the reader is reading. This will increase your readers' engagement and the your ability to get them the answers they need. Check out our documentation on the Related Articles Widget to learn more. 


New Articles Widget

Our New Articles widget allows you to display articles that have the newest information. Your home page is a great place to put this widget to help readers keep up with the latest information!

How does it work?

KnowledgeOwl will search behind the scenes for the newest articles. New articles are distinguished by the last 5 published articles created.

Setup

Setting this up is easy! The below merge code is almost all you need.

 [template("new-articles")]

Add the New Articles Widget to all articles

You can place the new articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.


Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the new article links as well and perhaps a div with a class so that you can style the new articles widget.

Something like the following should do:

<div class="new-articles">
 <h3>New Articles</h3>
 [template("new-articles")]
 </div>

Add the New Articles Widget to individual articles

If you only want to display the new articles widget in certain articles you can place the new article merge code at the bottom of individual articles. To do so, edit the article and click the Source button in the top right of the editor toolbar.

Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the new article links as well and perhaps a div with a class so that you can style the new articles widget.

Something like the following should do:

<div class="new-articles">
 <h3>New Articles</h3>
 [template("new-articles")]
 </div>
[template("new-articles")]

Add the New Articles Widget to the right column of your Knowledge Base

Finally, you might decide to display the New Articles Widget in the right column of your knowledge base. This column was designed for this kind of content!

To do so go to Settings > Style > Custom HTML and select Right Column and paste the merge code.

You'll probably also want to add a header to display above the new article links as well and perhaps a div with a class so that you can style the new articles widget.

Something like the following should do:

<div class="new-articles">
 <h3>New Articles</h3>
 [template("new-articles")]
 </div>

Updated Articles Widget

Our Recently Updated Articles widget allows you to display articles that have recently updated content. This will increase your readers' engagement and the your ability to get them the most updated answers they need. Your home page is an excellent place to add this widget.

How does it work?

It's as simple as placing a merge code where you would like this information to be displayed! KnowledgeOwl will search behind the scenes for the most updated articles. Updated articles are determined by the Last Modified on date at the bottom of each article. 

Setup

Setting this up is easy! The below merge code is almost all you need.

[template("up-articles")]

Add the Recently Updated Articles Widget to all articles

You can place the updated articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.


Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the updated article links as well and perhaps a div with a class so that you can style the updated articles widget.

Something like the following should do:

<div class="updated-articles">
 <h3>Updated Articles</h3>
 [template("up-articles")]
 </div>

Add the Recently Updated Articles Widget to individual articles

If you only want to display the updated articles widget in certain articles you can place the updated article merge code at the bottom of individual articles. To do so, edit the article and click the Source button in the top right of the editor toolbar.

Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the updated article links as well and perhaps a div with a class so that you can style the updated articles widget.

Something like the following should do:

<div class="up-articles">
 <h3>Updated Articles</h3>
 [template("up-articles")]
 </div>

Add the Recently Updated Articles Widget to the right column of your Knowledge Base

Finally, you might decide to display the Updated Articles Widget in the right column of your knowledge base. This column was designed for this kind of content!

To do so go to Settings > Style > Custom HTML and select Right Column and paste the merge code.

You'll probably also want to add a header to display above the updated article links as well and perhaps a div with a class so that you can style the updated articles widget.

Something like the following should do:

<div class="updated-articles">
 <h3>Updated Articles</h3>
 [template("up-articles")]
 </div>

Popular Articles Widget

Our Popular Articles Widget allows you to display articles with the most views. This will increase your readers' engagement and your ability to get them the most common answers they might need. Your home page is an excellent place to add this widget.

How does it work?

It's as simple as placing a merge code where you would like this information to be displayed! KnowledgeOwl will search behind the scenes for the most popular articles. Popular articles are determined by the amount of traffic the articles receive. You will be able to find what articles will pop up by going to Reporting and then scrolling to the popular articles section. 


Setup

Setting this up is easy! The below merge code is almost all you need.

[template("pop-articles")]

Add the Popular Articles Widget to all articles

You can place the popular articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. You can place the merge code after the article body merge code or in the hg-article-footer div.


Either of these locations will display at the bottom of each article.

You'll probably also want to add a header to display above the popular article links as well and perhaps a div with a class so that you can style the popular articles widget.

Something like the following should do:

<div class="pop-articles">
 <h3>Popular Articles</h3>
 [template("pop-articles")]
 </div>

Add the Popular Articles Widget to individual articles

If you only want to display the popular articles widget in certain articles you can place the popular article merge code at the bottom of individual articles. To do so, edit the article and click the Source button in the top right of the editor toolbar.

Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the popular article links as well and perhaps a div with a class so that you can style the popular articles widget.

Something like the following should do:

<div class="pop-articles">
 <h3>Popular Articles</h3>
 [template("pop-articles")]
 </div>

Add the Popular Articles Widget to the right column of your Knowledge Base

Finally, you might decide to display the Popular Articles Widget in the right column of your knowledge base. This column was designed for this kind of content!

To do so go to Settings > Style > Custom HTML and select Right Column and paste the merge code.

You'll probably also want to add a header to display above the popular article links as well and perhaps a div with a class so that you can style the popular articles widget.

Something like the following should do:

<div class="pop-articles">
 <h3>Popular Articles</h3>
 [template("pop-articles")]
 </div>

Recent Articles Widget

Our Recent Articles Widget allows you to display a reader's five most-recently-viewed articles, topic display categories, and custom content categories. These links can help readers return to content where they left off, or content they frequently reference. Your home page is an excellent place to add this widget, though you can also add it to the right column of your layout, if you're using the right column.

Note: this widget only works with individual reader accounts. Public knowledge bases, shared passwords, or shared IP addresses will not populate this widget.

How does it work?

To set up, you'll add the merge code for the widget where you'd like the information to be displayed. Behind the scenes, KnowledgeOwl will track the five most recently viewed articles, topic display categories, and custom content categories for each reader, and display those back to the reader in the widget.

Sample Recent Articles widget

Articles are displayed with a document icon; topic display and custom content categories are displayed with a folder.

The Recent Articles widget will not list:

  • Default categories
  • Blog style categories
  • URL redirect categories
  • Articles set with URL redirects 

With topic display categories, if you have the option set to Override Article Links (so that opening an article always opens it within the topic display category), when a reader views an article in the category, both the topic display category and the article will appear in their recent articles list.

Setup

To set this up, add this merge code into either Knowledge Base > Home Page or into the Custom HTML of the relevant layouts:

[reader("recent-articles")]

Different setups are discussed further below.

Add the Recent Articles Widget to your home page

There are two ways to do this, depending on how your knowledge base is set up. If you're using our default home page:

  1. Go to Knowledge Base > Home Page.
  2. Copy one of the other home page widgets and paste it in again.
  3. Edit it to have the title you'd like and replace the merge code with:
    [reader("recent-articles")]
  4. Save.

Your home page might now look like this:

Sample Knowledge Base > Home Page layout with Recent Articles widget added

Add the Recent Articles Widget to all articles

You can place the recent articles merge code in the HTML of all articles. To do so:

  1. Go to Settings > Style
  2. Click on the Custom HTML tab, and select Article from the dropdown.
  3. Click the Select a Merge Code dropdown. Find the Widget Merge Codes section and click on Recently Viewed Articles List.
  4. This will display the merge code. You can either copy and paste it where you like, or put your cursor where you'd like in the Custom HTML and click the Insert button.
  5. You can place the merge code one of two places:
    1. After the article body merge code (will place it at the bottom of the article, but above the horizontal line in our default themes):
    2. In the hg-article-footer div (will place it at the bottom of the article, below the horizontal line in our default themes:
  6. You'll probably also want to add a header to display above the recent article links and perhaps a div with a class so that you can style the recent articles widget. You can see I included a "recent-articles" class in both examples, and a header level 3 title "Recently Viewed Articles".
  7. Once you're done adding and styling the widget, be sure to Save.

Add the Recent Articles Widget to individual articles

If you only want to display the recent articles widget in certain articles, we recommend creating a snippet that includes the recent articles widget and whatever additional formatting you'd like, and then adding that to the individual articles where you'd like the widget displayed.

This helps standardize the appearance of the widget, regardless of where it's added.

To do so:

  1. Go to Library > Snippets.
  2. Click the + Create New Snippet button.
  3. Give your snippet a Snippet Name and Snippet Description.
  4. In the Content, create the layout you'd like for the widget (usually a heading, etc.). Add the merge code into it. Here's a sample:
  5. Once you're satisfied with your snippet, click Create.
  6. With the snippet created, you can add the snippet into any article using the Insert Snippet option in the editor.

Add the Recent Articles Widget to the right column of your Knowledge Base

Finally, you might decide to display the Recent Articles Widget in the right column of your knowledge base. To do so:

  1. Go to Settings > Style.
  2. Click on the Custom HTML tab and select Right Column from the dropdown.
  3. Click the Select a Merge Code dropdown. Find the Widget Merge Codes section and click on Recently Viewed Articles List.
  4. This will display the merge code. You can either copy and paste it where you like, or put your cursor where you'd like in the Custom HTML and click the Insert button.
  5. Once your merge code is added, you will likely want to format it similarly to other things in your right column. We usually just copy the div for one of the other sections, paste it in, and edit it to match. Here's an example:
  6. Once you've added a heading and any other styling, be sure to Save your changes.

Create a custom home page articles widget

By default, your knowledge base comes with three default article widgets on the home page:

You can also add a Recent Articles Widget to your home page. But what if you'd like to build your own widget?

This article will teach you how to build a home page articles widget that populates with articles assigned a specific tag, using an API Snippet. It can be useful for setting up Frequently Referenced articles, Quick Links, and so on.

Note: You must have at least one active API key in your account with ONLY GET permission to use this functionality. To retrieve / generate a KnowledgeOwl API key, have an account administrator go to to Your Account > API and create/verify that a GET-only API key exists.

Step 1: Create your tag and add it to articles

In order to have a widget that pulls all articles with a particular tag, the tag needs to exist and needs to be assigned to articles.

You can create a tag any time on the fly by opening an article in edit mode and typing into the Tags section. Once you save, the tag is created and assigned to the article.

You can see all tags in your knowledge base by going to Library > Tags.

Step 2: Get your tag's ID

Once your tag has been created, you'll need to know its tag ID, which is a unique identifier for that tag. We use the ID here in case the tag is ever edited--the ID won't change even if the spelling of the tag does.

There are  few ways to get your tag's ID. The fastest way is to go the Tags Library and inspect the tag. We offer instructions on how to do that below. (If you have an API key and you're comfortable using it, you can make an API call to find it.)

Getting the tag ID from the Tags Library

To get the tag ID from the Tags Library, we'll use your browser's built-in Inspect option to look at the code in the page.

  1. Go to Library > Tags.
  2. Right-click on the tag whose ID you want to get and select Inspect.
  3. This will open some element details for the tag in a different pane. The value you see is the tag ID:
  4. Copy and paste this tag ID somewhere for later.

Step 3: Create a snippet that looks up articles for your tag

Now the real fun begins. We'll create an API snippet that will pull the list of articles that have that tag assigned, so it can be displayed in a widget on the home page:

  1. Go to Library > Snippets.
  2. Click the Create New Snippet button.
  3. Give your snippet a name. In this example, since I'm using the tipsandtricks tag, I'll call it tipsandtricks Articles.
  4. The Merge Code Name will be automatically generated from the snippet name. You can edit it if you'd like.
  5. Add a description so you remember what this snippet does.
  6. Click the WYSIWYG Editor dropdown next to Snippet Content and select Code Editor from the dropdown.
  7. Once in Code Editor, copy and paste the code below into the editor:
    <ul class="list-unstyled stat-list" id="NAME">
    </ul>
    
    
    <script>
    $(function(){
        //get all articles inside 
        $.get('[ko_api(article|{"project_id": "%cur_kb_id%", "tags": {"$in":["YOUR-TAG-ID"]},"status":"published","_fields": ["url_hash","name"],"sort": {"name": 1}})]',
            function(data) {
                if(data && data.data && data.data.length > 0) {
                      $.each(data.data, function(index, article){
                        $("#NAME").append('<li><div><a href="/help/'+article.url_hash+'">'+article.name+'</a></div></li>')
                    });
                }
              }).fail(function(error) {
              //failed
        });      
    });
    </script>
  8. Replace id=NAME near the top, and $("#NAME") below with the same label. This name should fit the widget you'll be putting on the home page. Keep the quotes around them and keep the # in front of the second.
  9. Replace YOUR-TAG-ID with the tag ID you copied in Step 3. Keep it in "quotes".
  10. If your knowledge base URL ends in something other than /help (such as /docs or /home), you will also need to update the <a href="/help/' portion to have the correct location.
  11. Here is what my sample code looks like for my tipsandtricks tag (I did not need to update /help/ because that's what my knowledge base uses):
  12. Note: if you'd like this widget to only be available to certain groups, use the Restrict to Reader Groups checkboxes in the right to choose the groups to show it to.
  13. Click Create to save your snippet.

Step 4: Test your snippet

To test that your snippet is working:

  1. Create a new article.
  2. Add the snippet to your article.
  3. Publish the article and view it. If your snippet is working, you'll see a list of the articles with the tag you used. If it's not working, be sure you have at least one API key, and be sure that the a href path matches your knowledge base. Reach out to our support team if you're having issues.

Step 5: Add your snippet to your home page

Now that all the architecture is built for the widget, let's add it to the home page. How to do this depends on how your knowledge base has been customized already and where you'd like to add the widget:

  • If you'd like to add the widget to the Right Column of your home page, see "Update the Home Page Right column" below.
  • If you'd like to add the widget to the main body of your home page:
    • Go to Settings > Style and look at the Custom HTML for the Home Page.
      • If there's very little content and you just see a reference to the [homepage("body")] template, then you'll need to follow the steps below for editing Knowledge Base > Home Page. This is the most common configuration. See "Update the Home Page Body template" below.
        Sample home page layout with homepage body template
      • If you see a lot of HTML formatting other widgets, etc., you'll want to edit Settings > Style, Custom HTML > Home Page directly. See "Update the Home Page Custom HTML" below.

Update the Home Page Right Column

If you want to add the new widget into your Home Page Right column:

  1. Go to Library > Snippets.
  2. Click on the snippet you created for this widget.
  3. Copy the snippet's Merge Code Value and paste it somewhere where you can find it.
  4. Go to Settings > Style.
  5. Select Custom HTML > Right Column.
  6. Wherever you'd like to add the widget, copy the code below and paste it into that HTML:
    <div class="panel panel-default right-col-panel custom-panel">
      <div class="panel-heading">Widget Title</div>
      {{snippet.mySample}}
    </div>
  7. Replace custom-panel with a label for this panel that makes sense (I used "tip-panel"). Be sure that you leave the closing quotation mark.
  8. Replace Widget Title with the title you'd like displayed (I used Tips & Tricks).
  9. Replace the with the merge code you copied in Step 3.
  10. Save your changes.

Here's a sample of how I added this code into my right column:

Sample added to my right column. Note that I've given this the "tips-panel" class, added my title, and updated my snippet merge code.

Update the Home Page Body template

If you saw [homepage("body")] somewhere in your Home Page Custom HTML, you probably already have a home page that has some of our pre-built articles widgets on it. Rather than editing the Custom HTML directly, it is easier to edit the home page body template itself. To do so:

  1. Go to Knowledge Base > Home Page. It will likely look something like this:
    Default Home Page Body Layout
  2. You can either replace one of the existing article widget templates or add another (if you add another, you may have to play around with formatting to get things to align well).
  3. Add a title for your new articles widget (default settings for article widgets are Heading 3).
  4. Under the title, insert the merge code for the snippet you created earlier. To do this easily, you can go to Insert Snippet, type in part of the name, and insert.
  5. You can Preview the changes if you'd like, but be sure you click Save to save them!

Note: if something in the format doesn't look correct, you can switch to Code View here, copy the HTML for one of the other widgets to ensure it matches, paste it, and then update it with the snippet merge code and title of your choice!

Update the Home Page Custom HTML

If your knowledge base is not using the [homepage("body")] template, you can add the snippet merge code for your API snippet directly into the Custom HTML. You'll need to reference the snippet's Merge Code Value:

  1. Go to Library > Snippets.
  2. Click on the snippet you created for this widget.
  3. Copy the snippet's Merge Code Value.
  4. Go to Style > Settings. Paste the merge code into an appropriate div, paragraph, etc., in the Custom HTML for your Home Page.

Use Cases

You can use widgets like this to provide curated lists of content on your home page that will update dynamically based on a tag being added to or removed from articles. In internal knowledge bases, these can be a great way to put frequently-referenced articles on your home page. In software support knowledge bases, these can be a great way to highlight documentation from your latest release. We've also seen customers use these for Announcement widgets and tagging articles as announcements.

You can replace all the out-of-the-box home page article widgets, or just one, or add additional widgets (though you may have to play with formatting for more than 3 to look good).

Have you added a custom home page widget to your knowledge base? Share your use case with us!

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.

Add a custom icon and header link on your homepage

Recently, we've had requests for adding icons linking to announcement/update categories to the home page. This can be a great way to highlight and encourage awareness of specific issues or content. (As of the time of this writing, COVID-19 updates are our most frequently requested.)

In this example, we walk through creating a snippet that contains a div with a FontAwesome icon, some text, and a link to content in your knowledge base. You can then add that snippet to your home page to display it.

This will produce something like this:

Sample icon + link

Create the snippet

  1. Go to Library > Snippets.
  2. Click the Create New Snippet button.
  3. Give your snippet a name and a Merge Code name. (Here, we use Homepage COVID-19 for the name and homepageCOVID-19 for the merge code).
  4. Add a Snippet Description, like "This snippet creates a COVID-19 section for the homepage, with a life preserver icon, linked to our COVID-19 category."
  5. Click the dropdown next to Snippet Content to select Code Editor.
  6. Copy the code below and paste it into the editor window:
    <div class="covid-19">
      <!--Adjust the URL below to point to the location you want to use -->
      <a href="/help/covid-19">
        <!--FontAwesome icon. Can be replaced with code for other FA icons -->
          <i class="fa fa-life-ring" aria-hidden="true"></i>
        <!--Text you want displayed below the icon-->
        <div>COVID-19 Info</div>
      </a>
    </div>
    <style>
      /* Style for icon */
      .covid-19 i {
          max-width: 240px;
        color: #A1222F;
        font-size: 48px;
      }
      /* Style for overall div */
      .covid-19 div {
        color: #A1222F;
      }
      
      /* For next section, choose one alignment and remove/comment out the other two
      Left is used as default */
      
      /* Center*/
      /*.covid-19 {
          text-align:center;
        margin: 20px 0;
      }*/
      /* Left */
       .covid-19 {
        display: inline-block;
          text-align:center;
        margin: 20px 0;
      }
      /* Right */
      /* .covid-19 {
        display: inline-block;
          text-align:center;
        margin: 20px 0;
        float: right;
      }*/
    </style>
  7. Adjust the code as needed:
    • In row 3, change the href="/help/covid-19" to reference the URL you'd like this section to point to.
    • We use a FontAwesome life preserver ring icon. You can change this to a different icon by replacing the code in Line 5 with the code for another icon.
    • Update the text you want displayed with the icon by editing Line 7.
    • In the style section, change the color and size of the icon by adjusting the styles for .covid-19 i
    • In the style section, change the color of the text font by changing the color for .covid-19 div
    • Choose one of the alignment options and delete or comment out the other two. If you copy directly from above, it will be left-aligned. But you can change the commenting and delete the alignments you don't want.
  8. If you'd like the linked icon and text to be visible only to certain reader groups, check the boxes in the Restrict to Reader Groups section.
  9. When you're done making adjustments, click Create.

Here's a completed snippet using the "Center" align, with text "COVID-19 Updates" and the colors changed to a dark blue:

Sample completed snippet using Center alignment

Add the snippet to your home page

  1. Copy the Merge Code Value of the snippet.
  2. Go to Settings > Style.
  3. Below the preview pane, select Custom HTML.
  4. Select Home Page from the dropdown.
  5. Paste the merge code value where you'd like it to appear in your home page. This may take some trial and error, but we have a few suggestions:
    • For knowledge bases using search, to place the snippet below the search bar area but above the category list, add it between the hg-article-body div and the homepage body template:

      Which will display here, using center alignment:
      Sample center alignment, inside hg-article-body
    • For home pages with no search, add it between the hg-article-title h1 and the hg-article-body div:

      Which will display here, using left alignment:
      Sample left alignment, between hg-article-title and hg-article-body
  6. Save your changes.