---
title: "Hoe verander je de kleur van de gemarkeerde zoekresultaten in artikelen"
slug: "how-to-change-the-highlighted-search-result-color-in-articles"
description: "When you have enabled the highlight matching search keyword in the articles option, the search keywords present in the article will be highlighted."
tags: ["Customization"]
updated: 2026-06-22T09:03:37Z
published: 2026-06-22T09:03:37Z
canonical: "docs.document360.com/how-to-change-the-highlighted-search-result-color-in-articles"
---

> ## 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 verander je de kleur van de gemarkeerde zoekresultaten in artikelen

Wanneer de instelling **'Highlight Matching Search Keywords in Articles'** is ingeschakeld, markeert Document360 automatisch de zoekterm waar deze ook in een artikel voorkomt. De standaard highlightkleur is geel. Je kunt dit bijvoorbeeld overschrijven met een aangepaste kleur om bij je merkpalet te passen of het contrast te verbeteren, zowel voor de lichte als donkere modi.

---

## Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

- Vervang de standaard gele highlight door een kleur die past bij je merk of sitethema.
- Verbeter de zichtbaarheid van zoektermmarkeringen ten opzichte van de achtergrondkleur van je kennisbasis.
- Pas consistente highlightstyling toe in zowel lichte als donkere modi.

---

## Voordat je begint

- De instelling **'Highlight Matching Search Keywords in Articles'** moet ingeschakeld zijn om überhaupt zoekmarkeringen te laten verschijnen. Schakel het in onder **Instellingen** (

) > **kennisbanksite** > **site-aanpassing** voordat je deze CSS toepast.
- Je hebt toegang nodig tot **Instellingen** (

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

---

## Hoe verander je de kleur van de zoekwoordmarkering

1. Navigeer naar **Instellingen** (

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

![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
2. Selecteer in het linker navigatiepaneel het **tabblad CSS** en plak het volgende fragment:

```
.fp-search-content em, .search-content em {
    background-color: #4E1E66;
    color: white;
}
```

> In de voorbeeldfragmenten hierboven worden groen en paars gebruikt als voorbeeldkleuren met witte tekst. Vervang deze door de gewenste kleurwaarden.

1. Werk de `background-color` en-waarden `color` bij naar de gewenste kleuren.
2. Klik **op Opslaan**.

![CSS tab showing the search highlight color snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20highlighted%20search%20result%20color.png)

---

## Uitkomst

**Voorheen**

Zoekwoorden worden gemarkeerd met de standaard gele kleur die door Document360 wordt aangeboden.

![Search results showing the default yellow highlight color before applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Highlighted%20search%20result%20-%20Before.png)

**Na**

Zoekwoorden worden gemarkeerd met de aangepaste achtergrondkleur `#4E1E66` en witte tekst na het toepassen van de CSS.

![Search results showing the custom purple highlight color after applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Highlighted%20search%20result%20-%20After.png)

---

## Best practices

- **Kies een highlightkleur die contrasteert met zowel je paginaachtergrond als je tekst.** Een hooglichtkleur die opgaat in de achtergrond is onzichtbaar; Een die botst met de tekstkleur vermindert de leesbaarheid. Test je gekozen combinatie in zowel Licht- als Donkermodus.
- **Houd de tekstkleur (`color`) synchroon met de achtergrond van je highlights.** Het fragment stelt zowel de achtergrond van de markering (`background-color`) als de tekstkleur (`color`) in binnen de markering. Als je de achtergrond verandert naar een donkere kleur, gebruik `white` het dan voor de tekst. Als je een lichte achtergrond gebruikt, gebruik dan een donkere tekstkleur.
- **Gebruik HEX- of RGB-waarden in plaats van kleurnamen.** CSS-kleurnamen zoals `green` zijn onnauwkeurig. Vervang ze door je specifieke HEX-code voor nauwkeurige en brandconsistente resultaten.
- **Controleer of de instelling Highlight Matching Search Keyword is ingeschakeld.** Als de highlights niet verschijnen na het toepassen van de CSS, controleer dan of de functie is ingeschakeld. De CSS-wijziging beïnvloedt alleen de kleur — het kan de functie zelf niet activeren.