Table of contents ( TOC )
Overview
The table of contents ( TOC ) is a list of article headings that your readers can easily navigate to skip part of the article and find what they need fast.
Features:
- The TOC list is generated automatically.
- The generated list is based on headings in the article: H1 - H6 or H2 - H3, for example.
- When a reader clicks on the TOC headings, it will scroll the page down to that specific heading.
- The TOC is sticky, ie., it follows the reader down the page. As the reader scrolls up or down, so will the TOC.
Common TOC Questions
Open the TOC Settings
-
Click on the Navigation button
-
Click on the TOC Link
Note: If you have the TOC active in the left sidebar you will see it under the left sidebar in the navigation.Â
-
Or, simply click on the TOC to load its settings.
Open the KB Editor.
Turn TOC ON
-
Click on the Navigation button
-
Click on the Disabled Sections tab
-
Turn on the TOC
Open the KB Editor.
Change TOC Text
-
Click on the Content tab
-
Change the TOC Title.
Open the KB Editor, and click on the TOC to load the settings for it.
Change TOC Colors
-
Click on the Style tab
-
TOC Title Colors
- Typography: Change the font size, font-weight, and font family
- Title: Color of the text
- Container Background:Â Background behind the title.
- Border: The border around the whole TOC.
-
TOC Headings are the headings generated based on the page.Â
- Typography: Change the font size, font-weight, and font family
- Headings: Color of the text, for all headings.
- Active Background:Â The active background color for the heading.
- Active Heading: The active text color.
- Hover: Background: The mouse hover background color.
- Hover Text: The mouse hover text color
Open the KB Editor, click on the TOC to load the settings for it.
TOC Location and Other Features
-
Click on the Features tab
-
Display on the Left: This displays the TOC on the left sidebar. The number value will set its priority on the left sidebar; the lower the number, the lower down the sidebar it is positioned.
-
Display Above the Article: Use this if you want the TOC above the article content in the middle of the page.Â
-
Display on the Right: This displays the TOC on the right sidebar. The number value will set its priority on the right sidebar; the lower the number, the lower down the sidebar it is positioned.
-
Border Style: This is the option to have a border between the article and the TOC or all the way around the TOC.
-
Header Range:Â The header Range is the range of headings the TOC will display, for example h2 – h6.
- From Hx: The starting point in this example is the value 2, so H2 headings will be included in the TOC.Â
- To Hy: The end of the range.
To learn more about web headings click here.
-
Heading position:Â This is the offset after the user clicks on the heading and the page scrolls to the heading. If the heading is not vertically aligned, that is, if the heading isn’t fully visible, adjust this value and add pixels to move it down further.Â
Open the KB Editor, and click on the TOC to load the settings for it.
Excluding Headings and Mobile Settings.
-
Click on the Advanced Tab
-
CSS Class to exclude headers from the TOC: to exclude certain headings from the TOC, assign a CSS class to the heading and enter that value into this box.
-
Container Width: this sets the overall TOC width. The desktop value is the width on desktop screens. Tablet value is the width on tablet screen sizes.
-
Starting Resolutions for Widths: These are the resolution sizes that are triggered for certain screen sizes.
Open the KB Editor, and click on the TOC to load the settings for it.
Troubleshooting
/*
The .container class needs to be change to the container class of your active themes classes. It could be even the HTML Tag or BODY Tag.
*/
.container {
overflow: initial !important;
}
This article's heading and Hotspots are built with our Creative Addons plugin.
