La table des matières (TOC) du site de la base de connaissances utilise par défaut des liens gris, avec l’en-tête actuellement actif mis en surbrillance en bleu. Vous pouvez changer ces deux couleurs avec Custom CSS pour améliorer la visibilité ou aligner la TOC avec votre marque. Ce changement s’applique à l’échelle mondiale à tous les articles du site.
Quand utiliser une couleur personnalisée de TOC
- Alignement de marque : associez la couleur du lien TOC à la couleur principale de votre produit afin que la barre latérale ait l’impression de faire partie du même design visuel.
- Améliorer la visibilité : augmenter le contraste entre les liens TOC et l’arrière-plan de la barre latérale pour faciliter la lecture de la navigation.
- Distinguez l’état actif : utilisez une couleur distincte pour l’en-tête actuellement actif afin d’aider les lecteurs à suivre leur position dans un article long.
Ces modifications CSS s’appliquent globalement à la table des matières de tous les articles de votre site de base de connaissances.
Petite référence
Utilisez ces extraits pour la version de votre site de base de connaissances. Remplacez les valeurs de couleur par vos codes hexadécimaux ou les noms de couleurs CSS souhaités.
Tous les liens TOC et icônes de basculement :
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
color: red !important;
}
Titre actuellement sélectionné (actif) uniquement :
d360-table-of-content .toc-item.selected a {
color: blue !important;
}
Comment changer la couleur de la table des matières
- Dans le portail de la Base de connaissances, rendez-vous dans Paramètres > site de la Base de connaissances > CSS & JavaScript personnalisés.
-
Sélectionnez l’onglet CSS et collez le extrait approprié.
Collez les deux extraits pour contrôler indépendamment la couleur par défaut du lien et la couleur active de l’en-tête. Si vous ne voulez en changer qu’un, collez uniquement le fragment pertinent. -
Remplacez les valeurs de couleur par vos couleurs désirées — utilisez un code hexadécimal (par exemple,
#1a73e8) ou un nom de couleur CSS (par exemple,steelblue). -
Cliquez sur Enregistrer.
Conséquences
Avant
Par défaut, les liens TOC apparaissent en gris, et l’en-tête actuellement actif est surligné en bleu.
Après
Après avoir sauvegardé le CSS, les liens TOC inactifs changent pour la couleur spécifiée (rouge dans cet exemple). La couleur active de l’en-tête est contrôlée séparément et reste bleue à moins que vous ne mettiez également à jour l’extrait d’en-tête sélectionné.
