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.
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
- Ga in het Knowledge Base-portaal naar Instellingen > Knowledge Base-site > Custom CSS & JavaScript.
-
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. -
Vervang de kleurwaarden door de gewenste kleuren — gebruik een hex-code (bijvoorbeeld
#1a73e8) of een CSS-kleurnaam (bijvoorbeeldsteelblue). -
Klik op Opslaan.
Uitkomst
Voorheen
Standaard verschijnen TOC-links grijs en is de momenteel actieve kop blauw gemarkeerd.
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.
