Borlabs Cookie mit eigenem CSS anpassen: Banner, Buttons und Variablen (v3)

Das Cookie-Banner von Borlabs Cookie sitzt technisch sauber, sieht aber aus wie von der Stange - graue Buttons, falsche Akzentfarbe, eckige Ecken, wo Ihr Design runde will. Oder Sie haben schon eigenes CSS geschrieben, und es greift einfach nicht. Beides ist mit wenigen Handgriffen lösbar. Gleich wissen Sie, auf welcher Ebene Sie ansetzen (Editor, CSS-Variable oder eigener Selektor), wo Sie das CSS in Borlabs Cookie 3 eintragen und warum Änderungen manchmal unsichtbar bleiben.

Drei Ebenen der Gestaltung - in dieser Reihenfolge

Bevor Sie eine Zeile CSS schreiben, klären Sie, auf welcher Ebene das Problem liegt. Borlabs Cookie 3 bietet drei Wege, die aufeinander aufbauen:

1. Erscheinungsbild-Editor (kein Code): Farben, Schrift, Button-Form, Radius, Position. Für 90 % der Anpassungen reicht das aus - Borlabs bewirbt hunderte Optionen genau dafür.
2. CSS-Variablen im :root: Der empfohlene Weg, wenn der Editor an eine Grenze stößt. Sie überschreiben eine Handvoll benannter Werte, statt gegen die Plugin-Styles anzukämpfen.
3. Eigene Selektoren: Nur für Feinheiten, die weder Editor noch Variable abdecken. Hier brauchen Sie den Browser-Inspektor und oft etwas Spezifität.

Die Faustregel: So weit oben in der Liste bleiben wie möglich. Jede Ebene tiefer wird das CSS empfindlicher gegenüber Plugin-Updates und Layout-Änderungen.

Wo Sie eigenes CSS in Borlabs Cookie eintragen

In Version 3 finden Sie den Editor im WordPress-Backend unter Borlabs Cookie → Dialog & Widget → Erscheinungsbild. Dort stellen Sie Farben, Schriften, Links und Button-Formen visuell ein. Unterhalb dieser Einstellungen liegt ein Feld für individuelles CSS, in das Sie eigene Snippets direkt einfügen können - ganz ohne Theme-Datei.

Nutzen Sie dieses Feld statt der Plugin-Dateien. CSS, das Sie direkt in Plugin-Ordner schreiben, ist beim nächsten Update weg. Wer das CSS lieber zentral pflegt, legt es alternativ ins Child-Theme (siehe WordPress Child-Theme anlegen) oder in das globale Stylesheet. Für reines Banner-Styling ist das Borlabs-Feld aber der direkteste Ort.

Der Menüpfad ist in den aktuellen 3.x-Versionen stabil: Sie erreichen den Bereich über Borlabs Cookie → Dialog & Widget → Erscheinungsbild, und das Feld für eigenes CSS liegt unterhalb der visuellen Einstellungen. Die genaue Feldüberschrift kann je nach Sprachpaket „Individuelles CSS” bzw. „Custom CSS” lauten - der Ort bleibt derselbe.

Der empfohlene Weg: Styling über CSS-Variablen

Borlabs Cookie 3 definiert das Aussehen über CSS Custom Properties (Variablen). Mit Version 3.3.19 (November 2025) hat Borlabs diese Variablen von globalen Selektoren (*, :after, :before) in den :root-Selektor verschoben, sodass die Dialog-Elemente die Werte sauber erben und Sie zentral überschreiben können. Statt einzelne Elemente zu jagen, setzen Sie den Wert der passenden Variable neu.

Die exakten Namen lesen Sie am zuverlässigsten selbst aus - verlassen Sie sich nicht auf kopierte Listen. Öffnen Sie das Banner, dann die DevTools (F12) und sehen Sie sich die Deklarationen auf :root an. Zwei Gruppen sind zentral: --dialog-* steuert das eigentliche Consent-Fenster (Buttons, Backdrop, Checkbox-Zustände, Links), --content-blocker-* die Sperrfläche, die z. B. YouTube-Einbettungen bis zur Einwilligung ersetzt. So sieht ein Snippet aus, das nur einige dieser Werte überschreibt:

/* Illustrativ - Variablennamen zuvor im :root Ihrer Version verifizieren */
:root {
  --dialog-backdrop-background-color: rgba(0, 0, 0, 0.55);
  --dialog-button-accept-all-background-color: #1d6fe0;
  --dialog-button-accept-all-color: #ffffff;
  --dialog-link-primary-color: #1d6fe0;
  --content-blocker-button-background-color: #1d6fe0;
}

Borlabs pflegt den vollständigen Satz an Variablennamen bewusst nur in der plugininternen Dokumentation, nicht als öffentliche Liste - deshalb sind die obigen Namen beispielhaft.

Der Vorteil dieses Ansatzes: Sie brauchen kein !important, weil Sie keinen Regelkonflikt erzeugen, sondern nur den Ausgangswert ändern. Und die Anpassung übersteht Updates, solange die Variablennamen stabil bleiben.

Wenn Variablen nicht reichen: Selektoren gezielt finden

