---
title: "Aanpasbare callouts"
slug: "callout-styles"
description: "Learn how to highlight and style important info in Document360 using custom callouts with our step-by-step guide."
tags: ["Add code snippets", "Custom CSS", "Callout"]
updated: 2026-06-22T09:03:17Z
published: 2026-06-22T09:03:17Z
canonical: "docs.document360.com/callout-styles"
---

> ## 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.

# Aanpasbare callouts

Document360 biedt vier ingebouwde callouttypes - Info, Warning, Error en Success - elk met een eigen standaardkleur. Het **Change callout colors** CSS-snippet laat je deze standaardkleuren overschrijven om bij je merkpalet te passen. Kleurwijzigingen gelden wereldwijd in je hele kennisbank - alle callouts van hetzelfde type worden tegelijk bijgewerkt.

---

## Callout-types

| Type | Standaardkleur | Doel |
| --- | --- | --- |
| **Info** | Blauw | Extra context, nuttige tips of aanvullende informatie |
| **Waarschuwing** | Geel | Mogelijke problemen, belangrijke overwegingen of acties met onbedoelde gevolgen |
| **Fout** | Rood | Bekende fouten, faaltoestanden of acties die vermeden moeten worden |
| **Succes** | Groen | Voltooide stappen, positieve resultaten of aanbevolen configuraties |

1. **Info**

Je titel hoort hier

Je inhoud hoort hier

1. **Waarschuwing**

Je titel hoort hier

Je inhoud hoort hier

1. **Fout**

Je titel hoort hier

Je inhoud hoort hier

1. **Succes**

> [!TIP]
> **Je titel hoort hier**
> 
> 
> Je inhoud hoort hier

---

## Hoe je calloutkleuren kunt aanpassen

1. Ga naar  () > **Knowledge base site** in de linker navigatiebalk van het Knowledge Base-portaal.
2. Navigeer in het linker navigatiepaneel naar **Site-aanpassing**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)

1. Klik **op Custom CSS & JavaScript**.
2. Selecteer het **CSS-tabblad** en klik vervolgens op **Voeg code snippets toe aan** de rechterkant.

Het **panel 'Add code snippets'** verschijnt.

![Add code snippets panel showing the Change callout colors option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771842590625.png)

1. Selecteer **'Wissel de kleuren van de oproep'.** Het fragment wordt in de CSS-editor geplaatst en toont de bestaande kleurwaarden voor alle vier de callout-typen.
2. Bewerk de kleurwaarden in de code om je merkkleuren toe te passen.
3. Klik **op Opslaan**.

![CSS editor showing the Change callout colors snippet with color values for Info, Warning, Error, and Success callouts](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771842608522.png)

De bijgewerkte kleuren worden toegepast op alle callouts van elk type in de gehele kennisbasis.

---

## Best practices

- **Preview in zowel lichte als donkere modus** - kleuren die er goed uitzien in lichte modus kunnen contrast- of leesproblemen hebben in donkere modus. Controleer altijd beide na het opslaan.
- **Verander kleuren globaal, niet per callout** - het snippet werkt alle callouts van een bepaald type tegelijk bij. Als je een eenmalige kleur nodig hebt, gebruik dan inline CSS in het artikel.
- **Houd het doel van de callout afgestemd op de kleur** – vermijd het gebruik van kleuren die conflicteren met de betekenis van de callout. Bijvoorbeeld, het gebruik van rood voor een Info-melding kan lezers verwarren.

---

## FAQ

**Kan ik callout-kleuren stylen in de donkere modus?**

Ja. Voor meer informatie, zie [Hoe je de kleur van de callouts verandert in de donkere modus](https://docs.document360.com/docs/nl/how-to-change-the-callouts-color-in-dark-mode).

**Kan ik de kleur van één enkele callout veranderen zonder dat het invloed heeft op alle andere van hetzelfde type?**

Nee. Het knipsel 'Verander' van de callout kleuren geldt wereldwijd voor alle callouts van hetzelfde type in de gehele kennisbasis. Individuele callout-kleuroverschrijvingen worden niet ondersteund door het fragment - je zou inline CSS direct aan het artikel moeten toevoegen voor eenmalige wijzigingen.

## Related

- [Hoe verander je de kleur van de callouts in de donkere modus](/how-to-change-the-callouts-color-in-dark-mode.md)
- [Aangepaste lettertypestijl van de hoofdtekst](/body-font-style.md)
- [Headerlettertype aanpassen](/header-font-style.md)