> ## 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 (Legacy-Banner)

### Überblick

Beim Legacy-Banner finden Sie die meisten Gestaltungsoptionen unter **Cookie banner > Style**: Layout (Position, Breite, Farbschema), Farben, Logo, Schriften, **z-index** und Animationen. Nutzen Sie **eigenes CSS** nur dann, wenn diese Felder nicht ausreichen.

||| **Eigenes CSS beziehungsweise erweitertes Styling steht in den kostenpflichtigen Tarifen zur Verfügung** (zum Beispiel ab Plus), nicht im kostenlosen Basic-Tarif.

||| **Legacy-Banner.** Gilt für Shops **ohne** den Hinweis **New version** unter **Cookie banner**. Beim neuen 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 den neuen Banner: [Eigenes Styling mit CSS](/en/article/custom-styling-with-css-52oqz4/).

### Wo Sie CSS einfügen (Legacy-Banner)

1. Öffnen Sie **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Gehen Sie zu **Cookie banner**.
3. Prüfen Sie, dass der Hinweis **New version** **nicht** erscheint (die Legacy-Oberfläche nutzt die Reiter **Behavior**, **Style** und **Content**).
4. Öffnen Sie den Reiter **Style**.
5. Nutzen Sie **Layout**, **Colors** und **Advanced styling** für Schriften, **z-index** und Animationen.
6. Ergänzen Sie eigene Regeln im Bereich für **eigenes CSS** im Reiter Style (in den kostenpflichtigen Tarifen Teil von **Advanced styling**).
7. **Speichern** Sie und testen Sie in Ihrem Shop in einem privaten Fenster.

### Wie der Legacy-Banner im DOM erscheint

Übliche Wurzelelemente im Shop:

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

Das CSS Ihres Themes **kann** den Legacy-Banner beeinflussen, denn er liegt anders als der neue Banner nicht in einem Shadow Root. Nutzen Sie dennoch bevorzugt das CSS-Feld unter **Style** in Pandectes, damit Ihre Regeln zusammen mit Ihren Pandectes-Einstellungen bestehen bleiben.

### Erst die App-Einstellungen, dann CSS

| Ziel | Ort in der Legacy-Oberfläche |
| --- | --- |
| Position als Bar, schwebend oder Popup | **Style > Layout > Position** |
| Breite | **Style > Layout > Width** |
| Farben | **Style > Colors** |
| Logo | **Style > Banner logo** |
| Schriften | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Beschriftungen der Schaltflächen | Reiter **Content** |

### Beispiel-Selektoren (in Ihrem Shop prüfen)

Beziehen Sie Ihre Regeln nach Möglichkeit auf das Wurzelelement des Banners:

#### Das Banner-Fenster

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

#### Der Nachrichtentext

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

#### Die Schaltflächen Accept und Decline

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

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

#### Das Präferenzfenster

Öffnen Sie das Präferenzfenster in Ihrem Shop und prüfen Sie die Klassennamen, sie unterscheiden sich je Banner-Typ (**Preferences**, **Informative** usw.). Siehe [Cookie-Banner-Modi (Legacy-Version)](/en/article/cookie-banner-modes-legacy-version-x8jjy1/).

### Den Live-Banner untersuchen

1. Öffnen Sie Ihren Shop mit sichtbarem Banner.
2. Klicken Sie mit der rechten Maustaste auf den Banner und wählen Sie **Untersuchen**.
3. Prüfen Sie, ob `#pandectes-banner` oder `.cc-window` im DOM steht.
4. Kopieren Sie die Klassennamen der Elemente, die Sie gestalten möchten. Übernehmen Sie keine Selektoren aus der Anleitung zum neuen Banner (`dialog.notice`, `pandectes-cmp`).

### Beim Umstieg auf den neuen Banner

Eigenes CSS aus der Legacy-Version wird **nicht automatisch übernommen**. Legen Sie Ihre Regeln nach dem Upgrade unter **Style > Custom styling** im neuen Banner erneut an. 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/)
* [Eigenes Styling mit CSS (neuer Banner)](/en/article/custom-styling-with-css-52oqz4/)

### Verwandte Artikel

* [Das Layout des Banners anpassen (Legacy-Version)](/en/article/customizing-the-layout-of-the-banner-legacy-version-hrkyw9/)
* [Cookie-Banner-Modi (Legacy-Version)](/en/article/cookie-banner-modes-legacy-version-x8jjy1/)