Table of contents & organization

Display categories open by default

Depending on your audience and the size of your knowledge base, you may want to open your categories in the table of contents by default. 

Sample expanded categories

To set this up:

  1. Go to Settings > Basic.
  2. In the Table of contents section, check the option to that says "All categories open by default".
  3. Save and your categories will be open by default.
    Note: You can also set individual categories and sub-categories to show as open or closed by editing them and choosing the appropriate override in the Table of contents display section in the righthand column:

    Override the default TOC behavior editing a specific category

Add Home button to table of contents

While your uploaded logo is automatically linked to your knowledge base home page, you might want to add a button or a link for readers to easily navigate back.

Sample home button in TOC

To add a home button to the top of your table of contents:

  1. Go to Settings > Basic.
  2. In the Table of contents section, check the box next to "Add a homepage link to the top of the table of contents".
  3. Save. You should now see the Home link in your TOC.

Add search bar to table of contents

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.

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

  1. Go to Settings > Basic.
  2. In the Table of contents section, check the box next 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.

Add glossary link to table of contents

If you're using the Glossary, you can add a link to the glossary to your table of contents.

To add a glossary link to the top of your table of contents:

  1. Go to Settings > Basic.
  2. In the Table of contents section, check the box next to "Add a glossary link to the top of the table of contents".
  3. Save. You should now see the glossary at the top of your TOC.

Add a link to the full PDF download to table of contents

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.

To add a link to the full PDF download to the bottom of your table of contents:

  1. Go to Knowledge Base > Exports.
  2. In the Standard PDF tab, check the box next to "Add a full PDF download link to the knowledge base table of contents." In the Table of contents section, check the box next to "Add a full PDF download 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 TOC.

Note: this PDF will not automatically update as you update content. Be sure to regenerate the PDF periodically!

Add contact us link to table of contents

You can add links to your table of contents by adding a little code to your Custom HTML. 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:

Sample Contact Support link in TOC

  1. Go to Settings > Style.
  2. Select Custom HTML > Body.
  3. Paste the script below into the bottom of the text area. If your knowledge base uses /docs/ or /home/ rather than /help/, be sure you update the highlighted portion in the script to match:
    <script>
    $(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>    
      A completed script might look like this:
    Sample script added to Custom HTML > Body
  4. Click Save.
    Note: you can also adjust the script so that it puts the link at the bottom of the Table of Contents by changing "prepend" to "append":
    <script>
    $(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>

    Sample link at bottom of TOC

If you are using a home button in your table of contents, the above code snippet will add the Contact Us link above the Home button. If you want it below the Home button, use the following code instead:

<script>
$(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>

Pro Tip: Want a different icon? Check out all the cool icons over at Font Awesome.  Replace "fa-life-ring" in the code with the icon of your choice.

Change the width when the table of contents collapses

By default, KnowledgeOwl uses CSS media queries to toggle when the table of contents in the right column collapses and when it is fully shown. These rules are written based off standard screens such as computer monitors, laptop screens, iPads, and smart phones. If you would like to override these default settings, you can take the following steps to do so.

In this example we are going to pretend that we have an iPad screen for which we don't want to collapse the table of contents.

  1. Open up a browser on your iPad (or other device).
  2. Go to a site like http://whatsmy.browsersize.com/ to find your device's window width. You will want to choose a width less than the size of your iPad to prevent it from collapsing. In this example, we want something less than 843px. Let's choose 840px.
  3. Go to Settings > Style in KnowledgeOwl.
  4. Scroll down to the Custom CSS section.
  5. Paste the following code into Custom CSS
    /* show toc until 840px screen width */
    @media (min-width: 840px) {
      .hg-site .documentation-categories {
        height: 100% !important;
        display: block !important;
        margin-bottom: 20;
        min-height: 100%;
        position: fixed;
        width: 33.3333%;
        overflow-y: auto;
        z-index: 2;
        border-right: 1px solid #C5C5C5;
      }
    }
    /* toggle toc at screen width less than 840px */
    @media (max-width: 839px) {
      .hg-site .documentation-categories {
        min-height: 0;
      }
    }
    /* toc needs less room on very large screens */
    @media (min-width: 1200px) {
      .hg-site .documentation-categories {
        width: 25%;
      }
    }
    /* give toc room at 840px screen width and up */
    @media (min-width: 840px) {
      .hg-site-body .documentation-article {
      	margin-left: 33.3333%;
      }
    }
    /* large screens do not need as much room for toc */
    @media (min-width: 1200px) {
      .hg-site-body .documentation-article {
        margin-left: 25%;
      }
    }
    /* override when to show toc toggle button */
    @media (max-width: 991px) {
      body .toc-toggle {
        display: none;
      }
    }
    /* show toc toggle button at less than 840px screen width */
    @media (max-width: 839px) {
      body .toc-toggle {
        display: block;
      }
    }
    /* override extra padding given to body for toc toggle button */
    @media (max-width: 991px) {
      .hg-site-body {
        padding-top: 7em;
      }
    }
    /* new width to add padding for toc toggle button */
    @media (max-width: 839px) {
      .hg-site-body {
        padding-top: 10em;
      }
    }
    /* very small screens do not need the padding here */
    @media (max-width: 767px) {
      .hg-site-body {
        padding-top: 0;
      }
    }
  6. Replace all "840px" with your desired width from Step 1. 
  7. Replace all "839px" with your desired width minus 1.
  8. Click Save and you should be ready to go!

Change the slideout Table of Contents' width (Minimalist Theme)

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. Go to Custom HTML > Body.
  3. 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">
    Screenshot of the Style Settings Body Custom HTML, showing the sample code addedSample Body Custom HTML
  4. Still in Settings > Style, go to Custom CSS.
  5. 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;
    }
    Screenshot showing the Style Settings Custom CSS with the sample code addedSample custom CSS
  6. 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


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