Table of contents & organization

By default, the table of contents in your knowledge base displays all categories as closed or collapsed. Within individual categories, you can override this behavior using the Table of Contents Display setting. Refer to Customize category behavior in the table of contents for more information on these individual category overrides.

But you can also change this default behavior so that categories will default to being open by default instead. To do so:

1. Go to Customize > Website.
2. In the Links and behavior section, under Table of contents behavior, select All categories open by default:
   
3. Be sure to Save your changes.

All categories with the Table of Contents Display set to Default will now be display opened.

Refer to Website settings for more information on other settings available in Customize > Website.

While your uploaded logo is automatically linked to your knowledge base homepage, not all readers find this obvious or intuitive.

You may want to add a Home link to your table of contents:

Sample home link in TOC

KnowledgeOwl has a built-in setting for this. To add or remove the Home link to your table of contents:

1. Go to Customize > Website.
2. In the Links and behavior section, under Table of contents elements, check or uncheck the box to Add a homepage link to the top of the table of contents.
3. Be sure to Save your changes. Your table of contents should update to reflect your changes.

Refer to Website Settings for more information on the other table of contents elements settings.

Though most themes include a search bar in the top navigation, you might want to include a search bar in your table of contents, as well. When added, the search bar displays at the very top of the table of contents, above the Home and Glossary links:

Sample Search bar in table of contents

To add a search bar to the top of your table of contents:

1. Go to Customize > Website.
   
2. In the Links and behavior section, under Table of contents elements, check the box to Add a search bar to the top of the table of contents.
3. Save. You should now see the search bar at the top of your TOC.

Refer to Website Settings for more information on other settings available in Customize > Website.

If you're using the Glossary, choose whether you want to display a link to the Glossary in your table of contents. The link displays with a small book icon beneath the Home link:

Sample Glossary link and icon in the table of contents

To add or remove the glossary link in your table of contents:

1. Go to Customize > Website. (Or, from the Glossary page, select Edit in settings next to Link in the table of contents.)
   
2. In the Links and behavior section, under Table of contents elements, check or uncheck the box to Add a glossary link to the top of the table of contents.
3. Save.

Refer to Website settings for more information on other settings available in Customize > Website.

If you're using a Standard PDF export (Full PDF Download) of your knowledge base, you can add a download link for the PDF to your table of contents.

Sample table of contents with Full PDF Download link

There are two different ways you can add a link to the full PDF download to the bottom of your table of contents; one is through the Standard PDF configuration; the other is through Customize > Website. Below, we describe how to add it through the Standard PDF configuration; refer to Website Settings for adding it from Customize > Website.

1. In the left navigation, go to Tools > Exports.
2. In the Standard PDF tab, check the Display to readers box to Add a full PDF download link to the knowledge base table of contents.
   
   Check the Display to readers box to Add a full PDF wonload link to the knowledge base table of contents
   
3. Save and regenerate the PDF. You should now see the PDF link at the bottom of your table of contents.
4. By default, the table of contents link text is "Full PDF Download." If you'd like to change that wording, use the Table of Contents section of Customize default text to update it!

Refer to Website Settings for more information on other settings available in Customize > Website.

If you'd like to add links to your table of contents, you can do so in two ways:

• To add a link in with your categories, create a URL redirect category with the link of your choice.
• To add a link to the very top or bottom of your table of contents, see the instructions below.

If you're using the contact form, you might want to add a link to the contact form in your table of contents, so let's use that as an example:

Custom "Contact us" link added to the top of our table of contents

Prep work

Before you begin, you'll need a few things:

