> ## 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). # So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version) ### Überblick Das Layout (Position und Dialogtyp) wird gesondert behandelt. Wenn Sie vom Legacy-Banner umsteigen, siehe [Migrationsleitfaden: Ihren Legacy-Look in der neuen Version nachbauen](/en/article/migration-guide-recreating-your-legacy-look-in-new-version-1r1oqc2/). Der Reiter **Style** steuert, wie Banner, Präferenzfenster und Consent Widget aussehen. Sie laden Logos hoch, wählen Schaltflächenstile, setzen Farben (auch für hell und dunkel), passen Flächen und Schriften an und ergänzen eigenes CSS. Style ändert nichts daran, wann Cookies erlaubt sind. Die Einwilligungsregeln bleiben unter **All settings > Consent model & regions**. ||| **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: [Migrationsleitfaden: Ihren Legacy-Look in der neuen Version nachbauen](/en/article/migration-guide-recreating-your-legacy-look-in-new-version-1r1oqc2/). ### Bevor Sie beginnen * Prüfen Sie, ob die Banner-Seite den Hinweis **New version** zeigt. * Nutzen Sie **Enable for admins**, wenn Sie im Live-Shop testen möchten, ohne Besuchern den Banner zu zeigen. Siehe [So aktivieren, deaktivieren oder testen Sie den Banner im Admin-Modus (Neue Version)](/en/article/how-to-enable-disable-or-test-the-banner-in-admin-only-mode-new-version-1q608yh/). * Nutzen Sie beim Bearbeiten die Vorschau in der App (Desktop / Mobil, Hell / Dunkel). ### Den Reiter Style öffnen 1. Öffnen Sie **Shopify Admin > Apps > Pandectes GDPR Compliance**. 2. Gehen Sie zu **Cookie banner**. 3. Öffnen Sie den Reiter **Style**. 4. Speichern Sie, sobald die Leiste für ungespeicherte Änderungen erscheint. ![Die Upload-Felder für Banner- und Widget-Logo im Reiter Style](https://images.pandect.es/knowledge-base/how-to-customize-banner-style-colors-logos-and-buttons-new-version-2.png =900xauto) ### Logos Sie können ein Logo für den Hauptbanner und ein separates Logo für das Consent Widget hinterlegen. * **Banner-Logo** — erscheint im Kopfbereich von Cookie-Hinweis und Präferenzen (sofern im Layout nicht **Hide header** aktiviert ist). * **Widget-Logo** — erscheint im Consent Widget. Laden Sie eine PNG- oder JPG-Datei hoch oder wählen Sie ein Logo aus der Galerie. Nach dem Speichern kann es einen Moment dauern, bis die Änderung im Shop erscheint. ### Schaltflächen Die Einstellungen gelten für die primären Aktionen (Accept und Deny all) und die sekundären Aktionen (Preferences und Save). Übliche Optionen: * gefüllte oder umrandete (Ghost-)Varianten * Größe und Eckenrundung * Rahmen * fette Beschriftungen (im Bereich Fonts) Nutzen Sie eine gefüllte Schaltfläche **Accept** und eine umrandete Schaltfläche **Decline**, wenn Accept hervorstechen soll. Die Banner-Anforderungen von Google verlangen weiterhin ein klar erkennbares Decline und Zugang zu den Präferenzen. Siehe [So erstellen Sie einen Banner, der die Anforderungen von Google erfüllt (Neue Version)](/en/article/how-to-create-a-banner-that-meets-googles-banner-requirements-new-version-1fjdi0q/). ### Farben Wählen Sie einen Farbmodus (etwa hell oder dunkel), eine Vorlage oder eigene Farben. * Die Farben **Base, Primary, Secondary und Accent** bestimmen Hintergründe, Text und Schaltflächen. * **Auto calculate** beziehungsweise die automatische Anpassung leitet eine Palette aus Ihrem Shopify-Theme ab, sodass Sie nicht jeden Hex-Wert von Hand eintragen müssen. * Prüfen Sie in der Live-Vorschau die Hintergründe **Light** und **Dark**, damit der Banner auch für Besucher im Dunkelmodus lesbar bleibt. ### Flächen, Schriften und Animationen * **Surfaces** — Innenabstand, Eckenrundung, Float (schwebendes Fenster), Rahmen, Schatten und **z-index** (wie der Banner über anderen Theme-Elementen liegt). * **Fonts** — Schriftfamilie und -größe. Lassen Sie die Felder leer, um die Schrift des Shops zu übernehmen. * **Animations** — Bewegung aktivieren oder deaktivieren und die Dauer festlegen. Den Animationstyp (Fade, Slide, Zoom, Grow) wählen Sie weiterhin im Layout. Liegt der Banner hinter einem fixierten Header oder einem Chat-Widget, erhöhen Sie den **z-index**. Der Höchstwert ist `2147483647`. 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/). ### Eigenes Styling (CSS) Für Änderungen, die die Style-Einstellungen nicht abdecken, nutzen Sie **Custom styling** beziehungsweise **CSS Rules** im selben Reiter. Die Regeln wirken innerhalb der Web Component `pandectes-cmp`. Siehe [Eigenes Styling mit CSS](/en/article/custom-styling-with-css-52oqz4/). || Eigenes CSS aus dem Legacy-Banner wird beim Wechsel zum neuen Banner **nicht** übernommen. Fügen Sie die Regeln unter **Style > Custom styling** erneut ein. ### Mobil und Desktop Viele Style-Felder können auf Mobilgeräten abweichen. Nutzen Sie **Mobile same as desktop** oder **Mobile different from desktop**. Siehe [So nutzen Sie unterschiedliche Banner-Layouts auf Mobil und Desktop (Neue Version)](/en/article/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-c1vwrd/). ### Verwandte Artikel * [Das Layout des Banners anpassen (Neue Version)](/en/article/customizing-the-layout-of-the-banner-new-version-wt79uc/) * [So bearbeiten Sie Texte und Links des Banners (Neue Version)](/en/article/how-to-edit-banner-texts-and-links-new-version-mb7883/) * [So aktivieren und gestalten Sie das Consent Widget (Neue Version)](/en/article/how-to-enable-and-customize-the-consent-widget-new-version-nlm8ve/) * [Eigenes Styling mit CSS](/en/article/custom-styling-with-css-52oqz4/)