Manchmal wollen Sie etwas, das keine Variable abbildet - etwa einen Button breiter machen oder auf Mobilgeräten anders positionieren. Dann führt kein Weg am Browser-Inspektor vorbei. Öffnen Sie das Banner, klicken Sie mit der rechten Maustaste auf das Element und wählen Untersuchen (F12). Die tatsächlichen Klassennamen lesen Sie direkt aus dem DOM ab - das ist zuverlässiger als jede kopierte Beispielregel, denn die Selektoren unterscheiden sich zwischen Versionen.

Ein typisches Snippet für den Akzeptieren-Button:

/* Klassennamen im Inspektor Ihrer Version verifizieren */
.brlbs-cmpnt-dialog-button-primary {
  padding: 12px 28px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

Version 3 verwendet durchgängig den Komponenten-Präfix brlbs-cmpnt-; der primäre Zustimmen-Button trägt beispielsweise die Klasse .brlbs-cmpnt-dialog-button-primary. Das ist ein sichtbarer Bruch zu v2, wo der Container noch #BorlabsCookieBox und Klassen mit dem Präfix ._brlbs- hießen. Lesen Sie die konkreten Klassen für Ablehnen- und Speichern-Button sowie den Dialog-Container dennoch im Inspektor ab - Unterversionen können Details ergänzen.

Greift die Regel trotzdem nicht, liegt es fast immer an der Spezifität: Die Plugin-Styles sind spezifischer als Ihre. Erhöhen Sie die Spezifität (z. B. durch einen vorangestellten Container-Selektor) oder setzen Sie gezielt !important - sparsam und nur dort, wo nötig.

„Mein CSS greift nicht” - die häufigsten Ursachen

Wenn Änderungen ausbleiben, ist meist nicht das CSS schuld, sondern einer dieser drei Klassiker:

• Das Einwilligungs-Cookie: Haben Sie einmal zugestimmt, erscheint das Banner nicht erneut - Sie sehen schlicht kein Banner zum Prüfen. Testen Sie in einem Inkognito-Fenster und schließen Sie es zwischen den Tests komplett, damit die Einwilligung zurückgesetzt wird. Alternativ öffnen Sie den Einwilligungs-Dialog erneut, indem Sie einem beliebigen Element die von Borlabs vorgesehene CSS-Klasse borlabs-cookie-open-dialog-preferences geben (Borlabs registriert darauf automatisch ein Klick-Event) - zum Beispiel <span class="borlabs-cookie-open-dialog-preferences" data-borlabs-cookie-title="Cookie-Einstellungen"></span>.
• Caching: Seiten-Caches und Optimierer wie WP Rocket oder Autoptimize liefern altes CSS aus. Leeren Sie den Cache nach jeder Änderung - und deaktivieren Sie ihn während des Feintunings ganz. Details dazu im Beitrag WP Rocket Cache leeren. Auch Borlabs selbst hält Konfigurationsdaten vor; ein erneutes Speichern der Einstellungen hilft.
• Falsche Ebene erwischt: Der Content Blocker und das eigentliche Consent-Dialogfenster sind verschiedene Bausteine mit eigenen Variablen und Klassen. Wer den Dialog stylt, sieht am Blocker keine Wirkung - und umgekehrt.

Kommt Ihr CSS von einem Umzug aus Version 2? Dann ist die wahrscheinlichste Ursache, dass die alten Selektoren in v3 schlicht nicht mehr existieren. Bauen Sie das Styling auf den Variablen-Ansatz um, statt die alten Regeln zu flicken.

v2 oder v3 - warum das den Unterschied macht

Version 3 war ein kompletter Umbau. Alte Anleitungen mit Selektoren wie #BorlabsCookieBox oder ._brlbs--Klassen beziehen sich auf v2 und führen in v3 ins Leere. Prüfen Sie im Zweifel unter Borlabs Cookie die installierte Versionsnummer (aktuell im 3.4-Zweig) und orientieren Sie sich nur an v3-Material. Das erspart Ihnen Regeln, die nie greifen können.

Wie das grundsätzliche Aufsetzen des Banners funktioniert, lesen Sie in unserem DSGVO-Cookie-Banner-Leitfaden; die Anbindung von Analyse-Tools behandelt Borlabs Cookie und Google Analytics.

FAQ

Brauche ich für Borlabs Cookie überhaupt eigenes CSS? Meist nicht. Der Erscheinungsbild-Editor deckt Farben, Schrift, Button-Form, Radius und Position ab. Eigenes CSS lohnt erst für Feinheiten, die dort fehlen - etwa spezielle Abstände, responsive Sonderfälle oder eine exakte Markenschrift.

Warum sehe ich meine Änderungen im Frontend nicht? Zwei Ursachen dominieren: Ein aktiver Seiten-Cache (WP Rocket, Autoptimize) liefert altes CSS - leeren oder deaktivieren. Und das gesetzte Einwilligungs-Cookie verhindert, dass das Banner erneut erscheint - im Inkognito-Fenster testen und dieses zwischendurch vollständig schließen.

Überstehen meine CSS-Anpassungen ein Plugin-Update? Ja, solange Sie das individuelle-CSS-Feld, ein Child-Theme oder Ihr globales Stylesheet nutzen. Änderungen direkt in Plugin-Dateien werden bei jedem Update überschrieben. Der Variablen-Ansatz ist am robustesten, weil die Variablennamen versionsübergreifend stabil bleiben.

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