Haben die CSS-Regeln deines Themes überhaupt keine Auswirkung auf dein Cookie-Banner? Alles, was du brauchst, ist irgendwo auf deiner Website, um ein paar Zeilen CSS aufzubewahren.
Dieser Leitfaden behandelt, wo WPConsent seine Stile speichert, welche Selektoren sie erreichen und wo du deine eigenen Regeln platzieren kannst.
Inhaltsverzeichnis
- Warum ändert das CSS deines Themes das Banner nicht?
- Hinzufügen deines CSS zu WordPress
- Styling des Banners von außerhalb des Shadow Root
- Banner-Elemente mit ::part() erreichen
- Styling der Cookie-Richtlinien-Seite
- Styling deiner blockierten Inhaltsplatzhalter
- Auswahl des richtigen Selektors
- Häufig gestellte Fragen
Stellen Sie vor Beginn sicher, dass WPConsent auf Ihrer WordPress-Website installiert und aktiviert ist.
Warum ändert das CSS deines Themes das Banner nicht?
WPConsent erstellt das Zustimmungsbanner und das Präferenzfeld innerhalb eines Shadow Root. Ein Shadow Root ist ein in sich geschlossenes Mini-Dokument, das an ein Element auf deiner Seite angehängt ist.
Dieses Mini-Dokument trägt seine eigene Stylesheet, und die Grenze darum herum funktioniert in beide Richtungen. Die Button-Stile von WPConsent dringen niemals auf deine Website durch, und die Stile deiner Website erreichen sie niemals.
Deshalb scheint eine Regel wie .wpconsent-banner { background: black } ignoriert zu werden. Sie wird nicht von etwas spezifischerem überboten. Der Selektor hat nichts, das übereinstimmt, weil das Element, das er benennt, auf der anderen Seite der Grenze sitzt.
Das Hinzufügen von !important ändert nichts, und das Anhäufen zusätzlicher Selektoren wie html .wpconsent-banner ebenfalls nicht. Das direkte Anvisieren der Buttons oder des Präferenzfeldes macht ebenfalls keinen Unterschied.
Dieselbe Grenze erklärt auch etwas anderes, das du vielleicht bemerkt hast. Das Stylesheet des Banners von WPConsent wird nicht zusammen mit dem deines Themes in den Entwicklertools deines Browsers aufgeführt. WPConsent lädt es stattdessen aus dem Shadow Root.
Drei Dinge überqueren die Grenze, und jedes hat seinen eigenen Abschnitt oder seinen eigenen Leitfaden:
- Geerbte Eigenschaften, die auf dem Container gesetzt sind. Dies ist der einzige Weg, der gewöhnliches CSS verwendet, und der Abschnitt nach dem nächsten behandelt ihn.
- CSS-Benutzerdefinierte Eigenschaften. Dies sind die Mittel, mit denen WPConsent seine Farben, Abstände, Ecken und Schriftgrößen zur Überschreibung veröffentlicht.
- Der
::part()Selektor. Dieser erreicht die einzelnen Elemente, die WPConsent namentlich freigibt, einschließlich des schwebenden Einstellungsbuttons. Der Abschnitt Banner-Elemente mit ::part() erreichen nennt sie alle.
Hinweis: Unser Leitfaden zur Anpassung des Banners mit CSS-Variablen nennt jede benutzerdefinierte Eigenschaft. Der Abschnitt über ::part() unten nennt jedes Element, das WPConsent freigibt.
Der Rest von WPConsent ist eine andere Geschichte. Deine Cookie-Richtlinien-Seite, deine blockierten Inhaltsplatzhalter und der Präferenzbutton sind alles normale Seiteninhalte. Kein Shadow Root kommt ihnen nahe, daher nehmen sie normales CSS an.
Diese drei machen den Großteil dieses Leitfadens aus, und die erste Frage ist, wohin die Regeln gehören.
Hinzufügen deines CSS zu WordPress
Um zu beginnen, finden wir ein Zuhause für Ihre Regeln. Sie gehören dorthin, wo Sie bereits das benutzerdefinierte CSS Ihrer Website aufbewahren. WordPress hat dafür einen eingebauten Platz, und diesen empfehlen wir.
Gehen Sie in Ihrem WordPress-Admin zu Design » Anpassen. Öffnen Sie von hier aus Zusätzliches CSS und fügen Sie Ihre Regel in den Editor ein.
Änderungen, die im Customizer vorgenommen werden, erreichen Ihre Besucher, sobald sie veröffentlicht sind. Bis dahin behält das Banner sein aktuelles Aussehen.
Die Stylesheet eines Child-Themes funktioniert ebenfalls, ebenso wie ein CSS-Snippet in einem Code-Snippet-Plugin. Es gibt jedoch einen praktischen Grund, Zusätzliches CSS zu bevorzugen.
WordPress gibt Zusätzliches CSS nach jedem Plugin-Stylesheet aus. Wenn also Ihre Regel und eine der eigenen Regeln von WPConsent gleich spezifisch sind, hat Ihre Regel Vorrang.
Ein Theme-Stylesheet wird früher auf der Seite ausgegeben als das von WPConsent. Von dort aus kann dieselbe Regel diesen Gleichstand verlieren. Die Lösung ist ein einzelner zusätzlicher Selektor, der Ihre Regel unabhängig von der Ladeordnung über das Plugin stellt. Jedes Platzhalterbeispiel weiter unten ist so geschrieben, dass es von jedem der drei Orte aus funktioniert.
Der Leitfaden von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS in WordPress vergleicht die drei Orte detaillierter.
Mit einem Ort, an dem Sie eine Regel platzieren können, ist das Banner selbst der erste Ort, an dem Sie eine ausprobieren können.
Styling des Banners von außerhalb des Shadow Root
Eine Familie von CSS-Eigenschaften durchquert absichtlich eine Schatten-Grenze: die geerbten, wie z. B. font-family. Das Stylesheet von WPConsent startet den Schatten-Root, indem es alles zurücksetzt und dann die Schriftart-Vererbung wieder aktiviert. Deshalb übernimmt das Banner bereits die Schriftart, die Ihre Seite verwendet.
Hier ist dieses Banner vor jeglichem benutzerdefinierten CSS.
Eine Regel für den Container ersetzt, was das Banner erbt, und der Wert wird an alles darin weitergegeben:
#wpconsent-container {
font-family: Georgia, serif;
letter-spacing: 0.01em;
}
Der Benachrichtigungstext übernimmt sofort die neue Schriftart. Der Buchstabenabstand ist eine feine Anpassung und keine sichtbare Änderung. Er ist dazu da, zu zeigen, dass eine zweite geerbte Eigenschaft auf die gleiche Weise übertragen wird.
Die drei Schaltflächen behalten ihre ursprüngliche Schriftart. Das liegt an den Browsern und nicht an WPConsent: Ein <button> erhält seine eigene Schriftart vom integrierten Stylesheet des Browsers. Der nächste Abschnitt behandelt den Selektor, der sie erreicht.
letter-spacing, text-transform, font-weight und font-style erreichen das Banner auf die gleiche Weise vom Container aus. Farben, Hintergründe, Abstände und Eckradien nicht, da diese Eigenschaften nicht vererbt werden. Dafür sind die benutzerdefinierten Eigenschaften da.
Hinweis: Platzieren Sie die Regel auf #wpconsent-container und nicht auf :root oder html. Eine :root-Regel sieht wie die offensichtliche Wahl aus und bewirkt hier nichts. Die eigenen Werte von WPConsent und die font-family Ihres Themes auf body sitzen näher am Banner als html.
Das ist alles, was das normale CSS mit dem Banner machen kann. Ein weiterer Selektor greift hinein, und er ist die Antwort auf diese drei Schaltflächen.
Banner-Elemente mit ::part() erreichen
WPConsent gibt den meisten Elementen in seinem Shadow Root einen öffentlichen Namen. Ein Name ist etwas, das Ihre Stylesheet-Datei sogar über die Grenze hinweg auswählen kann, mit dem Selektor ::part().
Der Selektor ist immer der Container, dann der Name des Elements, das Sie möchten:
#wpconsent-container::part(wpconsent-button-accept) { font-family: Georgia, serif; }
Dies ist, was die drei Schaltflächen erreicht, die im vorherigen Abschnitt ihre Browser-Schriftart beibehalten haben. Wenn Sie alle drei benennen, werden sie in die gleiche Serifenschrift wie der Benachrichtigungstext gesetzt, in kleiner Großbuchstaben-Schrift:
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences) {
font-family: Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
Jeder Name erreicht eine Art von Element, und ein Element, das WPConsent nicht benannt hat, kann auf diese Weise überhaupt nicht erreicht werden. Der Rest dieses Abschnitts sind alle vorhandenen Namen, gruppiert nach ihrem Standort.
Hinweis: Für Farben, Abstände, Ecken und Schriftgrößen sind die benutzerdefinierten Eigenschaften der kürzere Weg, und eine Regel für den Container deckt den Banner und das Panel zusammen ab. Greifen Sie zu ::part(), wenn Sie eine Eigenschaft wünschen, die die benutzerdefinierten Eigenschaften nicht mitführen, oder wenn Sie möchten, dass sich ein Element vom Rest unterscheidet.
Banner-Teile
wpconsent-bannerist der Banner selbst, unabhängig vom Layout, das Sie eingestellt haben.wpconsent-banner-bodyist der Block, der Ihren Cookie-Hinweistext enthält.wpconsent-banner-footerist die Zeile, die die Schaltflächen enthält.wpconsent-banner-logoist das Logo-Bild und erscheint nur, wenn Sie in Ihren Banner-Einstellungen ein Logo festgelegt haben.wpconsent-button-accept,wpconsent-button-cancelundwpconsent-button-preferencessind die Schaltflächen Akzeptieren, Ablehnen und Einstellungen.
Teile des Einstellungsfensters
wpconsent-preferences-modalist das äußerste Element des Fensters undwpconsent-preferences-contentist die Karte darin.wpconsent-preferences-headerist der Streifen oben, derwpconsent-preferences-titlefür die Überschrift undwpconsent-preferences-closefür die Schließen-Steuerung enthält.wpconsent-preferences-descriptionist der Einführungstext unter dem Header.wpconsent-preferences-accordionumschließt jede Kategoriezeile.wpconsent-preferences-actionsist der Footer mitwpconsent-preferences-buttonsfür die darin enthaltene Schaltflächenzeile.wpconsent-preferences-buttons-leftist die linke Gruppe dieser Zeile, die Alle akzeptieren und Schließen enthält. Die Schaltfläche Speichern befindet sich außerhalb davon.wpconsent-preferences-accept-button,wpconsent-preferences-cancel-buttonundwpconsent-preferences-save-buttonsind die Schaltflächen „Alle akzeptieren“, „Schließen“ und „Speichern und schließen“ des Panels.
Teile für Kategorien und Dienstreihen
Jede erweiterbare Zeile im Panel teilt sich einen Satz von Namen, egal ob es sich um eine Kategorie oder einen einzelnen Dienst handelt:
wpconsent-accordion-itemist jede einzelne Zeile.wpconsent-accordion-headerist der Streifen, auf den Sie klicken, undwpconsent-accordion-toggleist das Steuerelement darauf.wpconsent-accordion-contentist der Bereich, der sich darunter öffnet.wpconsent-checkbox-toggleist der Ein-/Aus-Schalter in einer Zeile. Eine Zeile, die Besucher nicht ausschalten können, wie z. B. wesentliche Cookies, trägt auchwpconsent-checkbox-toggle-disabled.wpconsent-cookie-policy-itemist die Zeile, die zu Ihrer Cookie-Richtlinie verlinkt und nur erscheint, wenn Sie eine Seite für die Cookie-Richtlinie ausgewählt haben.
Zwei der Namen werden aus Ihren eigenen Inhalten erstellt, sodass sie je nach Website variieren:
wpconsent-category-plus der Kategorie-Slug benennt eine Kategorienzeile, wie z. B.wpconsent-category-marketing.wpconsent-service-plus der Dienst-Slug benennt eine Dienstreihe, wie z. B.wpconsent-service-google-analytics.
Diese beiden sind das, was Sie verwenden, wenn Sie möchten, dass eine Kategorie oder ein Dienst anders aussieht als der Rest.
Teile der Cookie-Tabelle
Das Erweitern einer Zeile zeigt die Cookies an, die sie abdeckt, in einer eigenen kleinen Tabelle:
wpconsent-cookies-listist die Tabelle.wpconsent-cookies-list-headerist ihre Kopfzeile.wpconsent-cookies-list-itemist jeder Cookie, der darunter aufgeführt ist.
Teil des schwebenden Einstellungsbuttons
wpconsent-settings-buttonist das kleine runde Steuerelement, das das Panel wieder öffnet, nachdem das Banner verschwunden ist.
Dieses ist eine Erwähnung wert, da es der einzige Teil ist, dessen Hintergrundfarbe !important benötigt, um sich zu ändern. Unser Leitfaden zur Anpassung des Banners mit CSS-Variablen behandelt das Verschieben und Einfärben.
Alles von hier an ist ein Teil von WPConsent, der auf Ihren Seiten platziert wird. Dort verhält sich CSS so, wie es überall sonst auch tut.
Styling der Cookie-Richtlinien-Seite
Ihre Cookie-Richtlinien-Seite wird durch einen Shortcode erstellt und als normaler Seiteninhalt gerendert. Es gibt keine Grenze, um die man herumarbeiten müsste.
Hier sehen Sie, wie eine ihrer Tabellen mit nur den eigenen Stilen von WPConsent aussieht.
Sechs Klassen decken alles ab, was der Shortcode ausgibt:
.wpconsent-cookie-policyumschließt die gesamte Ausgabe..wpconsent-cookie-category-nameist die Überschrift für jede Cookie-Kategorie, mit.wpconsent-cookie-category-descriptionfür den Einführungstext..wpconsent-cookie-service-nameund.wpconsent-cookie-service-descriptionerledigen die gleiche Aufgabe für jeden Dienst innerhalb einer Kategorie..wpconsent-cookie-policy-tableist jede Tabelle auf der Seite.
Diese Regel verleiht den Tabellen eine dunkle Kopfzeile, ordentlichere Ränder und einen wärmeren Streifen auf abwechselnden Zeilen:
.wpconsent-cookie-policy-table th {
background-color: #101820;
color: #f8b500;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 13px;
}
.wpconsent-cookie-policy-table th,
.wpconsent-cookie-policy-table td {
border-color: #d8dde2;
padding: 12px 14px;
}
.wpconsent-cookie-policy-table tbody tr:nth-child(odd) td {
background-color: #fbf7ec;
}
Keine Regel in diesem Abschnitt erfordert !important, und das ist von WPConsent beabsichtigt. Seine eigenen Cookie-Richtlinienregeln haben keinerlei Spezifität, rein um einen Start-Look zu setzen, den jede Ihrer Regeln ersetzen kann.
Das Tabellen-Styling Ihres Themes gewinnt aus demselben Grund. Deshalb nimmt eine Richtlinienseite das Aussehen des Rests Ihrer Website an, bevor Sie sie berühren.
Unser Leitfaden zur Cookie-Richtlinienseite behandelt die Erstellung der Seite und deren Aktualisierung.
Die andere Oberfläche, die Ihre Besucher auf Ihren Seiten treffen, ist das, was anstelle eines blockierten Einbettungsrahmens erscheint.
Styling deiner blockierten Inhaltsplatzhalter
Wenn die Inhaltsblockierung aktiviert ist, wird eine Einbettung, der ein Besucher nicht zugestimmt hat, durch einen Platzhalter ersetzt. Dieser Platzhalter ist ebenfalls ein gewöhnliches Seiten-Markup, sodass er gewöhnliches CSS annimmt.
Ein Platzhalter besteht aus vier Elementen:
.wpconsent-iframe-placeholderist die äußere Box, die anstelle der Einbettung tritt..wpconsent-iframe-thumbnailenthält eine Vorschau des blockierten Inhalts..wpconsent-iframe-overlay-contentbedeckt die gesamte Box und zentriert den Button. Dies ist das Element, das Sie verwenden sollten, wenn Sie einen Farbton über der Vorschau wünschen..wpconsent-iframe-accept-buttonist der Button selbst.
Diese Regel rundet die Box ab, entzieht der Vorschau die Farbe, legt einen Farbton darüber und verwandelt den Button in eine Pille:
.wpconsent-iframe-placeholder {
border: 2px solid #d8dde2;
border-radius: 12px;
}
.wpconsent-iframe-placeholder .wpconsent-iframe-thumbnail img {
filter: grayscale(1);
}
.wpconsent-iframe-placeholder .wpconsent-iframe-overlay-content {
background-color: rgba(16, 24, 32, 0.55);
}
.wpconsent-iframe-placeholder .wpconsent-iframe-accept-button {
padding: 14px 26px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35);
}
Jede der letzten drei Regeln benennt sowohl den Platzhalter als auch das darin enthaltene Element. Das ist der erwähnte zusätzliche Selektor. Er ermöglicht es der Regel, sowohl aus einem Child-Theme-Stylesheet als auch aus Additional CSS zu funktionieren.
Die gezielte Ansprache eines einzelnen Dienstes ist ebenfalls möglich. Jeder Platzhalter trägt eine zweite Klasse, die den ersetzten Dienst benennt, wie z. B. .wpconsent-iframe-placeholder-google-maps. Er trägt auch die Attribute data-wpconsent-name und data-wpconsent-category.
Ein Selektor wie [data-wpconsent-category="marketing"] .wpconsent-iframe-accept-button erreicht jeden Marketing-Platzhalter auf Ihrer Website und lässt den Rest unberührt.
Die Hintergrund- und Textfarbe des Buttons sind die einzigen Dinge, die Sie woanders ändern. Sie stammen aus denselben beiden benutzerdefinierten Eigenschaften wie der Button Alle akzeptieren des Banners. Daher ist der Leitfaden zu CSS-Variablen der richtige Ort, um sie festzulegen.
Unser Leitfaden zu Inhaltsblockierung und Platzhaltern behandelt das Aktivieren der Funktion und die Auswahl des Platzhaltertextes.
Das deckt alle drei Oberflächen ab, was die Frage offen lässt, wie man selbst einen Selektor findet.
Auswahl des richtigen Selektors
Die Klassen der Cookie-Richtlinie, die Klassen der Platzhalter und der Präferenz-Button verhalten sich alle wie normale Elemente im Inspektor Ihres Browsers. Die Klasse, die Sie benötigen, befindet sich direkt im hervorgehobenen Markup.
Das Banner verhält sich anders, und es ist gut zu wissen, was Sie da sehen. Die Inspektion zeigt #wpconsent-container mit einer verschachtelten Zeile #shadow-root (open). Das Erweitern dieser Zeile enthüllt das gesamte Banner, einschließlich der Klassennamen.
Diese Klassennamen sind echt, und der Inspektor zeigt Ihnen die Stile darauf. Eine Regel, die in Ihrem Stylesheet dagegen geschrieben ist, wird sie trotzdem nicht erreichen. Der Baum ist eine Möglichkeit zu verstehen, woraus das Banner besteht, nicht eine Möglichkeit, es zu gestalten.
Hier sind alle WPConsent-Elemente, die sich außerhalb des Shadow-Roots befinden, an einem Ort:
#wpconsent-containerist das Element, an dem das Banner angebracht ist, und das Ziel für geerbte und benutzerdefinierte Eigenschaften..wpconsent-cookie-policyund die fünf Klassen darin sind die Cookie-Richtlinien-Seite..wpconsent-iframe-placeholderund die drei Klassen darin sind die blockierten Inhaltsplatzhalter..wpconsent-open-preferencesist der Button, den WPConsents Präferenz-Shortcode ausgibt, wo immer Sie ihn platziert haben.
Letzterer übernimmt sein Aussehen von Ihrem Theme, so wie jeder andere Button auf Ihren Seiten. Eine kurze Regel gibt ihm ein eigenes Aussehen:
.wpconsent-open-preferences {
background-color: #101820;
color: #f8b500;
border-radius: 999px;
padding: 12px 22px;
}
Unser Leitfaden zum Öffnen des Präferenzfensters mit einem benutzerdefinierten Link behandelt das Hinzufügen dieses Buttons zu einer Seite oder einem Menü.
Das ist alles! Sie wissen jetzt, welche Teile von WPConsent normale CSS-Regeln annehmen, welche einen anderen Weg benötigen und wo Sie die Regeln aufbewahren sollten. Um die Farben, Abstände und Ecken des Banners zu ändern, werfen Sie einen Blick auf unseren Leitfaden zum Anpassen des Banners mit CSS-Variablen.
Häufig gestellte Fragen
Unten haben wir einige der häufigsten Fragen zum Styling von WPConsent mit eigenem CSS beantwortet.
Warum wird meine Regel für .wpconsent-banner ignoriert?
Dieses Element befindet sich in einem Shadow-Root, sodass ein Selektor in Ihrem Stylesheet nichts zum Abgleichen hat. Dies gilt, egal wie spezifisch Sie den Selektor machen und ob Sie !important hinzufügen oder nicht. Der Abschnitt Warum ändert das CSS Ihres Themes das Banner nicht? oben erklärt, was stattdessen verwendet werden soll.
Kann ich die Regel stattdessen auf :root setzen?
Nicht für das Banner. Ihr Theme deklariert geerbte Eigenschaften wie font-family auf body, welches näher am Banner liegt als html. WPConsent's eigene benutzerdefinierte Eigenschaftswerte liegen noch näher, verwenden Sie also #wpconsent-container.
Benötige ich !important für eine dieser Regeln?
Nein. Keines der Beispiele in dieser Anleitung verwendet es, einschließlich der Regeln für Cookie-Richtlinien und Platzhalter. Der einzige Ort, an dem es wirklich benötigt wird, ist die Hintergrundfarbe des schwebenden Einstellungsknopfes, die der Leitfaden für CSS-Variablen behandelt.
Kann ich das Schließen-Symbol des Banners mit ::part() gestalten?
Nein. Das Schließen-Symbol ist das einzige Banner-Element, dem WPConsent keinen öffentlichen Namen gibt, sodass kein Teil ausgewählt werden kann. Seine Größe und Farbe stammen stattdessen von zwei benutzerdefinierten Eigenschaften, die unser Leitfaden zur Anpassung des Banners mit CSS-Variablen behandelt.
Wo sollte ich das CSS aufbewahren?
Design » Anpassen » Zusätzliches CSS ist die einfachste Option. WordPress gibt es nach den Stylesheets des Plugins aus, sodass Ihre Regeln bei Gleichstand in der Spezifität gewinnen. Ein Child-Theme-Stylesheet oder ein Code-Snippet-Plugin funktioniert ebenfalls, mit einem zusätzlichen Selektor, der zu jeder Regel hinzugefügt wird, die gleichrangig ist.
Überlebt mein CSS ein Plugin-Update?
Ja. Die Regeln befinden sich in Ihrem Theme, im Customizer oder in Ihrem Snippet-Plugin und nicht innerhalb von WPConsent. Das Aktualisieren des Plugins lässt sie unberührt.
Kann ich die Formulierung des Banners mit CSS ändern?
Die Formulierung ist eine Einstellung und keine Sache, die gestaltet wird. WPConsent hat Felder für alles. Unser Leitfaden zu Bannerinhalt und Text führt durch die Benachrichtigung, die Schaltflächenbeschriftungen und die Panel-Überschriften.
Wo finde ich das Banner-Stylesheet von WPConsent?
Es wird aus dem Shadow Root geladen und nicht aus der Seite selbst. Die WPConsent-Stylesheets, die Sie auf der Seite sehen, sind das für blockierte Inhaltsplatzhalter und das für Cookie-Richtlinien-Tabellen. Das für die Cookie-Richtlinien wird nur auf Seiten geladen, die den Shortcode enthalten.
Benötige ich eine kostenpflichtige Lizenz für etwas davon?
Nein. Der Shadow Root, der Container-Selektor, die Cookie-Richtlinien-Klassen und die Platzhalter-Klassen funktionieren auf jeder Lizenzstufe gleich. Jede Regel in dieser Anleitung gilt für jede WPConsent-Website.