A new knowledge base will display a title at the top saying "Welcome to...." with the knowledge base name after it. We populate this text based on the name you initially picked out for your knowledge base.

If you want to change that text, there are a couple different ways to do it.

If you just want to update the portion that comes after "Welcome to...": that text is based on the name of your knowledge base as it's defined in Settings > Basic. If you want to rename your knowledge base completely (which will also update that welcome text):

1. Go to Settings > Basic.
2. Update the Knowledge base name.
3. Be sure to Save your changes.

If you want to update the "Welcome to..." text in any other way:

1. Go to Homepage.
2. In the Homepage content section, edit the Title text.
3. You can Preview your changes to be sure you like them.
4. Then Save once you're done.

(You can also Remove the homepage welcome text completely if you so choose!)

That didn't work...

If editing the Home Page Title in Homepage doesn't make any changes in your knowledge base, that generally means someone's already customized your homepage a bit.

In this case:

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. Our default layout includes the title in an h1 with class="hg-article-title xcolor", and someone may have edited the text there. You can update the title to one of your choice here, too!
   
   Sample edited title in the Custom HTML
5. You can Preview Changes to be sure you edited the right thing.
6. Be sure to Save once you like the changes you've made.

All new knowledge bases are created with no banner image on the homepage. If you'd like to add one, you can choose to replace it with:

• A solid color
• A color gradient
• An image of your choice

Steps for each are outlined below.

Before you begin

Before you begin, you'll need to know two things:

• The color(s) you'd like to use for a solid color or color gradient background (hexes, RGB, or browser default names are fine) OR the image you'd like to use
• Whether you're using our out-of-the-box Support Theme or a customized theme (read on in this section for more details)

To figure out if you're using our out-of-the-box Support Theme, first, be sure your knowledge base currently doesn't display a banner image of any kind on the homepage. If it does, head over to Change the background image on my homepage instead.

Then:

1. Check if your Custom CSS begins with a comment with General structure at the top:
   
   If your Custom CSS begins with this General structure section, follow the standard instructions below.
   
2. If it does, you're using our new Support Theme. You can follow any of the instructions below without making any adjustments.
3. If it doesn't begin with that section, your knowledge base has a customized theme. You'll need to see if there's any CSS that includes .ko-homepage-top and adjust that CSS. You can use the instructions below as a guide, but you may need to make additional tweaks.

Replace with a solid color

To add a solid color to your homepage banner area:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
   Find the Home Page Top and General section of your Custom CSS
   
4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section, the first one in our screenshot above.
5. Remove background: none;
6. Copy the code below and paste it in where the background: none; was:

       background-color: #8bc34a; /* set background color for homepage banner */
       background-image: none; /* ensure no background image displays */

7. Adjust the background-color value to be the hex or rgb value of your choice.
8. Your final CSS should look something like this, with your background-color hex of choice:

   /******************************************************** Home Page Top and General */
   /* get rid of background banner and add some padding to top of home page */
   .hg-minimalist-theme .ko-homepage-top {
     background-color: #8bc34a; /* set background color for homepage banner */
     background-image: none; /* ensure no background image displays */
     padding-top: 2em;
     padding-bottom: 0em;	
   }

9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom: 0em; line from that Custom CSS.
10. Be sure to Save your changes.

Replace with a color gradient

What if you'd rather use a color gradient, instead of a solid color, for your banner area?

Don't worry, you don't have to know anything about image editing tools and don't have to generate it yourself. There's a built-in CSS function that can do color gradients for you--you just need to know which colors you want to feed in! You'll need at least two colors to pass in to the function; you can used browser default named colors (like red, yellow, blue), hexes, or rgb values for specific brand colors.

In our example below, we use browser default named colors.

To add a color gradient area to the top of your homepage:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
   Find the Home Page Top and General section of your Custom CSS
4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
5. Remove background: none;
6. Copy the code below and paste it in where the background: none; was:

       background-image: linear-gradient(red, yellow); /* set background color gradient */
   

7. Replace the linear-gradient values with your choice. You must have at least two colors but can have more, and you can also specify direction and/or degree. See the W3School's entry for linear-gradient function for more details.
8. Your final CSS should look like this, with whatever colors you've selected:

   /******************************************************** Home Page Top and General */
   /* get rid of background banner and add some padding to top of home page */
   .hg-minimalist-theme .ko-homepage-top {
     background-image: linear-gradient(red, yellow); /* set background color gradient */
     padding-top: 2em;
     padding-bottom: 0em;
   }

9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom: 0em; line from that Custom CSS.
10. Be sure to Save your changes.

Replace with your own image

First, you'll need to find an image you'd like to use. This can involve some trial and error.

Here are some tips to help you find a good image:

• Ideally you want an image with a 5:1 aspect ratio, so it's much wider than it is tall.
• Large overall dimensions tend to work better, around 1500px x 300px is a good place to start, though we have no set requirements.
• The overall image file size should be relatively small. Ideally the image file size is in kilobytes (KB) not megabytes (MB) as large files will slow down your page load time.
• If you have the choice between a .jpg and a .png file, choose the .png. PNG files tend to scale better with different screen sizes, whereas .jpg can become a little fuzzy at certain resolutions. If you have the choice for a .webp file, use that.
• Alternatively, choose a smaller image that would look nice as tiles in the background.