• The link you'd like to add to your table of contents.
• A free FontAwesome icon you'd like to use for that link. We already have a few icons used, like home, or the book used next to glossary. You'll need to know the FontAwesome class for the icon.
• Where you'd like the link placed. The scripts we provide below will put it:
  • At the top of the table of contents, above all other links (including Home, if it's enabled)
  • Below the Home link but above everything else in the table of contents, if Home link is enabled
  • At the very bottom of the table of contents

Setup

1. Go to Settings > Style.
2. Below the Preview Pane, be sure Custom HTML is selected.
3. In the Custom HTML dropdown, be sure Body is selected.
4. Choose your script:
   1. If you'd like to add this link to very top of your table of contents, even above the Home link (if it's enabled) copy this script and paste it into the editor:

      <script>
        //Add Contact Support link to top of table of contents, before Home link
        $(function(){
          $(".documentation-outter-list").prepend('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container "><a href="/help/contact-us"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="/help/contact-us">Contact Support</a></div></li>');
        });
      </script>

   2. If you have the Home link enabled and you'd like this new link to appear right below the Home link, copy this script and paste it into the editor:

      <script>
        //Add Contact Support link to top of table of contents, after Home link
        $(function(){
          $(".documentation-outter-list li:eq(1)").before('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container "><a href="/help/contact-us"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="/help/contact-us">Contact Support</a></div></li>');
        });
      </script>

   3. If you'd like your new link to appear at the bottom of your table of contents after your final category, copy this script and paste it into the editor:

      <script>
        //Add Contact Support link to bottom of table of contents
        $(function(){
          $(".documentation-outter-list").append('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container "><a href="/help/contact-us"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="/help/contact-us">Contact Support</a></div></li>');
        });
      </script>

5. If you'd like to send this to your contact form, regardless of which script you chose above, if your knowledge base uses /docs or /home in the URL instead of /help, update the href="/help/contact-us" to be the appropriate URL (such as "/docs/contact-us" or "/home/contact-us").
6. To use a link that's not the Contact Form, replace the URL in href="/help/contact-us" with the URL you'd like to use. This can be a link to something else in your knowledge base (such as href="/help/add-a-category") or to something outside of your knowledge base (like href="https://www.knowledgeowl.com/terms-and-conditions")
7. We used the text label "Contact Support" for our example. To display a different text label, replace Contact Support with the text of your choice.
8. To use a different FontAwesome icon, replace the fa-life-ring in your script with the FontAwesome class for that icon.
9. You can Preview Changes to see how your code looks.
10. Be sure to Save your changes once you're done.

For example, here, we've chosen the 4a script, which will place our new link at the very top of the table of contents, above Home. We've adjusted the icon to use the phone icon ("fa-phone") and the text to read "Contact us". Here's how the script looks:

And here's how it displays in our table of contents:

Sample output from that script. Note that the link appears above Home since we chose script 3a.

New knowledge bases created with our default theme use these icons in the table of contents:

• A plus + icon when a category can be expanded to view content or is empty
• A minus - icon to collapse a category

Sample of our table of contents icons

You can change these icons:

1. Change to right/down chevrons like this:
   Sample table of contents with chevrons
2. Change to any icon of your choice, like a folder:
   
   Sample table of contents with folders
3. Change the "empty" category icon, which defaults to the closed category icon.

Refer to the detailed instructions below for each setup.

Change to chevrons

To change from the plus/minus icons to chevrons:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Locate the CSS that mentions the TOC and chevrons, usually at or near row 293:

   /* override default toc slideout behavior */
   .hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
     transform: translateX(360px);
     width: calc(100% - 360px);
   }
   /* Change TOC chevron-right to plus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-right:before {
     content: "\f0fe" !important;
   }
   /* Change TOC chevron-down to minus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-down:before {
     content: "\f146" !important;
   }
   /* make icons slightly larger */
   .hg-minimalist-theme .cat-icon, .hg-minimalist-theme .home-icon, .hg-minimalist-theme .alt-icon {
     padding: 8px 0 0 6px;
     font-size: 18px;
   }

4. Delete the CSS to "Change TOC chevron-right to plus-square" or "Change TOC chevron-down to minus-square", rows 293-300 in our example. Your CSS should now look like this:

   /* override default toc slideout behavior */
   .hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
     transform: translateX(360px);
     width: calc(100% - 360px);
   }
   /* make icons slightly larger */
   .hg-minimalist-theme .cat-icon, .hg-minimalist-theme .home-icon, .hg-minimalist-theme .alt-icon {
     padding: 8px 0 0 6px;
     font-size: 18px;
   }

5. Be sure to Save your changes.

Change to other icons

We use Font Awesome icons in the table of contents, and we recommend you change to other Font Awesome icons. Before you begin, you'll need to get the unicode of the icon(s) you want to use. To do so:

