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

# Aangepaste styling met CSS (Legacy-banner)

### Overzicht

Bij de Legacy-banner staan de meeste uiterlijke opties op **Cookie banner > Style**: lay-out (positie, breedte, thema), kleuren, logo, lettertypen, **z-index** en animaties. Gebruik **aangepaste CSS** alleen wanneer die velden niet genoeg zijn.

||| **Aangepaste CSS / geavanceerde styling is beschikbaar voor betaalde abonnementen** (bijvoorbeeld Plus en hoger), niet in het gratis Basic-abonnement.

||| **Legacy-banner.** Voor winkels **zonder** het label **New version** bij **Cookie banner**. Voor de nieuwe banner, zie [How to switch to the new banner or switch back to the previous version](/nl/article/overstappen-naar-de-nieuwe-banner-of-terug-naar-de-vorige-versie-1l5zakw/).

Stappen voor de nieuwe banner: [Custom styling with CSS](/nl/article/aangepaste-styling-met-css-xah8nh/).

### Waar voeg je CSS toe (Legacy-banner)

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ga naar **Cookie banner**.
3. Controleer dat je het label **New version** **niet** ziet (de Legacy-UI gebruikt de tabbladen **Behavior**, **Style** en **Content**).
4. Open het tabblad **Style**.
5. Gebruik **Layout**, **Colors** en **Advanced styling** voor lettertypen, **z-index** en animaties.
6. Voeg aangepaste regels toe in het gebied **custom CSS** op het tabblad Style (inbegrepen bij **Advanced styling** in betaalde abonnementen).
7. Klik op **Save** en test op de webshop in een privévenster.

### Hoe de Legacy-banner in de DOM verschijnt

Typische roots op de webshop:

* `#pandectes-banner`
* CookieConsent-klassen: `.cc-window`, `.cc-message`, `.cc-compliance`, `.cc-btn`

Thema-CSS **kan** de Legacy-banner beïnvloeden, omdat die niet in een shadow root zit zoals de nieuwe banner. Gebruik toch bij voorkeur het CSS-veld bij **Style** in Pandectes, zodat de regels meegaan met je Pandectes-instellingen.

### Gebruik eerst de app-instellingen voordat je CSS gebruikt

| Doel | Locatie in Legacy |
| --- | --- |
| Positie: balk, zwevend of popup | **Style > Layout > Position** |
| Breedte | **Style > Layout > Width** |
| Kleuren | **Style > Colors** |
| Logo | **Style > Banner logo** |
| Lettertypen | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Knoplabels | Tabblad **Content** |

### Voorbeeldselectors (controleer op je winkel)

Beperk regels waar mogelijk tot de banner-root:

#### Bannervenster

```css
#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}
```

#### Berichttekst

```css
#pandectes-banner .cc-message {
  font-size: 14px;
}
```

#### Knoppen Accept / Decline

```css
#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}
```

#### Voorkeuren-popup

Open het voorkeurenpaneel in je winkel en inspecteer de klassenamen. Die verschillen per bannertype (**Preferences**, **Informative**, enz.). Zie [Cookie Banner Modes (Legacy Version)](/nl/article/cookiebannermodi-legacy-versie-yo9ymf/).

### De live banner inspecteren

1. Open de webshop terwijl de banner zichtbaar is.
2. Klik met de rechtermuisknop op de banner en kies **Inspect**.
3. Controleer `#pandectes-banner` of `.cc-window` in de DOM.
4. Kopieer klassenamen van de knooppunten die je wilt stijlen. Plak geen selectors uit de handleiding voor de nieuwe banner (`dialog.notice`, `pandectes-cmp`).

### Upgraden naar de nieuwe banner

Aangepaste CSS van Legacy **wordt niet automatisch gemigreerd**. Maak na de upgrade de regels opnieuw aan onder **Style > Custom styling** in de nieuwe banner. Zie:

* [How to switch to the new banner or switch back to the previous version](/nl/article/migratiegids-je-legacy-look-opnieuw-maken-in-de-nieuwe-versie-13ied6t/)
* [Custom styling with CSS (New Banner)](/nl/article/aangepaste-styling-met-css-xah8nh/)

### Gerelateerde artikelen

* [Customizing the layout of the banner (Legacy Version)](/nl/article/de-layout-van-de-banner-aanpassen-legacy-versie-6rymgf/)
* [Cookie Banner Modes (Legacy Version)](/nl/article/cookiebannermodi-legacy-versie-yo9ymf/)