Hoe verander je de hoverkleur van de headeropties

Standaard tonen headernavigatielinks op je kennisbanksite geen kleurverandering wanneer lezers eroverheen zweven. Het toevoegen van een hover-kleur geeft lezers een duidelijk visueel signaal dat de headeropties interactieve links zijn, verbetert de navigatiebruikbaarheid en stelt je in staat het hover-effect af te stemmen op je merkpalet.

Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

• Laat headernavigatielinks visueel reageren op hover, zodat lezers ze als klikbaar herkennen.
• Pas een merkconsistente hoverkleur toe op de headernavigatie over je hele kennisbasissite.
• Vervang het hovergedrag van een standaard thema dat niet aansluit bij jouw ontwerpvereisten.

Voordat je begint

• Je hebt toegang nodig tot Instellingen (
  ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.
• Zorg dat je gewenste HEX-kleurcode klaar is. Het standaardfragment wordt gebruikt red als tijdelijke aanduiding; vervang dit door je daadwerkelijke kleurwaarde.

Hoe verander je de hoverkleur van de header

1. Navigeer naar Instellingen (

   ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.

   

2. Selecteer in het linker navigatiepaneel het CSS-tabblad en plak het volgende fragment.

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

3. Vervang red bijvoorbeeld door de gewenste hoverkleur, een HEX-waarde zoals #0077cc een RGB-waarde.

4. Klik op Opslaan.

   

Uitkomst

Voorheen

Wanneer lezers met de muis over de navigatieopties van de header gaan, is er geen kleurverandering en verschijnen de links statisch.

Na

Wanneer lezers met de muis over de navigatieopties in de header gaan, verandert de linkkleur naar de gespecificeerde kleur, wat duidelijke visuele feedback geeft dat het item interactief is.

Best practices

• Gebruik een HEX- of RGB-kleurwaarde in plaats van een kleurnaam. CSS-kleurnamen zijn red onnauwkeurig en komen zelden exact overeen met merkpaletten. Vervang red door je specifieke HEX-code voor nauwkeurige en consistente resultaten.
• Zorg ervoor dat de hoverkleur contrasteert met de achtergrond van de header. Een hoverkleur die te dicht bij de achtergrondkleur van de header ligt, zal onmerkbaar zijn. Test de visuele verandering in je live kennisbank na het opslaan.
• Behoud !important. De Knowledge Base-site hanteert zijn eigen themastijlen die de standaard CSS-specificiteit kunnen overschrijven. Verwijderen !important kan ervoor zorgen dat de hover-kleur niet meer wordt toegepast in sommige themaconfiguraties.
• Test na het opslaan. Open je kennisbanksite en muis met de muis over elk headernavigatieitem om te bevestigen dat de kleurverandering zichtbaar en consistent is over alle links.