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

# Das Layout des Banners anpassen (Legacy-Version)

Sie passen Layout und Gestaltung Ihres Banners direkt in der Anwendung an. So schaffen Sie ein Erscheinungsbild, das zu Ihrer Marke und Ihrem Nutzungserlebnis passt.

Die Optionen finden Sie unter:
**Cookie banner > Style**

### Position

Legen Sie fest, wo und wie der Banner auf Ihrer Website erscheint:

1. **Popup:** zentriert auf dem Bildschirm.
2. **Overlay:** arbeitet wie das Popup, sperrt die Seite jedoch, bis der Nutzer mit dem Banner interagiert.
3. **Bar at the top:** fixiert am oberen Bildschirmrand.
4. **Bar at the top (pushdown):** fährt von oben herein und schiebt den Inhalt nach unten. (Hinweis: funktioniert mit fixierten Headern möglicherweise nicht gut.)
5. **Floating at the top left:** oben links mit kleinem Abstand.
6. **Floating at the top center:** oben mittig mit kleinem Abstand.
7. **Floating at the top right:** oben rechts mit kleinem Abstand.
8. **Bar at the bottom:** fixiert am unteren Bildschirmrand.
9. **Floating at the bottom left:** unten links mit kleinem Abstand.
10. **Floating at the bottom center:** unten mittig mit kleinem Abstand.
11. **Floating at the bottom right:** unten rechts mit kleinem Abstand.


### Farbschema (Theme)

Wählen Sie ein Theme, das Innenabstand, Schaltflächenstil und Erscheinungsbild bestimmt:

1. **Block:** kleiner Innenabstand, eckige Schaltflächen mit proportionaler Breite.
2. **Classic:** kleiner Innenabstand, abgerundete Schaltflächen gleicher Breite.
3. **Edgeless:** kein Innenabstand, eckige Schaltflächen gleicher Breite.
4. **Wired:** wie Block, jedoch mit invertierten Hintergründen und Farben der Schaltflächen.

**Vergleich der Themes**

| Theme | Innenabstand | Schaltflächenstil | Schaltflächenbreite |
| ---- |
| **Block** | klein | eckig | proportional |
| **Classic** | klein | abgerundet | gleich |
| **Edgeless** | keiner | eckig | gleich |
| **Wired** | klein | eckig (invertierte Farben) | proportional |

### Textausrichtung

Gilt für Titel, Text und Logo des Banners:

* linksbündig
* zentriert
* rechtsbündig

### Breite

Passt die Breite des Banners in **em** an (relativ zur Schriftgröße). Beispiel: `2em` entspricht der doppelten Schriftgröße.

* Wird über einen Schieberegler eingestellt.
* Arbeitet mit der Live-Vorschau für sofortige Ergebnisse.
* Nützlich bei längeren Texten oder Schaltflächenbeschriftungen.
* Hinweis: gilt nur für **Banner**-Positionen, nicht für Bars (diese nehmen immer die volle Breite ein).

### Schriftgröße

Passt die Textgröße in **px** an. Beispiel: `1px = 1/96 Zoll`.

* Wird über einen Schieberegler eingestellt.
* Arbeitet mit der Live-Vorschau.
* Voreingestellt ist die Größe aus dem Theme Ihres Shops.

### Innenabstand

Passt den Abstand innerhalb des Banners in **px** an.

* Wird über einen Schieberegler eingestellt.
* Arbeitet mit der Live-Vorschau.
* Die Voreinstellung hängt vom gewählten Theme ab.
* Hinweis: wird vom Theme **Edgeless** nicht unterstützt.

### Farben

Passen Sie die Farben von Banner und Schaltflächen an:

* Wählen Sie aus einer Palette oder definieren Sie eigene Farben.
* Unterstützt werden **Hex** (zum Beispiel `#123456`) und **RGBA**.
* RGBA ergänzt die Rot-, Grün- und Blauwerte um Transparenz.

### Schriftart

Standardmäßig übernimmt der Banner die Schrift Ihres Shop-Themes. Sie können auch aus browserübergreifend verfügbaren Schriften wählen:

* 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

Möchten Sie eine eigene Schrift verwenden, laden Sie sie zunächst in die Assets Ihres Shops und binden Sie sie in Ihrer CSS-Datei ein.

### z-index

Steuert die **Stapelreihenfolge** des Banners.

* Höhere Werte sorgen dafür, dass der Banner über anderen Seitenelementen liegt.
* Passen Sie ihn an, wenn es zu Konflikten mit anderen Apps oder Skripten kommt.

### Container-ID

Legt die HTML-ID des Banner-Containers fest.

* Ändern Sie sie nur, wenn Sie den Banner über eigene Skripte oder CSS-Selektoren ansprechen müssen.

### Banner-Schatten

Fügt hinter dem Banner einen Schatten hinzu.

* Nützlich, wenn Banner- und Hintergrundfarbe ähnlich sind, das verbessert die Sichtbarkeit.

### Animation

Aktiviert Animationen beim Erscheinen und Schließen des Banners:

* Einblenden oder Hereinfahren beim Öffnen.
* Ausblenden oder Herausfahren beim Schließen.

Gilt auch für den Link zum erneuten Öffnen (Revoke), sofern er unter Behavior aktiviert ist.

* Hinweis: wird nicht von allen Browsern unterstützt.

### Eigenes CSS

Ergänzen Sie eigene CSS-Regeln für weitere Anpassungen.

* Nützlich für die Feinabstimmung von Schaltflächengrößen, Rahmenfarben, Abständen und mehr.

### Videoanleitung

${youtube}[So passen Sie Ihren Cookie-Banner in Pandectes GDPR Compliance an](Q_fGcnwDQxk)