Comment changer la couleur de survol des options d’en-tête

Par défaut, les liens de navigation des en-têtes sur votre site de base de connaissances ne changent pas de couleur lorsque les lecteurs les survolent. Ajouter une couleur de survol permet aux lecteurs de montrer clairement que les options d’en-tête sont des liens interactifs, améliore l’utilisabilité de la navigation et permet d’aligner l’effet de survol avec la palette de votre marque.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Faites en sorte que les liens de navigation d’en-tête répondent visuellement au survol afin que les lecteurs les reconnaissent comme cliquables.
• Appliquez une couleur de survol cohérente avec la marque à la navigation des en-têtes sur l’ensemble de votre site de base de connaissances.
• Remplacez le comportement de survol par défaut d’un thème qui ne correspond pas à vos besoins de conception.

Avant que tu commences

• Vous avez besoin d’accéder aux paramètres (
  ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
• Ayez le code couleur HEX désiré prêt. Le extrait par défaut est utilisé red comme un marque-place ; remplacez-le par votre valeur de couleur réelle.

Comment changer la couleur de survol de l’en-tête

1. Naviguer dans les paramètres (

   ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.

   

2. Dans le panneau de navigation de gauche, sélectionnez l’onglet CSS et collez le extrait suivant.

a[role="menuitem"]:hover {
    color: red !important;
    text-decoration: none;
}

3. Remplacez red par la couleur de survol souhaitée, par exemple une valeur HEX telle que #0077cc ou une valeur RVB.

4. Cliquez sur Enregistrer.

   

Conséquences

Avant

Lorsque les lecteurs survolent les options de navigation de l’en-tête, il n’y a pas de changement de couleur et les liens apparaissent statiques.

Après

Lorsque les lecteurs survolent les options de navigation de l’en-tête, la couleur du lien change pour la couleur spécifiée, offrant un retour visuel clair que l’élément est interactif.

Meilleures pratiques

• Utilisez une valeur de couleur HEX ou RGB plutôt qu’un nom de couleur. Les noms de couleurs CSS comme red sont imprécis et correspondent rarement exactement aux palettes de marques. Remplacez red par votre code HEX spécifique pour des résultats précis et cohérents.
• Assurez-vous que la couleur du survol contraste avec l’arrière-plan de l’en-tête. Une couleur de survol trop proche de la couleur d’arrière-plan de l’en-tête sera imperceptible. Testez le changement visuel dans votre base de connaissances en direct après l’enregistrement.
• Conserver !important. Le site de la base de connaissances applique ses propres styles de thèmes qui peuvent passer outre la spécificité CSS standard. Retirer !important peut faire en sorte que la couleur de flottement ne s’applique pas dans certaines configurations thématiques.
• Test après avoir sauvegardé. Ouvrez votre site de base de connaissances et survolez chaque élément de navigation de l’en-tête pour confirmer que le changement de couleur est visible et cohérent sur tous les liens.