Once you have an image that you'd like to work with:

1. Go to Library > Files and upload it to your File Library.
2. Once you've uploaded your image file, find the URL. Copy it and paste it into a text editor or somewhere else--we'll need it later!
3. Go to Settings > Style.
4. Below the preview pane, be sure Custom CSS is selected.
5. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
   Find the Home Page Top and General section of your Custom CSS
6. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
7. Remove background: none;
8. Copy the code below and paste it in where the background: none; was:
   

       background-image: url("/css/images/tweed.png");
   

9. Replace /css/images/tweed.png in row 1 with the URL you copied in Step 2 from the File Library. Keep the URL in "quotes". So, for example, here's what it might look like using a URL from our File Library:

   /******************************************************** Home Page Top and General */	
   /* get rid of background banner and add some padding to top of home page */
   .hg-minimalist-theme .ko-homepage-top {
     background-image: url("https://dyzz9obi78pm5.cloudfront.net/app/image/id/1ab1ab1ab1ab1ab1ab1ab1ab1/n/sample-banner-image.png");
     padding-top: 2em;
     padding-bottom: 0em;
   }

10. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
11. Once you're happy with your image changes, be sure to Save your changes.
12. If you have repeating or other issues, see the steps below to troubleshoot further.

Is your image repeating or stretched weirdly?

If your image is smaller than the space provided it will repeat itself or stretch oddly:

Sample of a repeating/tiled image

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. Sometimes this works well, but sometimes it distorts or cuts off parts of the image, so take a good look at the results. Your resulting CSS should look something like this:

   .hg-minimalist-theme .ko-homepage-top {
       background-image: url("https://dyzz9obi78pm5.cloudfront.net/app/image/id/1ab1ab1ab1ab1ab1ab1ab1ab1/n/sample-banner-image.png");
       background-size: cover;
       padding-top: 2em;
       padding-bottom: 0em;
   }

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 something like this:

   .hg-minimalist-theme .ko-homepage-top {
       background-image: url("https://dyzz9obi78pm5.cloudfront.net/app/image/id/1ab1ab1ab1ab1ab1ab1ab1ab1/n/sample-banner-image.png");
       background-size: 100% 100%;
       padding-top: 2em;
       padding-bottom: 0em;
   }

If your knowledge base homepage already has some kind of banner image or colored background and you'd like to change it, you can change it to:

• A solid color
• A color gradient
• An image

Before you begin

If your knowledge base already has an image on the home page of some kind:

1. Go to Settings > Style.
2. Check your Custom CSS to see if it already has something set for .ko-homepage-top.
3. If it doesn't, you should be able to follow the instructions below exactly.
4. If it does, you'll need to adjust the CSS. You can use the instructions below as a guide.

Replace with a solid color

You can add a solid color to your home page banner area:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. To add a solid background color, copy the code below and paste it anywhere into the Custom CSS editor:

   /* Set homepage banner image */
   .ko-homepage-top {
       background-color: #8bc34a; /* set background color for homepage banner */
       background-image: none; /* ensure no background image displays */
   }

4. Replace the background-color hex in row 3 with a color of your choice.
5. You can use Preview Changes to see the difference.
6. Be sure to Save your changes once you're done.

Replace with a color gradient

To replace the background image with a color gradient:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Copy the code below and paste it anywhere into the Custom CSS editor:

   /* Set homepage banner image */
   .ko-homepage-top {
         background-image: linear-gradient(red, yellow); /* set background color gradient */
   }

4. Replace the linear-gradient values with your choice. You must have at least two colors but can have more, and you can also specify direction and/or degree. See the W3School's entry for linear-gradient function for more details.
5. You can use Preview Changes to see the difference.
6. Be sure to Save your changes once you're done.

Replace with your own image

First, you'll need to find an image you'd like to use. This can involve some trial and error. Here are some tips to help you find a good image:

• Ideally you want an image with a 5:1 aspect ratio, so it's much wider than it is tall.
• Large overall dimensions tend to work better, around 1500px x 300px is a good place to start, though we have no set requirements here.
• The overall image file size should be relatively small. Ideally the image file size is in kilobytes (KB) not megabytes (MB) as large files will slow down your home page load time.
• If you have the choice between a .jpg and a .png file, choose the .png. PNG files tend to scale better with different screen sizes, whereas .jpg can become a little fuzzy at certain resolutions.
• You might also choose a smaller image that would look nice as tiles in the background.

Once you have an image that you'd like to work with:

1. Go to Library > Files and upload it to your File Library.
2. Once you've uploaded your image file, find the URL. Copy it and paste it into a text editor or somewhere else--we'll need it later!
3. Go to Settings > Style.
4. Below the preview pane, be sure Custom CSS is selected.
5. Copy the code below and paste it anywhere into the Custom CSS editor:

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

6. Replace /css/images/tweed.png in row 3 with the URL you copied in Step 2 from the File Library. Keep the URL in "quotes". So, for example, here's what it might look like using a URL from our File Library:

   /* Set homepage banner image */
   .ko-homepage-top {
     background-image: url("https://dyzz9obi78pm5.cloudfront.net/app/image/id/1ab1ab1ab1ab1ab1ab1ab1ab1/n/sample-banner-image.png");
     padding-top: 2em;
     padding-bottom: 0em;
   }

