> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# De lay-out van de banner aanpassen (Legacy-versie)

Je kunt de lay-out en styling van je banner rechtstreeks in de applicatie aanpassen. Zo creëer je een look-and-feel die past bij de huisstijl en gebruikerservaring van je organisatie.

Om deze opties te openen, ga je naar:
**Cookie banner > Style**

### Position

Kies waar en hoe de banner op je website verschijnt:

1. **Popup:** Gecentreerd op het scherm.
2. **Overlay:** Werkt als de popup, maar blokkeert de pagina totdat de gebruiker met de banner werkt.
3. **Bar at the top:** Vast bovenaan het scherm.
4. **Bar at the top (pushdown):** Schuift van boven naar beneden en duwt de inhoud omlaag. (Opmerking: werkt mogelijk niet goed met sticky headers.)
5. **Floating at the top left:** Linksboven geplaatst met een kleine marge.
6. **Floating at the top center:** Bovenaan in het midden geplaatst met een kleine marge.
7. **Floating at the top right:** Rechtsboven geplaatst met een kleine marge.
8. **Bar at the bottom:** Vast onderaan het scherm.
9. **Floating at the bottom left:** Linksonder geplaatst met een kleine marge.
10. **Floating at the bottom center:** Onderaan in het midden geplaatst met een kleine marge.
11. **Floating at the bottom right:** Rechtsonder geplaatst met een kleine marge.

    
### Theme

Selecteer een thema om padding, knopstijl en uiterlijk te bepalen:

1. **Block:** Kleine padding, vierkante knoppen met proportionele breedte.
2. **Classic:** Kleine padding, afgeronde knoppen van gelijke breedte.
3. **Edgeless:** Geen padding, vierkante knoppen van gelijke breedte.
4. **Wired:** Hetzelfde als Block, maar met omgekeerde knopachtergronden en -kleuren.

**Vergelijkingstabel van thema's**

| Thema | Padding | Knopstijl | Knopbreedte |
| ---- |
| **Block** | Klein | Vierkant | Proportioneel |
| **Classic** | Klein | Afgerond | Gelijk |
| **Edgeless** | Geen | Vierkant | Gelijk |
| **Wired** | Klein | Vierkant (omgekeerde kleuren) | Proportioneel |

### Text Alignment

Geldt voor de titel, het bericht en het logo van de banner:

* Left
* Center
* Right

### Width

Past de breedte van de banner aan met **em-eenheden** (relatief aan de lettergrootte). Voorbeeld: `2em` = tweemaal de lettergrootte.

* Wordt bediend met een schuifregelaar.
* Werkt met live voorvertoning voor directe resultaten.
* Handig voor langere berichten of knoplabels.
* Opmerking: geldt alleen voor **banner**-posities, niet voor balken (balken beslaan altijd de volledige breedte).

### Font Size

Past de tekstgrootte aan met **px-eenheden**. Voorbeeld: `1px = 1/96e van 1 inch`.

* Wordt bediend met een schuifregelaar.
* Werkt met live voorvertoning.
* Standaard de grootte die door het thema van je winkel is ingesteld.

### Padding

Past de ruimte binnen de banner aan met **px-eenheden**.

* Wordt bediend met een schuifregelaar.
* Werkt met live voorvertoning.
* Standaardwaarden verschillen per thema.
* Opmerking: niet ondersteund met het thema **Edgeless**.

### Colors

Pas de kleuren van de banner en knoppen aan:

* Kies uit een palet of definieer eigen kleuren.
* Ondersteunt de formaten **Hex** (bijv. `#123456`) en **RGBA**.
* RGBA voegt ondersteuning voor transparantie toe naast de waarden voor rood, groen en blauw.

### Font Family

Standaard erft de banner het lettertype van het thema van je winkel. Je kunt ook kiezen uit webveilige lettertypen die in alle browsers worden ondersteund:

* Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
* Times New Roman, Didot, Georgia, American Typewriter
* Andalé Mono, Courier, Lucida Console, Monaco
* Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Als je een eigen lettertype wilt gebruiken, laad dat dan eerst in de assets van je winkel en maak het beschikbaar in je CSS-bestand.

### z-index

Bepaalt de **stapelvolgorde** van de banner.

* Hogere waarden zorgen ervoor dat de banner boven andere pagina-elementen verschijnt.
* Pas aan bij conflicten met andere apps of scripts.

### Container ID

Bepaalt de HTML-ID van de bannercontainer.

* Wijzig dit alleen als je de banner moet aanspreken met aangepaste scripts of CSS-selectors.

### Banner Shadow

Voegt een schaduw achter de banner toe.

* Handig wanneer de kleuren van banner en achtergrond op elkaar lijken, wat de zichtbaarheid verbetert.

### Animation

Schakelt animaties in voor het verschijnen en sluiten van de banner:

* Fade-in / slide-in bij openen.
* Fade-out / slide-out bij sluiten.

Geldt ook voor de link **Re-open banner (Revoke)**, als die is ingeschakeld onder **Behavior**.

* Opmerking: niet door alle browsers ondersteund.

### Custom CSS

Voeg je eigen CSS-regels toe voor extra aanpassingen.

* Handig voor het afstemmen van knopgroottes, randkleuren, tussenruimte en meer.

### Videohandleiding

${youtube}[How to customize your cookie banner in Pandectes GDPR compliance](Q_fGcnwDQxk)