Möchten Sie, dass Ihr Cookie-Banner besser zu Ihrem Theme passt, als es die Ansicht "Stil" allein bewältigen kann? Alles, was Sie brauchen, ist ein Ort, an dem Sie ein paar Zeilen CSS einfügen können.
Diese Anleitung führt Sie durch die benutzerdefinierten CSS-Eigenschaften, die WPConsent für seine Benutzeroberfläche zur Zustimmung bereitstellt, und zeigt Ihnen, was jede einzelne ändert.
Inhaltsverzeichnis
- Wie stellt WPConsent seine Bannerstile bereit?
- Die Werte finden, die Ihr CSS überschreibt
- Neugestaltung des Zustimmungsbannes
- Neugestaltung des Präferenzfensters
- Neugestaltung des schwebenden Einstellungsknopfs
- Abgleich Ihrer Platzhalter für blockierte Inhalte
- Nachschlagen jeder verfügbaren Eigenschaft
- Häufig gestellte Fragen
Stellen Sie vor Beginn sicher, dass WPConsent auf Ihrer WordPress-Website installiert und aktiviert ist.
Wie stellt WPConsent seine Bannerstile bereit?
WPConsent zeichnet seine Zustimmungs-Oberfläche in einem in sich geschlossenen Container namens Shadow Root. Dieser Container hat seine eigene private Stylesheet, die verhindert, dass Ihr Theme das Banner versehentlich neu gestaltet und das Banner Ihr Theme neu gestaltet. Es bedeutet auch, dass eine normale Theme-Regel wie .wpconsent-banner { background: black } das Banner überhaupt nicht erreicht.
Der unterstützte Weg ist eine Reihe von benutzerdefinierten CSS-Eigenschaften. WPConsent liest seine Farben, Abstände, Ecken und Schriftgrößen aus diesen Eigenschaften. Das Setzen einer davon aus Ihrem eigenen Stylesheet ändert das Banner, ohne das Plugin zu berühren. Jede Eigenschaft ist mit dem Präfix --wpconsent- benannt.
Sie alle werden gegen ein einzelnes Element aufgelöst, den Container mit der ID wpconsent-container, und das ist der Selektor, den Sie anvisieren müssen:
#wpconsent-container { --wpconsent-background: #101820; }
Das Anvisieren dieses Containers ist wichtig, da er der einzige Ort ist, an dem eine einfache Regel ohne !important auskommt. Regeln, die gegen :root oder html geschrieben sind, sehen wie die offensichtliche Wahl aus und tun nichts für das Banner, da WPConsent seine eigenen Werte weiter unten auf der Seite setzt.
Hinweis: Benutzerdefinierte Eigenschaften werden kaskadiert, sodass eine Regel für #wpconsent-container das Zustimmungsbanner und das Präferenzfenster zusammen abdeckt. Der schwebende Einstellungsknopf und Ihre Platzhalter für blockierte Inhalte benötigen jeweils ihre eigene Regel, die die folgenden Abschnitte behandeln.
Wo Sie die Regel platzieren, bleibt Ihnen überlassen. Das Stylesheet Ihres Child-Themes, Darstellung » Anpassen » Zusätzliches CSS oder ein CSS-Snippet-Plugin funktionieren alle. Unser Leitfaden zur Anpassung des Banners mit CSS geht die Optionen durch.
Bevor Sie eine Regel schreiben, sollten Sie wissen, welche der Eigenschaften bereits einen von Ihnen selbst gewählten Wert haben.
Die Werte finden, die Ihr CSS überschreibt
Um zu beginnen, ordnen wir die Farbfelder des Bannerdesigners ihren Eigenschaftsnamen zu. Die meisten Farb- und Schriftarteigenschaften sind die Einstellungen, die Sie dort bereits gespeichert haben und als CSS veröffentlicht haben. Eine Regel, die eine davon ändert, ist wirklich eine Regel, die ein Feld überschreibt, das Sie sehen können.
Gehen Sie in Ihrer WordPress-Admin-Seitenleiste zu WPConsent » Banner Design und öffnen Sie dann den Tab Stil.
Der Abschnitt Schaltflächenfarbe am Ende dieses Panels enthält die Werte hinter den Eigenschaften der Schaltflächen.
Jedes Feld entspricht einer Eigenschaft:
--wpconsent-accept-bgund--wpconsent-accept-colorstammen von Hintergrund akzeptieren und dessen Schriftfarbe.--wpconsent-cancel-bgund--wpconsent-cancel-colorstammen von Hintergrund abbrechen und dessen Schriftfarbe.--wpconsent-preferences-bgund--wpconsent-preferences-colorstammen von Hintergrund anpassen und dessen Schriftfarbe, was die Schaltfläche für Einstellungen ist.--wpconsent-background,--wpconsent-textund--wpconsent-font-sizestammen aus dem Abschnitt Banner weiter oben im selben Panel.
Unser Leitfaden zum Banner-Styling behandelt dieses Panel vollständig. Mit der Zuordnung können Sie beginnen, sie zu überschreiben.
Neugestaltung des Zustimmungsbannes
Das Banner ist die Oberfläche, die die meisten Leute zuerst ändern möchten, und es reagiert auf zwei Eigenschaftsgruppen: eine für Farbe, eine für Form und Typ. Hier ist das Banner, wie WPConsent es vor jeglichem benutzerdefinierten CSS zeichnet, damit Sie etwas zum Vergleichen haben.
Farben ändern
Die Farbpalette des Banners stammt vom Hintergrund und Text des Panels sowie von einem Hintergrund und einer Textfarbe für jede Schaltfläche. Das gemeinsame Festlegen dieser Werte sorgt dafür, dass ein neu gestaltetes Banner überlegt aussieht und nicht halbherzig umgewandelt wurde.
#wpconsent-container {
--wpconsent-background: #101820;
--wpconsent-text: #f3f4f6;
--wpconsent-accept-bg: #f8b500;
--wpconsent-accept-color: #101820;
--wpconsent-cancel-bg: #2b3a46;
--wpconsent-cancel-color: #f3f4f6;
--wpconsent-preferences-bg: #2b3a46;
--wpconsent-preferences-color: #f3f4f6;
}
Diese Regel verwandelt dasselbe Banner in ein dunkles Panel mit einer einzigen hervorgehobenen Aktion.
Beide Eigenschaftsgruppen können in derselben Regel stehen, und die zweite Gruppe ist dort, wo die Einstellungen ausgehen.
Form und Typ ändern
Die zweite Gruppe steuert die Geometrie: Eckabrundung, Schattenwurf, Innenabstand, wie breit das Panel wird, und den Typ. Keines davon hat ein entsprechendes Feld in der Stilansicht, daher ist CSS der einzige Weg, um darauf zuzugreifen.
#wpconsent-container {
--wpconsent-border-radius: 0;
--wpconsent-shadow: none;
--wpconsent-padding: 24px 32px;
--wpconsent-min-width: 640px;
--wpconsent-font-size: 17px;
--wpconsent-line-height: 1.7;
}
Das Ergebnis ist ein Panel mit eckigen Ecken, flach und geräumiger.
--wpconsent-min-width legt die geringste zulässige Breite des Panels fest, und das Panel wächst weiterhin, um längeren Hinweistext aufzunehmen, und wird auf die Bildschirmbreite begrenzt. Das Banner-Panel ist nur die Hälfte dessen, was diese Eigenschaften erreichen.
Neugestaltung des Präferenzfensters
Das Einstellungsfenster wird im selben Container wie das Banner gezeichnet, sodass es alle dort festgelegten Eigenschaften erbt. Die Farbregel aus dem vorherigen Abschnitt muss nicht ergänzt werden: Der Hintergrund des Fensters, die Kategorienamen und die eigenen Schaltflächen des Fensters folgen alle mit.
Die Schaltflächen des Fensters verwenden die drei Schaltflächen-Eigenschaftspaare wieder, anstatt eigene zu haben:
--wpconsent-accept-bgund--wpconsent-accept-colorgestalten die Schaltfläche Alle akzeptieren des Fensters.--wpconsent-cancel-bgund--wpconsent-cancel-colorgestalten die Schaltfläche Schließen.--wpconsent-preferences-bgund--wpconsent-preferences-colorgestalten die Schaltfläche Speichern und schließen.
Deshalb entspricht das obige Fenster dem Banner ohne eine zweite Regel.
Eine Eigenschaft gehört speziell zu diesem Fenster:
--wpconsent-outline-colorzeichnet die horizontalen Linien, die die Kategorienzeilen trennen.
WPConsent setzt diese aus Ihrer gespeicherten Textfarbe mit reduzierter Deckkraft, sodass auf einem dunklen Fenster diese Linien schwächer erscheinen können als gewünscht. Die explizite Festlegung gibt Ihnen die Trennung zurück:
#wpconsent-container { --wpconsent-outline-color: rgba(248, 181, 0, 0.35); }
Unser Leitfaden zum Einstellungsfenster erklärt, was jede Zeile bewirkt.
Zwei Oberflächen entziehen sich dieser Kaskade, und jede erhält eine eigene kurze Regel.
Neugestaltung des schwebenden Einstellungsknopfs
Die schwebende Einstellungs-Schaltfläche ist die kleine runde Steuerung, mit der Besucher ihre Auswahl wieder öffnen können, nachdem das Banner verschwunden ist. Sie übernimmt ihre Farben direkt und nicht über die benutzerdefinierten Eigenschaften, sodass die obige Farbregel sie unberührt lässt. Sie hat auch keine Positionseinstellung irgendwo im Admin-Bereich.
WPConsent stellt sie Ihrem Stylesheet unter dem Namen wpconsent-settings-button zur Verfügung, den Sie mit dem Selektor ::part() erreichen. Diese Regel verschiebt sie nach unten rechts, rundet sie zu einem Kreis, verleiht ihr einen tieferen Schatten und ändert ihre Farbe:
#wpconsent-container::part(wpconsent-settings-button) {
left: auto;
right: 28px;
bottom: 28px;
padding: 16px;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35);
background-color: #f8b500 !important;
}
Beachten Sie das !important bei der Hintergrundfarbe und nur bei der Hintergrundfarbe. WPConsent schreibt diesen Wert direkt in die Schaltfläche, damit sie Ihren gespeicherten Bannerfarben folgen kann, und !important sorgt dafür, dass Ihre Regel Vorrang hat. Position, Polsterung, Ecken und Schatten wirken alle ohne sie.
Das Symbol der Schaltfläche wird im Admin-Bereich und nicht in CSS ausgewählt, und unser Leitfaden zur schwebenden Einwilligungs-Schaltfläche behandelt die Auswahl. Die letzte Oberfläche ist die, die Ihre Besucher auf Ihren Seiten sehen und nicht in einer Ecke.
Abgleich Ihrer Platzhalter für blockierte Inhalte
Wenn die Inhaltsblockierung aktiviert ist, wird eine Einbettung, der ein Besucher nicht zugestimmt hat, durch einen Platzhalter mit eigener Akzeptanz-Schaltfläche ersetzt. Diese Schaltfläche verwendet zwei Eigenschaften wieder, die Sie bereits kennengelernt haben:
--wpconsent-accept-bgist der Hintergrund des Platzhalter-Buttons.--wpconsent-accept-colorist sein Text.
Der Platzhalter befindet sich außerhalb des Consent-Containers auf Ihrer Seite und benötigt daher beide Eigenschaften dort, wo er sie sehen kann.
Die Regel auf den Platzhalter selbst zu beschränken, ist der übersichtlichste Weg, dies zu tun:
.wpconsent-iframe-placeholder {
--wpconsent-accept-bg: #f8b500;
--wpconsent-accept-color: #101820;
}
Der Platzhalter-Button entspricht dann dem Akzeptieren-Button auf Ihrem Banner.
Die Wiederholung der beiden Werte in einer zweiten Regel ist beabsichtigt: Der Platzhalter und das Banner sind separate Teile der Seite, und die Trennung in separaten Regeln ermöglicht es Ihnen, dem Platzhalter eine andere Behandlung zukommen zu lassen, wenn Sie dies wünschen. Unser Leitfaden zu Content-Blocking und Platzhaltern behandelt das Aktivieren der Funktion und die Auswahl des Platzhaltertextes.
Das deckt alle vier Oberflächen ab, womit die Eigenschaften selbst übrig bleiben.
Nachschlagen jeder verfügbaren Eigenschaft
Hier sind alle benutzerdefinierten Eigenschaften, die die WPConsent-Consent-Oberfläche liest, gruppiert nach dem, was sie steuern. Alle davon gehören zu #wpconsent-container.
Farbeigenschaften
Diese übernehmen ihre Startwerte aus dem Stil-Tab, sodass eine Regel hier das überschreibt, was Sie dort gespeichert haben.
--wpconsent-backgroundist der Hintergrund des Panels, sowohl des Banners als auch des Präferenz-Panels.--wpconsent-textist die Textfarbe des Haupttextes und auch die Farbe des Icons des Sprachumschalters, wenn Sie mehr als eine Sprache aktiviert haben.--wpconsent-outline-colorist die horizontale Linie zwischen den Kategorienzeilen im Präferenz-Panel, die WPConsent aus Ihrer Textfarbe mit reduzierter Deckkraft setzt.--wpconsent-accept-bgund--wpconsent-accept-colorsind Hintergrund und Text des "Alle akzeptieren"-Buttons.--wpconsent-cancel-bgund--wpconsent-cancel-colorsind Hintergrund und Text des "Ablehnen"-Buttons, die mit dem "Schließen"-Button des Panels geteilt werden.--wpconsent-preferences-bgund--wpconsent-preferences-colorsind Hintergrund und Text des "Einstellungen"-Buttons, die mit dem "Speichern und schließen"-Button des Panels geteilt werden.
Layout- und Typografie-Eigenschaften
Diese haben kein Feld im Admin-Bereich, daher ist CSS die einzige Möglichkeit, sie festzulegen.
--wpconsent-border-radiusist die Abrundung der Ecken des Banner-Panels.--wpconsent-shadowist der Schlagschatten hinter dem Panel und nimmt jeden gültigenbox-shadow-Wert an, einschließlichnone.--wpconsent-paddingist der Abstand zwischen dem Rand des Panels und seinem Inhalt und nimmt jeden gültigenpadding-Wert an.--wpconsent-min-widthist die minimale Breite, die das Banner-Panel haben darf.--wpconsent-font-sizeist die Größe des Hinweistextes, die auch der Stil-Tab festlegt.--wpconsent-line-heightist der Zeilenabstand des Hinweistextes.--wpconsent-borderist die Rahmenfarbe des Dropdowns des Sprachumschalters und gilt, wenn Sie mehr als eine Sprache in einer kostenpflichtigen Version aktiviert haben.--wpconsent-z-indexist die Stapelreihenfolge der Einwilligungs-Oberfläche, für Websites, auf denen ein anderes festes Element über dem Banner liegt.
Schaltfläche „Schließen“ und Fokuseigenschaften
Diese gelten für das Schließen-Symbol des Banners und für den Fokusring, den Tastaturnutzer sehen.
--wpconsent-close-sizeist die Größe des Schließen-Symbols des Banners, bei Bannern, die eines anzeigen.--wpconsent-close-colorist die Farbe dieses Symbols.--wpconsent-focus-outline-colorist die Farbe des Fokusrings bei Schaltflächen und Kontrollkästchen.--wpconsent-focus-outline-widthist die Dicke dieses Rings.--wpconsent-focus-outline-offsetist der Abstand zwischen dem Ring und dem Element, das er umschließt.
Das ist alles! Sie wissen jetzt, wie Sie jede Oberfläche der WPConsent-Einwilligungs-Oberfläche von Ihrer eigenen Stylesheet aus neu gestalten können. Für die Einstellungen, die Sie ohne CSS-Code ändern können, werfen Sie einen Blick auf unseren Leitfaden zu Banner-Layout-Optionen.
Häufig gestellte Fragen
Warum ändert meine Theme-CSS das Banner nicht?
Die Einwilligungs-Oberfläche wird innerhalb eines Shadow-Roots mit eigener privater Stylesheet gezeichnet, sodass Selektoren, die die inneren Elemente des Banners abgleichen, sie von außen nie erreichen. Die benutzerdefinierten Eigenschaften sind der unterstützte Weg hinein, und der ::part()-Selektor deckt die schwebende Einstellungs-Schaltfläche ab. Siehe den Abschnitt Wie gibt WPConsent seine Banner-Stile preis? oben.
Kann ich die Regel stattdessen auf :root setzen?
Nicht für das Banner. WPConsent setzt seine eigenen Werte auf einem Wrapper weiter unten auf der Seite als html, sodass eine :root-Regel sie unabhängig von ihrer Spezifität verliert. Platzhalter für blockierte Inhalte sind die einzige Ausnahme, und die Beschränkung auf .wpconsent-iframe-placeholder behandelt diese sowieso präziser.
Benötige ich !important für diese Regeln?
Nur für die background-color und color der schwebenden Einstellungs-Schaltfläche, da WPConsent diese beiden Werte auf die Schaltfläche selbst schreibt. Jede benutzerdefinierte Eigenschaft auf #wpconsent-container wird ohne sie wirksam, ebenso wie alles andere in der ::part()-Regel.
Überlebt mein CSS ein Plugin-Update?
Ja. Die Regeln befinden sich in Ihrem Theme oder Ihrem CSS-Plugin und nicht in WPConsent, sodass das Aktualisieren des Plugins sie unberührt lässt. Benutzerdefinierte Eigenschaften sind auch die Schnittstelle, die WPConsent zu diesem Zweck veröffentlicht, was sie zur stabilsten Zieloption macht.
Benötigt das Präferenzfenster eine eigene Regel?
Nein. Es wird innerhalb desselben Containers wie das Banner gezeichnet und verwendet dieselben Eigenschaften wieder. Eine einzelne Regel für #wpconsent-container gestaltet daher beides neu. Siehe den Abschnitt Neugestaltung des Präferenzfensters oben.
Kann ich das Symbol auf der Einstellungs-Schaltfläche mit CSS ändern?
Das Symbol stammt aus dem Raster Button Icon auf der Registerkarte Style, wo Sie auch Ihr eigenes Bild hochladen können. Dieses Raster ist der Ort, an dem Sie es ändern können, und unser Leitfaden zum schwebenden Einwilligungs-Button führt Sie durch die Schritte.
Von welchen Werten gehen die Eigenschaften aus?
Die Eigenschaften für Farbe und Schriftgröße beginnen mit dem, was Sie auf der Registerkarte Stil gespeichert haben. Deshalb zeigt der Abschnitt Werte finden, die Ihr CSS überschreibt zuerst dieses Bedienfeld an. Die Eigenschaften für Layout, Schließen-Schaltfläche und Fokus stammen aus der eigenen Stylesheet von WPConsent, und die Entwicklertools Ihres Browsers zeigen Ihnen deren aktuelle Werte unter #wpconsent-container an.
Funktionieren diese Regeln bei jedem Banner-Layout?
Die Eigenschaften für Farbe, Schriftgröße und Zeilenhöhe gelten für jedes Layout. Diese vier gestalten das Bedienfeld, daher sind sie für die Layouts „Floating“ und „Modal“ bestimmt, die das Banner als Karte darstellen:
--wpconsent-border-radius--wpconsent-shadow--wpconsent-padding--wpconsent-min-width
Das Layout „Long“ stellt eine Vollbildleiste dar und legt seine eigenen Ecken, Schatten und Abstände fest, um dieser Form zu entsprechen. Unser Leitfaden zu Banner-Layout-Optionen behandelt die Layouts.