Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Borlabs Cookie stylen: Banner per Design-Einstellungen und CSS anpassen

    · Weswegen-Redaktion
    DSGVO

    Der Standard-Banner von Borlabs Cookie passt selten auf Anhieb zu Ihrem Corporate Design – und wer wild CSS überschreibt, holt sich beim nächsten Plugin-Update oft ein kaputtes Layout zurück. Der robuste Weg geht andersherum: zuerst die eingebauten Design-Optionen ausreizen, dann gezielt eigenes CSS ergänzen. Danach wissen Sie, wo das CSS wirklich hingehört, wie Sie die richtigen Selektoren finden und welche rechtlichen Stolperfallen beim Styling lauern.

    Reihenfolge: erst Einstellungen, dann CSS

    Fast jede Design-Anpassung – Farben, Layout (Box oder Leiste), Position, Rundungen, Logo – lässt sich in Borlabs Cookie ohne eine Zeile Code erledigen. Nutzen Sie diese Optionen zuerst. Der Grund ist praktisch: Die eingebauten Einstellungen überstehen Updates, während eigene CSS-Regeln bei einem größeren Versionssprung (etwa von 2.x auf 3.x) brechen können, weil sich CSS-Klassen und HTML-Struktur ändern.

    Eigenes CSS ist für den Feinschliff da – Details, die die Oberfläche nicht abdeckt. Halten Sie diesen Anteil so klein wie möglich.

    Design über die Borlabs-Einstellungen

    Der Aufbau der Oberfläche unterscheidet sich zwischen den großen Versionen deutlich. Prüfen Sie zuerst im WordPress-Backend unter Plugins, welche Version installiert ist.

    Version 3 (veröffentlicht 2023) hat die Oberfläche neu aufgebaut. Das Erscheinungsbild des Zustimmungsdialogs konfigurieren Sie über einen visuellen Bereich mit Vorschau – dort stellen Sie Farbschema, Layout, Position, Schrift und Buttons ein.

    Borlabs Cookie legt im WordPress-Menü einen eigenen Eintrag Borlabs Cookie an; das Erscheinungsbild des Dialogs konfigurieren Sie dort im Bereich Dialog. Seit Version 3.3 genügt für ein WCAG-2.1-AA-konformes Grunddesign der „Color Assistant“ mit nur drei Farbwerten (Akzent-, Kontrast- und Hintergrundfarbe), deren Wirkung die Vorschau sofort anzeigt (Stand: Juli 2026). Die genauen Bezeichnungen können je nach Unterversion minimal abweichen.

    In Version 2 finden Sie die Gestaltung unter Borlabs Cookie → Einstellungen, im Bereich für das Erscheinungsbild. Dort legen Sie fest:

    • Layout: Box (Dialog) oder Bar (Leiste am Bildschirmrand)
    • Position: z. B. unten links, unten rechts, mittig
    • Farbschema: Hintergrund-, Text- und Button-Farben
    • Verzögerung/Animation beim Einblenden

    Am unteren Ende dieses Bereichs gibt es zusätzlich ein Feld für eigenes CSS – der bevorzugte Ort für Ihre Anpassungen (mehr dazu im nächsten Abschnitt).

    Grundsätzliches zum Wechsel 2 → 3 und zu Einstellungen behandeln wir vertieft unter optimale Einstellungen für Borlabs Cookie.

    Eigenes CSS gezielt einsetzen

    Wo gehört das CSS hin?

    Legen Sie Ihr CSS möglichst in das eigene-CSS-Feld von Borlabs selbst (siehe oben). Vorteil: Der Code wird zusammen mit dem Consent-Dialog ausgespielt und ist klar dem Plugin zugeordnet. Alternativen sind der Customizer → Zusätzliches CSS oder das Stylesheet eines Child-Themes.

    Was Sie nie tun sollten: Plugin-Dateien direkt bearbeiten. Solche Änderungen sind beim nächsten Update weg. Ausführliche Beispiele und Selektor-Listen sammeln wir separat unter Borlabs Cookie CSS.

    Die richtigen Selektoren finden

    Die in vielen Anleitungen kursierenden Selektoren wie .borlabs-cookie .borlabs-button sind oft veraltet oder erfunden. Verlassen Sie sich nicht darauf – ermitteln Sie den echten Selektor:

    1. Banner auf der Live-Seite anzeigen lassen (ggf. Consent im Browser zurücksetzen).
    2. Auf das gewünschte Element rechtsklicken → Untersuchen / Inspect.
    3. Die tatsächlich vergebene ID oder Klasse ablesen und im CSS verwenden.

    So treffen Sie exakt die Version, die bei Ihnen läuft.

    Beispiele

    Die folgenden Regeln zeigen das Prinzip. Ersetzen Sie die Selektoren durch die Klassen/IDs, die Sie im Inspector sehen – der Container heißt je nach Version unterschiedlich: In Borlabs Cookie 2.x lautet die Box-ID #BorlabsCookieBox, während Version 3.x auf Komponenten-Klassen mit dem Präfix .brlbs-cmpnt- umgestellt hat (Buttons z. B. .brlbs-cmpnt-dialog-button-primary). Bestätigen Sie den konkreten Selektor daher immer per DevTools (Stand: Juli 2026).

    Hintergrund und Text:

    /* Container – Selektor per DevTools bestätigen */