1. Open Font Awesome.
2. Search for the icon you want.
3. Select the icon to open its details.
4. Font Awesome displays the unicode value near the upper right. If you select or click on that Unicode, it should automatically copy to your clipboard. For example, if we wanted to use the circle plus icon, we'd select f055 to copy it.

Once you have the code value for the icon(s) you want to use:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Locate the CSS that mentions the TOC and chevrons, usually at or near row 293:

   /* override default toc slideout behavior */
   .hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
     transform: translateX(360px);
     width: calc(100% - 360px);
   }
   /* Change TOC chevron-right to plus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-right:before {
     content: "\f0fe" !important;
   }
   /* Change TOC chevron-down to minus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-down:before {
     content: "\f146" !important;
   }
   /* make icons slightly larger */
   .hg-minimalist-theme .cat-icon, .hg-minimalist-theme .home-icon, .hg-minimalist-theme .alt-icon {
     padding: 8px 0 0 6px;
     font-size: 18px;
   }

4. Replace the content value in row 295 with the unicode value of the icon you want to use instead of the plus square.
5. Replace the content value in row 299 with the unicode value of the icon you want to use instead of the minus square.
6. For example, this code will change the plus square to a closed folder and the minus square to an open folder:

   /* Change TOC chevron-right to plus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-right:before {
     content: "\f07b" !important;
   }
   /* Change TOC chevron-down to minus-square */
   .hg-minimalist-theme .documentation-categories .fa-chevron-down:before {
     content: "\f07c" !important;
   }

7. Be sure to Save your changes once you're done.

Change the "empty" category icon

Using the setups above, an "empty" category will get the same treatment as a collapsed category (a plus-square or a right-chevron).

In this knowledge base, we set a different icon for "empty" categories: a solid box:

Sample different icon for empty category

If you'd like to use a different icon for empty categories:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Select Body from the Select HTML section to edit dropdown.
4. Copy the code below and paste it into the bottom of the editor. This code will check to see if the category is empty; if it is empty, it will remove the chevron-right/plus-square and add the plain square icon.

   <script>
   $(function(){  
     // For Table of Contents items with no content, change remove chevron-right class and add plain square
          $('.nav-header-sub').each(function() {
             if($(this).find('ul').find('li').length < 1)  {
             $(this).find('i:not(".fa-home,.fa-envelope-o,.fa-book")').removeClass("fa-chevron-right").addClass("fa-square");
           };
         });
       });
   </script>

5. To use a different icon, copy the Font Awesome icon's class, like fa-folder-closed and replace fa-square in row 6 with that class. Keep the class "in-quotes".
6. Be sure to Save your changes once you're done.

The Minimalist theme uses a slideout Table of Contents, which is set to 360px by default.

If you'd like to change the width of that Table of Contents:

1. Go to Settings > Style.
2. Below the preview pane, select Custom HTML.
3. In the Custom HTML dropdown, select Body.
4. Copy and paste the code below anywhere into your Body Custom HTML, changing the value="number" to be the pixel width you'd like to use (here, we use 450):

   <input type="hidden" class="slideout-width" value="450">

   Sample Body Custom HTML
5. Now go to Custom CSS.
6. Copy and paste the code below into your Custom CSS, changing the width pixel number to match the width you used above (here, we're using 450 again):

   .slideout-menu {
     width: 450px;
   }

   Sample custom CSS
7. Save.

For comparison, here's what the knowledge base looked like before these changes, with the default 360px width:

Default 360px width on the Table of Contents

And here's what it looked like after, with the custom 450px width:

Custom 450px width on the Table of Contents

You might want to hide the table of contents completely in your knowledge base--maybe to save some screen real estate, or to force people to work through navigation, or simply because your knowledge base isn't complex enough to need a table of contents everywhere.

To do so, you'll need to use the Single Column layout:

1. Go to Settings > Style.
2. Expand the Layouts section.
   Click the Layouts header to expand the Layouts section
3. Click on the One Column layout option.
   Click on One Column
4. The Preview pane should update. Click the Save button to save these changes.

Depending on the Theme you're using, you may see other changes in various pages. We recommend doing a quick review of a few pages to be sure the new layout looks good. If you find specific pages that seem to need adjustment, contact us for help making those changes.