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!