#BorlabsCookieBox {
  background-color: #1c1c1c;
  color: #ffffff;
  border-radius: 10px;
}

    Buttons (Zustimmen/Ablehnen):

    #BorlabsCookieBox .brlbs-btn-accept-all {   /* Selektor prüfen */
  background-color: #ff9900;
  color: #ffffff;
  border-radius: 6px;
  padding: 10px 20px;
}

    Wenn eine Regel nicht greift, liegt es meist an zu geringer Spezifität. Erhöhen Sie diese, indem Sie den Container-Selektor voranstellen (wie oben). Erst als letzte Option !important einsetzen – zu großzügig verwendet, macht es späteres Nachjustieren schwer.

    Rechtliche Stolperfallen beim Styling

    Design ist beim Cookie-Banner nicht nur Geschmack, sondern auch Rechtsfrage. Zwei Punkte sind heikel:

    • Ablehnen muss so einfach sein wie Zustimmen. Ein prominent eingefärbter „Alle akzeptieren“-Button neben einem grauen, kleingesetzten „Ablehnen“-Link gilt als unzulässiges Dark Pattern. Datenschutzaufsicht und Rechtsprechung verlangen gleichwertige Optionen. Maßgeblich ist die „Orientierungshilfe der Aufsichtsbehörden für Anbieter digitaler Dienste“ (OH Digitale Dienste) der Datenschutzkonferenz (DSK), Version 1.2 vom November 2024: Steht auf der ersten Ebene ein „Alle akzeptieren“, muss auf derselben Ebene eine gleichwertige Ablehnen-Option vorhanden sein, und das Ablehnen darf keinen größeren Aufwand bedeuten als das Zustimmen (Stand: Juli 2026, Quelle: https://www.datenschutzkonferenz-online.de/media/oh/OH_Digitale_Dienste.pdf). Gestalten Sie beide Buttons vergleichbar sichtbar.
    • Kontrast und Lesbarkeit. Halten Sie ausreichend Kontrast ein (Orientierung: WCAG, mind. 4,5:1 für normalen Text) – auch damit die Ablehnen-Option nicht faktisch „versteckt“ wirkt.

    Kurz: Optisch dürfen Sie den Banner an Ihre Marke anpassen, aber nicht so, dass Ablehnen erschwert wird.

    Google Fonts & Schriften – die DSGVO-Falle

    Ein verbreiteter Fehler: die Banner-Schrift per Google-Fonts-CDN nachladen. Genau das ist bei einem Cookie-Banner besonders unpassend, denn der Banner erscheint vor der Einwilligung – ein Aufruf der Google-Server überträgt dabei die IP-Adresse Ihrer Besucher an Google, ohne Rechtsgrundlage.

    Besser:

    • Systemschrift verwenden (z. B. font-family: system-ui, sans-serif;) – lädt nichts nach.
    • Oder die gewünschte Schrift lokal hosten und lokal einbinden.
    #BorlabsCookieBox {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

    So bleibt der Banner schnell und datenschutzkonform.

    Änderungen werden nicht sichtbar?

    Wenn Ihr CSS scheinbar ignoriert wird, ist fast immer eine dieser Ursachen schuld:

    • Caching. Leeren Sie nach jeder Änderung die Caches: Ihr Cache-Plugin (WP Rocket, LiteSpeed …), einen etwaigen Server-/CDN-Cache und die Borlabs-eigene Cache/Cookie-Version, die das Banner-HTML zwischenspeichert. Wie das geht, zeigt Borlabs Cookie zurücksetzen.
    • Falscher Selektor. Per DevTools den echten Klassennamen prüfen (siehe oben).
    • Zu geringe Spezifität. Container-Selektor voranstellen.
    • CSS am falschen Ort, das gar nicht mit dem Banner ausgeliefert wird.

    Erscheint der Banner nach dem Speichern gar nicht mehr, ist das ein eigenes Thema: Borlabs-Cookie-Box wird nicht angezeigt.

    FAQ

    Übersteht mein CSS ein Update von Borlabs Cookie? Kleine Updates innerhalb einer Hauptversion in der Regel ja. Beim Sprung 2.x → 3.x müssen Sie Ihre Regeln überarbeiten, weil sich Klassen und HTML-Struktur geändert haben. Deshalb: so viel wie möglich über die Einstellungen lösen, so wenig CSS wie nötig.

    Warum greift meine CSS-Regel nicht, obwohl der Selektor stimmt? Meist Cache oder Spezifität. Zuerst alle Caches leeren (inkl. Borlabs). Wirkt es dann noch nicht, stellen Sie den Container-Selektor voran; erst danach !important.

    Darf ich den „Ablehnen“-Button dezenter gestalten als „Akzeptieren“? Nein, nicht so, dass Ablehnen erkennbar erschwert wird. Beide Optionen müssen gleichwertig erreichbar sein – gleiche Sichtbarkeit ist der sichere Weg (so die DSK-Orientierungshilfe für Anbieter digitaler Dienste, Version 1.2; Stand: Juli 2026).

    Brauchen Sie Unterstützung bei DSGVO & Cookie-Consent (Borlabs & Co.)? Ypsilon.dev ist Ihre Webagentur aus Regensburg – jetzt kostenlose Erstberatung anfragen.