The table of contents (TOC) on the Knowledge base site uses grey links by default, with the currently active heading highlighted in blue. You can change both of these colors using Custom CSS to improve visibility or align the TOC with your brand. The change applies globally across all articles on the site.
When to use a custom TOC color
- Brand alignment: match the TOC link color to your product's primary color so the sidebar feels part of the same visual design.
- Improve visibility: increase contrast between the TOC links and the sidebar background to make navigation easier to read.
- Distinguish active state: use a distinct color for the currently active heading to help readers track their position in a long article.
These CSS changes apply globally to the table of contents across all articles on your Knowledge Base site.
Quick reference
Use the snippets for your Knowledge base site version. Replace the color values with your desired hex codes or CSS color names.
All TOC links and toggle icons:
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
color: red !important;
}
Currently selected (active) heading only:
d360-table-of-content .toc-item.selected a {
color: blue !important;
}
How to change the table of contents colour
- In the Knowledge Base portal, go to Settings > Knowledge base site > Custom CSS & JavaScript.
-
Select the CSS tab and paste the appropriate snippet.
Paste both snippets to control the default link color and the active heading color independently. If you only want to change one, paste only the relevant snippet. -
Replace the color values with your desired colors — use a hex code (for example,
#1a73e8) or a CSS color name (for example,steelblue). -
Click Save.
Outcome
Before
By default, TOC links appear in grey, and the currently active heading is highlighted in blue.
After
After saving the CSS, the inactive TOC links change to the specified color (red in this example). The active heading color is controlled separately and remains blue unless you also update the selected heading snippet.