7. You can Preview Changes to see the difference. If you have repeating or other issues, see the steps below to troubleshoot further.
8. Once you're happy with your image changes, be sure to Save your changes.

Is your image repeating?

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

Sample of a repeating/tiled image

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. Sometimes this works well, but sometimes it distorts or cuts off parts of the image, so take a good look at the results. Your resulting CSS should look something like this:

   .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 something like this:

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

By default, the title of your knowledge base will display above the search bar of your homepage in a "Welcome to...." statement:
Sample homepage welcome text

You can Change the welcome text on my home page, but in some cases you might want to remove it entirely. (For example, if you add a banner image that has your company name/logo in it already!)

To remove that welcome text completely, delete one line of HTML from the Home Page Custom HTML template:

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. Delete the line that says <h1 class="hg-article-title xcolor">[homepage("title")]</h1> (in our default template, it should be the second line of code, but yours may look different):
   
   Find the h1 and delete it
   
5. You can Preview Changes to see the updated look.
6. Your custom HTML should now look something like this, and your title should be gone:
   Same code example, title removed
7. Be sure to Save your changes once you're done.

By default, the color of the "Welcome to..." statement on the homepage (the homepage title) is set to a dark blue:

The homepage welcome statement

To change it to another color:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Check if your Custom CSS begins with a comment with General structure at the top:
   
   If your Custom CSS begins with this section, follow the Update existing CSS instructions further down the page.
   
4. If it does, follow the Update existing CSS instructions. If the Custom CSS section doesn't look like the above, stay with these instructions.
5. Copy the code below and paste it into your Custom CSS pane:

   /* Change color of homepage title */
   .ko-homepage-top .hg-article-title {
       color: #000000; /* Update to use the color of your choice */
   }

6. Replace the #000000 on row 3 with the hex code or rbg value of your choice.
7. You can Preview Changes to see the difference.
8. Be sure to Save once you've got it looking the way you'd like.

Update existing CSS

If your Custom CSS included the General structure CSS in the screenshot above, you don't need to add any new CSS. You'll just need to update what's there.

1. In Settings > Style, still in that Custom CSS pane, scroll about halfway down the pane until you find the Home Page Top and General section, which is just above the halfway point:
   
   Find the Home Page Top and General section of your Custom CSS
   
2. Look for the third commented section here for change default color for home page title:
   
   Update the hex color here
   
