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

# Eigenes Styling mit CSS (Neue Version)

### Überblick

Das meiste rund um Ihr Branding lässt sich in der App leichter einstellen als per CSS. Im Reiter **Style** legen Sie Logos, Schaltflächenvarianten, Farben, Schriften, Flächen (Innenabstand, Rundung, Schatten, **z-index**) und Animationen fest, ganz ohne Code. Siehe [So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/).

Nutzen Sie **Custom styling** nur dann, wenn die Style-Einstellungen nicht ausreichen, etwa für eine bestimmte Anordnung der Schaltflächen, eine besondere Rahmengestaltung oder die Position des Widgets.

||| **Neuer Banner.** Gilt für Shops mit dem Hinweis **New version** unter **Cookie banner**. Beim Legacy-Banner siehe [So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

Schritte für Legacy: [Eigenes Styling mit CSS (Legacy-Banner)](/en/article/custom-styling-with-css-legacy-banner-1qt8dtl/).

||| **Custom styling steht in den kostenpflichtigen Tarifen zur Verfügung** (zum Beispiel ab Plus). Im kostenlosen Basic-Tarif ist es nicht enthalten. Ist der CSS-Editor gesperrt, wechseln Sie über die Tarifauswahl in der App.

### Wo Sie Custom styling öffnen

1. Öffnen Sie **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Gehen Sie zu **Cookie banner**.
3. Prüfen Sie, ob auf der Banner-Seite der Hinweis **New version** steht.
4. Öffnen Sie den Reiter **Style**.
5. Scrollen Sie zu **Custom styling** (neben dem Titel des Bereichs sehen Sie möglicherweise **Learn more**, das auf diesen Artikel verweist).
6. Wählen Sie unter **CSS Rules** **Desktop** und/oder **Mobile**, wenn Sie je Ansicht unterschiedliche Regeln benötigen.
7. Fügen Sie Ihr CSS ein und klicken Sie auf **Save**, sobald die Leiste für ungespeicherte Änderungen erscheint.

Testen Sie in Ihrem Shop in einem privaten Fenster. Nutzen Sie **Enable for admins**, sehen während des Tests nur angemeldete Mitarbeitende den Banner.

|| Fügen Sie Banner-CSS unter **Custom styling** in der Pandectes-App ein. CSS in Ihrem Shopify-Theme verändert den neuen Banner in der Regel **nicht**, nutzen Sie stattdessen den Editor auf dieser Seite.

### Erst die App-Einstellungen, dann CSS

| Ziel | Zuerst im Reiter Style |
| --- | --- |
| Farben sowie heller und dunkler Modus | **Colors** |
| Aussehen der Schaltflächen (gefüllt, umrandet, Rundung) | **Buttons** |
| Breite, Position und Dialogtyp des Banners | Reiter **Layout** |
| Schriftart und -größe | **Fonts** |
| Schatten, Innenabstand, Rahmen, Position über dem Theme | **Surfaces** (einschließlich **z-index**) |
| Bewegung beim Öffnen und Schließen | **Animations** |
| Position von Widget und Hinweis | **Layout** (Notice, Preferences, Consent Widget) |

Liegt der Banner hinter einem fixierten Header oder einer Chat-App, erhöhen Sie zuerst **Surfaces > z-index**, bevor Sie CSS ergänzen. Siehe [So beheben Sie einen Banner, der hinter Theme-Elementen verschwindet (Neue Version)](/en/article/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-odvoph/).

### CSS-Beispiele

Fügen Sie die Regeln unter **CSS Rules** ein und klicken Sie auf **Save**. Passen Sie Farben und Größen an Ihre Marke an.

**Akzentrahmen am Cookie-Hinweis:**

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

**Farben der Schaltflächen Accept und Decline:**

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

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

**Das Consent Widget etwas höher setzen:**

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

Für feinere Farbanpassungen unterstützt der Editor zusätzlich **CSS-Variablen** (zum Beispiel `--ai-bg`, `--ai-text`) in den Dialogen Notice und Preferences. Unser Supportteam oder Ihre Entwicklung hilft Ihnen gerne, wenn Sie bereits mit Variablen arbeiten.

### Tipps

* Beginnen Sie mit einer kleinen Änderung, speichern Sie und prüfen Sie Ihren Shop.
* Nutzen Sie die CSS Rules für **Desktop** und **Mobile**, wenn Sie auf kleinen Bildschirmen anders gestalten möchten.
* Erscheint eine Änderung nicht, warten Sie eine Minute und laden Sie die Seite neu.

|| Eigenes CSS aus dem **Legacy-Banner** wird beim Upgrade **nicht** übernommen. Fügen Sie Ihre Regeln nach der Migration hier erneut ein. Siehe [So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-1r1oqc2/).

### Verwandte Artikel

* [So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/)
* [Eigenes Styling mit CSS (Legacy-Banner)](/en/article/custom-styling-with-css-legacy-banner-1qt8dtl/)
* [So beheben Sie einen Banner, der hinter Theme-Elementen verschwindet (Neue Version)](/en/article/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-odvoph/)