---
title: "Hoe de kleur van de inhoudsopgave te veranderen"
slug: "how-to-change-the-color-of-the-table-of-contents"
description: "You would want to change the color of the table of contents to showcase it better. "
tags: ["Customization"]
updated: 2026-06-22T09:03:37Z
published: 2026-06-22T09:03:37Z
canonical: "docs.document360.com/how-to-change-the-color-of-the-table-of-contents"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hoe de kleur van de inhoudsopgave te veranderen

De inhoudsopgave (TOC) op de Knowledge Base-site gebruikt standaard grijze links, waarbij de momenteel actieve kop blauw is gemarkeerd. Je kunt beide kleuren veranderen met Custom CSS om de zichtbaarheid te verbeteren of de TOC af te stemmen op je merk. De wijziging geldt wereldwijd voor alle artikelen op de site.

---

## Wanneer gebruik je een aangepaste TOC-kleur

- **Merkafstemming**: stem de kleur van de TOC-link af met de primaire kleur van je product, zodat de zijbalk als onderdeel van hetzelfde visuele ontwerp aanvoelt.
- **Verbeter de zichtbaarheid**: verhoog het contrast tussen de TOC-links en de achtergrond in de zijbalk om navigatie beter leesbaar te maken.
- **Onderscheid actieve toestand**: gebruik een aparte kleur voor de momenteel actieve kop om lezers te helpen hun positie in een lang artikel te volgen.

 OPMERKING

Deze CSS-wijzigingen zijn wereldwijd van toepassing op de inhoudsopgave in alle artikelen op uw Knowledge Base-site.

---

## Snelle referentie

Gebruik de fragmenten voor je Knowledge Base-siteversie. Vervang de kleurwaarden door de gewenste hexcodes of CSS-kleurnamen.

**Alle TOC-links en schakelaariconen:**

```
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
    color: red !important;
}
```

**Momenteel geselecteerde (actieve) kop alleen:**

```
d360-table-of-content .toc-item.selected a {
    color: blue !important;
}
```

---

## Hoe de kleur van de inhoudsopgave te veranderen

1. Ga in het Knowledge Base-portaal naar **Instellingen** > **Knowledge Base-site** > **Custom CSS & JavaScript**.

![Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)

1. Selecteer het **CSS-tabblad** en plak het juiste fragment. Plak beide snippets om de standaardlink kleur en de actieve kopkleur onafhankelijk te bedienen. Als je er maar één wilt veranderen, plak dan alleen het relevante fragment.
2. Vervang de kleurwaarden door de gewenste kleuren — gebruik een hex-code (bijvoorbeeld `#1a73e8`) of een CSS-kleurnaam (bijvoorbeeld `steelblue`).
3. Klik **op Opslaan**.

![Custom CSS editor showing the table of contents color snippets pasted in the CSS tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20color%20of%20toc.png)

---

## Uitkomst

### Voorheen

Standaard verschijnen TOC-links grijs en is de momenteel actieve kop blauw gemarkeerd.

![Knowledge Base site showing the default table of contents with grey links and the active heading highlighted in blue.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot_Before_color_of_table_of_Content.png)

### Na

Na het opslaan van de CSS veranderen de inactieve TOC-links naar de gespecificeerde kleur (rood in dit voorbeeld). De actieve kopkleur wordt apart bestuurd en blijft blauw, tenzij je ook het geselecteerde kopstukje bijwerkt.

![Knowledge Base site showing the table of contents with links changed to red and the active heading remaining highlighted in blue.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot_After_color_of_table_of_Content.png)