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

### Overzicht

De meeste huisstijlaanpassingen doe je makkelijker in de app dan met CSS. Op het tabblad **Style** kun je logo's, knopvarianten, kleuren, lettertypen, oppervlakken (padding, afronding, schaduw, **z-index**) en animaties instellen zonder code te schrijven. Zie [How to customize banner style, colors, logos, and buttons (New Version)](/nl/article/stijl-kleuren-logos-en-knoppen-van-de-banner-aanpassen-nieuwe-versie-1ptmcl/).

Gebruik **Custom styling** alleen als je met de Style-opties niet kunt bereiken wat je nodig hebt (bijvoorbeeld een specifieke knopindeling, randafwerking of positie van de widget).

||| **Nieuwe banner.** Voor winkels met het label **New version** bij **Cookie banner**. Voor de Legacy-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 Legacy: [Custom styling with CSS (Legacy Banner)](/nl/article/aangepaste-styling-met-css-legacy-banner-gjytmy/).

||| **Custom styling is beschikbaar voor betaalde abonnementen** (bijvoorbeeld Plus en hoger). Het is niet inbegrepen in het gratis Basic-abonnement. Upgrade via de abonnementskiezer in de app als de CSS-editor vergrendeld is.

### Waar vind je Custom styling

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ga naar **Cookie banner**.
3. Controleer of het label **New version** zichtbaar is op de Banner-pagina.
4. Open het tabblad **Style**.
5. Scrol naar **Custom styling** (naast de sectietitel zie je mogelijk **Learn more**, dat naar dit artikel verwijst).
6. Kies onder **CSS Rules** voor **Desktop** en/of **Mobile** als je per schermformaat andere regels nodig hebt.
7. Plak je CSS en klik op **Save** zodra de balk met niet-opgeslagen wijzigingen verschijnt.

Test op de webshop in een privévenster. Als je **Enable for admins** gebruikt, zien alleen ingelogde medewerkers de banner terwijl je test.

|| Voeg banner-CSS toe in **Custom styling** in de Pandectes-app. CSS in je Shopify-thema wijzigt de nieuwe banner meestal **niet**. Gebruik hiervoor de editor op deze pagina.

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

| Doel | Gebruik eerst het tabblad Style |
| --- | --- |
| Kleuren en lichte/donkere modus | **Colors** |
| Uiterlijk van knoppen (gevuld / omlijnd, afronding) | **Buttons** |
| Breedte, positie en dialoogtype van de banner | Tabblad **Layout** |
| Lettertype en grootte | **Fonts** |
| Schaduw, padding, rand, boven het thema weergeven | **Surfaces** (inclusief **z-index**) |
| Beweging bij openen/sluiten | **Animations** |
| Positie van widget en melding | **Layout** (melding / voorkeuren / toestemmingswidget) |

Als de banner achter een sticky header of chat-app zit, verhoog dan **Surfaces > z-index** voordat je CSS toevoegt. Zie [How to fix the banner hiding behind theme elements (New Version)](/nl/article/de-banner-die-achter-thema-elementen-verdwijnt-oplossen-nieuwe-versie-13z3hwi/).

### Voorbeeld-CSS

Plak regels in **CSS Rules** en klik op **Save**. Pas kleuren en groottes aan je merk aan.

**Accentrand op de cookiemelding:**

```css
dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}
```

**Kleuren van de knoppen Accept en Decline:**

```css
button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}
```

**De toestemmingswidget iets hoger op de pagina plaatsen:**

```css
button.widget.bottom.left {
  bottom: 24px;
}
```

Voor geavanceerde kleuraanpassingen ondersteunt de editor ook **CSS-variabelen** (bijvoorbeeld `--ai-bg`, `--ai-text`) op de dialogen voor melding en voorkeuren. Je supportteam of ontwikkelaar kan je helpen als je al variabelen in de app gebruikt.

### Tips

* Begin met één kleine wijziging, sla op en controleer de webshop.
* Gebruik **Desktop**- en **Mobile**-CSS Rules als je andere styling nodig hebt op kleine schermen.
* Als een wijziging niet zichtbaar is, wacht dan een minuut en ververs de pagina.

|| Aangepaste CSS van de **Legacy Banner** wordt **niet** overgenomen bij het upgraden. Voeg de regels na de migratie opnieuw toe. 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/).

### Gerelateerde artikelen

* [How to customize banner style, colors, logos, and buttons (New Version)](/nl/article/stijl-kleuren-logos-en-knoppen-van-de-banner-aanpassen-nieuwe-versie-1ptmcl/)
* [Custom styling with CSS (Legacy Banner)](/nl/article/aangepaste-styling-met-css-legacy-banner-gjytmy/)
* [How to fix the banner hiding behind theme elements (New Version)](/nl/article/de-banner-die-achter-thema-elementen-verdwijnt-oplossen-nieuwe-versie-13z3hwi/)