3. Update the color listed in that section (#1d284f) with the hex code or rgb value of your choice.
4. Be sure to Save your changes once you're done!

By default, all new knowledge bases use category icons on their homepage. If you're using one of our older knowledge base themes, or you are using a knowledge base created from a copy of an older knowledge base, you may need to manually update your knowledge base to use category icons on the homepage.

There are two ways to use category icons in your homepage category panels:

1. Use our pre-built merge code to do the work for you: This requires less work and technical knowledge, but it will change the HTML structure of your homepage, which may mean you'll need to update Custom CSS to style the panels the same way.
   We recommend starting with this approach, since it uses built-in functionality.
2. Keep your existing styles and use a script (and some additional Custom CSS) to style your icons: This is a bit trickier but means you won't have to touch your current styles much.

We'll walk through each option in more detail below.

Use the merge code

To use the merge code, you'll need to update your homepage so that it's no longer using the [template("base-cats")] template.

To generate the automatic panels for your current homepage, a template for base-cats is used. This template is usually added in one of two places:

• Top-level Homepage
• Settings > Style, Custom HTML > Home Page

1. Check each of these pages to see where [template("base-cats")] is referenced; you'll want to make the edits in the same place.
2. Once you've found where the template is added, replace "base-cats" with "icon-cats". So your merge code should now look like:

   [template("icon-cats")]

3. By default, the icon-cats template will:
   • Display all of your categories
   • Display four categories per row
   • Won't display the category description
4. If you're happy with that, you can Save now. Otherwise, you can adjust the merge code to change this behavior.
5. To limit the number of categories it shows, add ,max=<#>. Make sure you have no spaces, and replace <#> with maximum number of categories you want to show. For example, this merge code will limit the number of categories displayed to eight:

   [template("icon-cats,max=8")]

6.  To adjust the number of categories displayed per row, add ,col=<#>. Make sure you have no spaces, and replace <#> with the number of columns of categories you want per row. For example, this merge code will display three categories per row instead of the default four:

   [template("icon-cats,col=3")]

7. To show the category description below the category's icon and title, add ,desc=1, which tells the merge code to show descriptions:

   [template("icon-cats,desc=1")]

8. You can use any combination of these settings together, too. This merge code will display a total of nine categories even if there are more, and will display them in rows of three with the category descriptions shown:

   [template("icon-cats,max=9,col=3,desc=1")]

9. You can use the Preview option to get a sneak peek of how that will look.
10. Once you've finished making changes, be sure to Save them.

If you're using the default styles on the home page, that will shift the home page from having two or three categories per row with this styling:

A sample knowledge base using the base-cats template

To have four categories per row with this styling:

A sample knowledge base using the icon-cats template

Styling the panels

If you have Custom CSS already applied to your homepage category tiles, that CSS won't generally work on the icon-cats template, since it constructs the HTML and CSS classes differently.

In the base-cats format, the row of category tiles is put within a div class="category-list" with divs for faq-cat-panel-container and faq-cat-panel, something like this:

Sample HTML structure of a home page using base-cats

Most of the Custom CSS to style these is applied to the faq-cat-panel div, which handles background, border, text alignment, and more.

Once you switch to icon-cats, the format changes significantly:

• The category-list div picks up two extra classes (panels and colx, where x is replaced with the number of columns specified in the merge code).
• The extra faq-cat-panel-container is completely removed.
• The faq-cat-panel class changes to cat-icon-panel.
• The div also includes a div for category-icon.
• The cat-icon-panel gets a title set, which helps with accessibility.

Sample HTML structure of a home page using icon-cats

The default styles we use for the icon-cats classes are:

.cat-icon-panel {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: none;
    padding: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    backface-visibility: hidden;
}

.category-icon {
    height: 100px;
    transition: all .2s ease-in-out;
}

.hg-minimalist-theme .cat-icon-panel .category-header, 
.cat-icon-panel .category-header {
    font-size: 18px;
    color: #1d284f;
}

.cat-icon-panel .category-header {
    text-align: center;
}

.cat-icon-panel:hover {
    transform: scale(1.01) translateZ(0);
    box-shadow: 2px 4px 4px #aeaeae;
}

.cat-icon-panel:hover .category-icon {
    transform: scale(1.10);
}

You can copy these and paste them into your Custom CSS and start tweaking them to do your styles.

Updating your existing CSS

Alternatively, you can try to update your existing CSS in-place. This will take some trial and error, but here are some tips:

• If you have any CSS that is setting the .faq-cat-panel-container width, you should be able to remove this completely. We no longer wrap the panels in a container to handle width; the icon-cats col= variable lets you set this width directly in the merge code. Be sure that your merge code contains the appropriate col= setting to mimic this width CSS.
• If you have any existing CSS specifying that .faq-cat-panel-container or .faq-cat-panel use flex (or any of the flex attributes), you should be able to remove that entirely. The icon-cats structure uses flex automatically.
• If you have existing .faq-cat-panel styles, try copying that CSS and adding it to the .cat-icon-panel class.
  • For example, if I have this CSS in my existing knowledge base:

    .hg-home-page .category-list .faq-cat-panel {		
      border: 2px solid black;
      box-shadow: none;
      padding: 16px;
      border-radius: 5px;
    }

  • I can add a comma and add the same selectors but replace .faq-cat-panel with .cat-icon-panel:

  .hg-home-page .category-list .faq-cat-panel,
  .hg-home-page .category-list .cat-icon-panel {		
    border: 2px solid black;
    box-shadow: none;
    padding: 16px;
    border-radius: 5px;
  }

• Changes to the base styles for the .cat-icon-panel as well as the h3 within them should be fairly easy to update using this method.

Use a script

If you don't want to use the merge code, you can use the base-cats template combined with a script to extract the icons. This is a little clunkier but does work.

We strongly encourage you to try the merge code approach though, as it is slightly more accessible for screen readers and much easier to work with for future styling needs.

You can add to your knowledge base's Custom HTML and Custom CSS to extract the category icons and display them!

To get the category icons displaying on your home page:

1. Go to Settings > Style.
2. Below the preview pane, select Custom HTML.
3. In the dropdown, select Home Page.
4. Copy the script below and paste it into the bottom of the Custom HTML editing pane:

   <script>
   //This script runs on the home page and looks for category icons added to the category, extracts and displays them.
     $(function() { 
       $.each($(".faq-cat-panel-container"), function() { 
         var imageURL = $(this).find("input.category-icon-url").val();
         $(this).find(".faq-cat-panel").prepend("<div><img class='category-icon' src='"+imageURL+"' alt=''></div>");
       }); 
       $('.faq-cat-panel-container').show();
     }); 
   </script>

5. Now select Custom CSS.
6. Copy the CSS below and paste it into your CSS. The .category-icon class can be used to style your icons as you'd like--the style here is just an example. You can play with this more or talk to our support team for additional help getting the icons to appears as you'd like!

   /* Hide the home page category containers at first, so that the category icon script will display them once they run
   This prevents a blip where the panels show briefly without the icon */
   .hg-home-page .faq-cat-panel-container {
     display: none;
   }
   /* Style the category icon; you can use any variety of CSS here */
   .category-icon {
     max-width: 3em;
     padding-bottom: 0.5em;
   }

7. You can preview your changes; just be sure you Save them once you're done.

Variations

If you'd like the alt text of the image to be populated by the category title, use this script instead:

<script> 
    //This script runs on the home page and looks for category icons added to the category, extracts and displays them.
  $(function() { 
    $.each($(".faq-cat-panel-container"), function() { 
      var imageURL = $(this).find("input.category-icon-url").val();
      var catTitle = $(this).find(".category-header a").text();
      $(this).find(".faq-cat-panel").prepend("<div><img class='category-icon' src='"+imageURL+"' alt='"+catTitle+"'></div>");
    }); 
    $('.faq-cat-panel-container').show();
  }); 
</script>

KnowledgeOwl offers six article lists that you can use in your knowledge base to help readers find new, updated, popular, recently viewed, required, and relevant content. These lists are automatically generated. Four are added to your homepage or articles by default; the other three are optional lists you can choose to add!

To change the number of articles displayed in each list, see Article List Settings.

Pre-added lists

Popular Articles List

Our Popular Articles List displays articles with the most traffic. 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 list.

New Articles List

Our New Articles List displays articles that have been recently created or published. Your home page is a great spot to place this list to help supply readers with the most up to date information!

Updated Articles List

Our Updated Articles List displays 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 list. Check out our documentation on the Updated Articles List to learn more. 

Related Articles List

Our Related Articles List is used in articles 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.

Optional/Feature-specific lists

Favorite Articles List

For knowledge bases that use reader logins and have Article Favorites enabled, the Favorite Articles List will display the articles a reader has chosen to favorite.

Recent Articles List

For knowledge bases that use reader logins, the Recently Viewed Articles List displays the current reader's most recently viewed articles. This will help readers return to articles or categories they have recently viewed. Your home page or righthand column is an excellent place to add this list.

Required Articles List

For knowledge bases that use reader logins and have Required Reading enabled, the Required Articles List will display all articles marked as required. Readers can click to open articles to acknowledge them, or click the See more... link to navigate to the Required Reading page to view the complete list and see which articles they need to acknowledge.

Our New Articles List allows you to display articles that have been created or published most recently. This list is included by default on the homepage of all new knowledge bases.

Sample New Articles list

How does it work?

KnowledgeOwl will search behind the scenes for the newest articles and display them within the list, with newest displayed at the top. Articles which have the New callout added to them will display before articles which do not have that callout.

A "See more..." link at the bottom of the list will take you to a full page of all New articles, located at /help/new-articles (or /home/new-articles or /docs/new-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/new-articles 

Out of the box, this list will display five articles. If no articles are available, it will display the text "None". If more than five are available, it includes a "See more..." link after the five articles.

You can choose to display up to 10 articles. You can also change the article list heading, the New Articles page heading, "None", and "See more..." text.

To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the five most recent articles will be displayed. You can change this to display between 1-10:

1. Go to Settings > Basic.
2. Scroll to the Article List Settings section.
3. Select the dropdown next to New Articles and select the number of articles you'd like the list to display (1-10).
   
   The New Articles dropdown in the Article List Settings section of Basic Settings
   
4. Be sure to Save your changes.

In our default themes, the New Articles List is already added to:

• Your knowledge base homepage
• Your 404 error page
• Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code: [template("new-articles")]

Add the New Articles List 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 list.

Something like the following should do:

<div class="new-articles">
 <h3>[translation("article-lists:new-articles")]</h3>
 [template("new-articles")]
 </div>

Add the New Articles List to individual articles

If you only want to display the New Articles List in certain articles you can place the new article merge code at the bottom of individual articles. To do so, edit the article and select the Code View button in the upper left of the editor toolbar:

The Code View button in the editor

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 list.

Something like the following should do:

<div class="new-articles">
 <h3>[translation("article-lists:new-articles")]</h3>
 [template("new-articles")]
 </div>

Re-add the New Articles List to the right column of your Knowledge Base

If you've removed the New Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the New Articles List to your homepage

If you've removed the New Articles List from your homepage, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of the top-level Homepage or into Settings > Style > Custom HTML > Home Page.

Our Recently Updated Articles List allows you to display articles that have recently updated content. This will increase your readers' engagement and your ability to get them the most updated answers they need. By default, we add this list to your home page but you can use it almost anywhere.

Sample Updated Articles List

How does it work?

Wherever the updated articles merge code is used, KnowledgeOwl will search behind the scenes to pull a list of the articles with last modified dates, with the most recently updated at the top. Articles which have the Updated callout added to them will display before articles which do not have that callout.

A "See more..." link at the bottom of the list will take you to a full page of all Updated articles, located at /help/updated-articles (or /home/updated-articles or /docs/updated-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/updated-articles 

Out of the box, this list will display five articles. If no articles are available, it will display the text "None". If more than five are available, it will include a "See more..." link below the articles.

You can choose to display up to 10 articles. You can also change the article list heading, the New Articles page heading, "None", and "See more..." text.

To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the five most recently updated articles will be displayed. You can change this to display between 1-10:

1. Go to Settings > Basic.
2. Scroll to the Article List Settings section.
3. Select the dropdown next to Updated Articles and select the number of articles you'd like the list to display (1-10).
   
   Select the number of Updated Articles to display
   
4. Be sure to Save your changes.

In our default themes, the Updated Articles List is already added to:

• Your knowledge base homepage
• Your 404 error page
• Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code:[template("up-articles")]

Add the Recently Updated Articles List 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 list.

Something like the following should do:

<div class="updated-articles">
 <h3>[translation("article-lists:updated-articles")]</h3>
 [template("up-articles")]
 </div>

Add the Recently Updated Articles List to individual articles

If you only want to display the updated articles list in certain articles you can place the updated article merge code at the bottom of individual articles. To do so, edit the article and select the Code View button in the upper left of the editor toolbar:

Select the Code View button

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 list.

Something like the following should do:

<div class="up-articles">
 <h3>[translation("article-lists:updated-articles")]</h3>
 [template("up-articles")]
 </div>

Re-add the Updated Articles List to the right column of your Knowledge Base

If you've removed the Updated Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the Updated Articles List to your home page

If you've removed the Updated Articles List from your home page, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of the top-level Homepage or into Settings > Style > Custom HTML > Home Page.

Our Popular Articles List displays articles with the most views. This will increase your readers' engagement and your ability to get them the most common answers they might need. By default, we display this on your home page.

Sample Popular Articles list in a knowledge base

How does it work?

Wherever the popular articles merge code is used, KnowledgeOwl will search behind the scenes to pull a list of the articles with the highest number of views (as displayed in the Popular Articles Report in Reporting > Dashboard), sorted with the most views at the top. You can also Reset article views in the Popular Articles report.

A "See more..." link at the bottom of the list will take you to a full page of all Popular articles, located at /help/popular-articles (or /home/popular-articles or /docs/popular-articles depending on which root path you've chosen). You can see ours here: https://support.knowledgeowl.com/help/popular-articles 

Out of the box, this list will display five articles. If no articles are available, it displays the text "None." If more than five are available, it includes a "See more..." link at the bottom of the list.

You can choose to display up to 10 articles. You can also change the article list heading, the Popular Articles page heading, "None", and "See more..." text.

To update any of the text, use the options in Tools > Customize Text in the Article Lists Knowledge Base Section. See Customize Text: Article Lists for more information.

Change number of articles in the list

By default, the 5 most popular articles (those with the most views) will be displayed. You can change this to display between 1-10:

1. Go to Settings > Basic.
2. Scroll to the Article List Settings section.
3. Select on the dropdown next to Popular Articles and select the number of articles you'd like the widget to display (1-10).
   
   Select the number of articles to display from the Popular Articles dropdown
   
4. Be sure to Save your changes.

In our default themes, the Popular Articles List is already added to:

• Your knowledge base home page
• Your 404 error page
• Your default right column HTML

If you'd like to add it somewhere else, or if you've customized the HTML and no longer see the list on the pages listed above, review the directions below to add it! You'll need this merge code:[template("pop-articles")]

Add the Popular Articles List 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 list.

Something like the following should do:

<div class="pop-articles">
 <h3>[translation("article-lists:popular-articles")]</h3>
 [template("pop-articles")]
 </div>

Add the Popular Articles List to individual articles

If you only want to display the Popular Articles List in certain articles you can place the popular article merge code at the bottom of individual articles. To do so, edit the article and select the Code View button in the upper left of the editor toolbar:

Select the Code View button

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 list

Something like the following should do:

<div class="pop-articles">
 <h3>[translation("article-lists:popular-articles")]</h3>
 [template("pop-articles")]
 </div>

Re-add the Popular Articles List to the right column of your Knowledge Base

If you've removed the Popular Articles List from the right column of your knowledge base, you can re-add it by copying the relevant HTML from Default Right Column HTML and pasting it into Settings > Style > Custom HTML > Right Column.

Re-add the Popular Articles List to your home page

If you've removed the Popular Articles List from your home page, you can re-add it to by copying and pasting the relevant HTML from Default Home Page Article HTML into either the code view of the top-level Homepage or into Settings > Style > Custom HTML > Home Page.

For knowledge bases using individual reader accounts, our Recent Articles List displays a reader's 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 article list, though you can also add it to the right column of your layout, if you're using the right column.

How does it work?

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

Sample Recent Articles List

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

The Recent Articles list will not show:

• 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

By default, the reader's five most recently viewed articles will be displayed. You can change this to display between 1-10:

1. Go to Settings > Basic.
2. Scroll to the Article List Settings section.
3. Select the dropdown next to Recent Articles and select the number of articles you'd like the list to display (1-10):
   
   Select the number of articles to display in the Recent Articles dropdown
   
4. Be sure to Save your changes.

If you'd like to add it, you'll add two merge codes into either the top-level Homepage or into the Settings > Style > Custom HTML of the relevant layouts:

• [translation("article-lists:recent-articles")]: this merge code grabs the Recent articles list heading in Tools > Customize Text > Article Lists, making it so no one has to edit the code in the future to update the title.
• [reader("recent-articles")]: this merge code generates the individual reader's recent articles list.

Different setups are discussed further below.

Add the Recent Articles List to your homepage (Settings > Style)

Most knowledge bases have their article lists set in Settings > Style. If your knowledge base uses this layout, you can follow these instructions to add the Recent Articles List there. (If your knowledge base doesn't show any article lists in Settings > Style > Custom HTML > Home Page, follow the next set of instructions!)

1. Go to Settings > Style.
2. Below the Preview pane, be sure Custom HTML is selected.
3. Select Home Page from the Custom HTML dropdown.
4. Near the bottom of the code editor, find the div with class="homepage-widgets row".
5. Copy one of the other article lists and paste that code in again.
6. Replace the title merge code with: [translation("article-lists:recent-articles")]
7. Replace the list merge code with:[reader("recent-articles")]
8. Your code should now look something like this:

   <div class="homepage-widgets row">
       <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
       <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
       <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
       <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:recent-articles")]</h3>[reader("recent-articles")]</div>	
   </div>

9. You can Preview your changes to be sure they look right.
10. Be sure to Save your changes once you're done!

Add the Recent Articles List to your homepage (top-level Homepage)

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

1. In the top lefthand navigation, go to Homepage.
2. Copy one of the other homepage lists and paste it in again.
3. Replace the title with this merge code: [translation("article-lists:recent-articles")]
4. Replace the merge code with:[reader("recent-articles")]
5. Save.

Add the Recent Articles List to all articles

You can place the recent articles merge code and title in the HTML of all articles. To do so, it's best to create a div and add the title within a header and the article list merge code below that. We provide a code sample below you can copy and paste and adjust as you'd like:

1. Go to Settings > Style
2. Be sure the Custom HTML tab is selected.
3. Select Article from the Custom HTML dropdown.
4. Copy the code below:

   <div class="recent-articles text-center">
     <h3>[translation("article-lists:recent-articles")]</h3>		
     [reader("recent-articles")]
   </div>

5. Paste it in wherever you'd like. We recommend placing this in the hg-article-footer div, either above or below the Related Articles section:
   
   Sample Recent Articles section added above the Related Articles section
   
6. Once you're done adding the merge code, text, and any Custom CSS to style it, be sure to Save.

Add the Recent Articles List to individual articles

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

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

To do so:

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

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

If you're using an older theme that shows the right column, you might decide to display the Recent Articles List in the right column of your knowledge base. To do so:

1. Go to Settings > Style.
2. Be sure the Custom HTML tab is selected.
3. In the Custom HTML dropdown, select Right Column.
4. Copy the code below and paste it in where you'd like. We recommend putting it before or after one of the existing article lists:

   <div class="panel panel-default right-col-panel recent-panel">	
     <div class="panel-heading">[translation("article-lists:recent-articles")]</div>
     
   </div>

5. Be sure to Save your changes.

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

• Popular Articles List
• New Articles List
• Updated Articles List

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

Learn how to build a home page articles list 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.

Step 1: Create your tag and add it to articles

In order to have a list 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 the tag endpoint to get 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. Look two rows up from the tag-pill with the text of the tag you selected. The value listed there is the tag ID:
   
   Sample tag ID in dev tools
   
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 list on the home page:

1. Go to Library > Snippets.
2. Select 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. Select the Snippet Content editor, which should say WYSIWYG Editor, and select Code Editor instead.
   
   Select Code Editor from the Snippet Content 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":["<tag-id>"]},"status": {"$in": ["published", "review"]}, "_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. In row 1, replace <name> with a label or name that makes sense for your list. Be sure you keep the quotes around it. So if I'm creating this for my tips and tricks, I might use id="tips".
9. Use that same name in row 12, where it says $("#<name>"). Be sure to keep the quotes and the # in front of it. So if I used id="tips" for the first one, I'll use $("#tips") here.
10. In row 8, replace <tag-id> with the tag ID you copied in Step 3. Keep it in "quotes".
11. In row 12, if your knowledge base URL ends in something other than /help (such as /docs or /home), update the <a href="/help/' portion to have the correct location. Replace "/help' with "/home' or "/docs' as appropriate.
12. Here is what my complete snippet looks like for my tipsandtricks tag. In my case, the knowledge base I'm in was using /docs, so I updated row 12 to reflect that change:
    
    Sample completed snippet that uses the id "tips" and the /docs/ URL instead of /help/
    
13. Optional: if you'd like this list to only be displayed to certain groups, use the Restrict to Reader Groups checkboxes in the right panel to choose the groups to show it to.
14. Once you've finished making changes, select the Create button to create and 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 homepage

Now that all the architecture is built for the list, let's add it to the homepage. How to do this depends on where you'd like to add the list:

• If you'd like to add the list in with your existing article lists, or replace one of those article lists, follow the instructions to Update the Home Page Custom HTML.
• If you'd like to add the list below the categories on the homepage but above all the other lists, follow the instructions to Update the Homepage content.
• If you're using an older theme with a Right Column and you'd like to add the list there, follow the instructions to Update the right column.

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. Open the snippet you created for this list.
3. Copy the snippet's Merge Code Value.
   
4. Go to Style > Settings.
5. Be sure Custom HTML is selected.
6. Select Home Page from the Custom HTML dropdown.
7. Paste the merge code into an appropriate div, paragraph, or whatever you'd like here. If in doubt, you can copy the HTML for one of the other lists, swap out the titles, and replace the article list's template merge code with the snippet merge code.

Update the Homepage content

If you want to place this list in your homepage's body content within the [homepage("body")] template, rather than editing the Custom HTML directly, it is easier to edit the homepage content itself. To do so:

1. Select Homepage from the lefthand navigation.
2. Create a heading for the section, like "Tips & Tricks".
3. Use the Insert Snippet option to insert your snippet merge code beneath the heading.
   
   Use the Insert Snippet option
   
4. You can Preview the changes if you'd like, but be sure you click Save to save them!

Update the right column

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

1. Go to Library > Snippets.
2. Click on the snippet you created for this list.
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 list, copy the code below and paste it into that HTML:

   <div class="panel panel-default right-col-panel <custom-panel>">
     <div class="panel-heading"><list-title></div>
     <snippet-merge-code>
   </div>

7. In row 1, 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. In row 2, replace <list-title> with the title you'd like displayed (I used Tips & Tricks).
9. In row 3, replace the <snippet-merge-code> with the merge code you copied in Step 3.
10. So if I adjust this for my Tips & Tricks setup, it might look like this:

<div class="panel panel-default right-col-panel tips-panel">
  <div class="panel-heading">Tips &amp; Tricks</div>
  
</div>

11. Save your changes.

Use Cases

You can use lists like this to provide curated lists of content on your homepage 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 Announcements.

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

Have you added a custom article list to your homepage? Share your use case with us!

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 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 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 Home Page 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>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
               <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles-heading")]</h3>[template("new-articles")]</div>
               <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</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.

Do you want to add an icon with text to your homepage? This can be a great way to encourage people to jump to a particular category or resource or encourage awareness of specific issues or content.

In this example, we walk through creating a snippet that contains a div with a Font Awesome 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.

The end-result will look something like this:

Sample icon and link

Create the snippet

1. Go to Library > Snippets.
2. Select the + Create New Snippet button.
3. Enter a Name for your snippet. The Merge Code Name is automatically calculated from the name.
4. Enter a Snippet Description. When anyone tries to insert a snippet using the editor, this description will be shown to them, so make it useful.
5. Select the Snippet Content dropdown and select Code Editor.
   
   Select Code Editor from the Snippet Content dropdown
6. Copy the code below and paste it into the editor window:

   <div class="homepage-callout-icon">
     <!--Adjust the URL below to point to the location you want to use -->
     <a href="/help/breaking-news">
       <!--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>Breaking News!</div>
     </a>
   </div>
   <style>
     /* Style for icon */
     .homepage-callout-icon i {
       max-width: 240px;
       color: #A1222F;
       font-size: 48px;
     }
     /* Style for hyperlink text */
     .hg-minimalist-theme div.homepage-callout-icon a {
       color: #A1222F;
     }
     
     /* For next section, choose one alignment and remove/comment out the other two
     Left is used as default */
     
     /* Center*/
     /*.homepage-callout-icon {
       text-align:center;
       margin: 20px 0;
     }*/
     /* Left */
     .homepage-callout-icon {
       display: inline-block;
       text-align:center;
       margin: 20px 0;
     }
     /* Right */
     /* .homepage-callout-icon {
       display: inline-block;
       text-align:center;
       margin: 20px 0;
       float: right;
     }*/
   </style>

7. In row 3, change the href="/help/breaking-news" to reference the URL you'd like this section to point to. If it's within your knowledge base, you only need to use the relative URL (/help/, /home/, or /docs/ with the URL of the specific article or category).
8. In row 5: we use a Font Awesome life preserver ring icon. To change this:
   • Head to the free Font Awesome icons. 
   • Browse or search for an icon you'd like to use.
   • Select it and copy the HTML it displays for the icon.
   • Replace the HTML in row 5 with the HTML you copied from Font Awesome.
9. In row 7: Update the text you want displayed with the icon by editing this line.
10. In row 14, change the color and size of the icon by adjusting the styles for .homepage-callout-icon i.
11. In row 19, change the color of the text font by changing the color for .hg-minimalist-theme div.homepage-callout-icon a.
12. Rows 22-42: Choose one of the alignment options and delete or comment out the other two. In our sample, we have used the Left alignment and commented out the other two. But you can change the commenting and delete the alignments you don't want.
13. Optional: If you'd like the linked icon and text to be visible only to certain reader groups, select those reader groups using the boxes in the Restrict to Reader Groups section.
14. When you're done making adjustments, select Create.

Here's a completed snippet using the "Center" align with a newspaper icon and text "Latest Releases!" and the colors changed to a dark blue:

<div class="homepage-callout-icon">
  <!--Adjust the URL below to point to the location you want to use -->
  <a href="/docs/release-notes">
    <!--FontAwesome icon. Can be replaced with code for other FA icons -->
      <i class="fa-regular fa-newspaper"></i>
    <!--Text you want displayed below the icon-->
    <div>Latest Releases!</div>
  </a>
</div>
<style>
  /* Style for icon */
  .homepage-callout-icon i {
    max-width: 240px;
    color: #1d284f;
    font-size: 48px;
  }
  /* Style for hyperlink text */
  .hg-minimalist-theme div.homepage-callout-icon a {
    color: #1d284f;
  }
  /* Center*/
  .homepage-callout-icon {
    text-align:center;
    margin: 20px 0;
  }
</style>

Add the snippet to your homepage

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.
   • To place it below the search bar but above the category icons, enter it on a new line between the hg-article-body div and the div with the icon-cats template in it, for example, here it is in row 7:

     <div class="ko-homepage-top">			
         <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
         
     
     	
     
     				
     		
     	
     
     </div>
     <div class="hg-article">
         <div class="hg-article-body">
           
             <div>			
     
     				
     Home
     										
     
     						
     Look and feel				
     											
     
     						
     Homepage look and feel				
     							    
     		
     
               
     
     	Subscribe
     
             
     Homepage look and feel
             
     
               Learn how to customize the homepage of your knowledge base.        
             
     
           
     </div>
             <div>[homepage("body")]</div>

     Sample of how that code displays in the live knowledge base
     
   • To place it between the title and the search bar, enter it on a new line between the h1 with the homepage title merge code and the large-search template, for example, here it is in row 3:

     <div class="ko-homepage-top">
         <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
       
         
     
     	
     
     				
     		
     	
     
     </div>
     <div class="hg-article">
         <div class="hg-article-body">

     Sample of how that code displays in the live knowledge base
6. Save your changes.