WPConsent ist so konzipiert, dass es einfach angepasst werden kann, um zum Branding Ihrer Website zu passen. Obwohl es so entwickelt wurde, dass es sofort einsatzbereit ist, ohne mit Ihrem Theme zu kollidieren, haben Sie die Kontrolle über sein Erscheinungsbild mithilfe einer modernen CSS-Funktion namens CSS ::part() Selektoren.

Diese Anleitung erklärt, warum WPConsent so aufgebaut ist und wie Sie Ihre eigenen Stile sicher anwenden können.

Warum WPConsent Shadow DOM verwendet

Sie stellen möglicherweise fest, dass die gezielte Ansprache von Bannerelementen mit Standard-CSS (wie .wpconsent-button) nicht funktioniert. Dies ist beabsichtigt und liegt an einer Technologie namens Shadow DOM.

Was ist Shadow DOM?

Shadow DOM ist ein Webstandard, der eine isolierte „Blase“ für das WPConsent-Banner erstellt. Diese Isolierung bietet zwei Hauptvorteile:

1. Stil-Isolation: Stile innerhalb des Banners (wie unsere Button-Stile) können nicht nach außen dringen und Ihre Hauptwebsite beeinträchtigen.
2. Schutz vor externen Stilen: Stile Ihres Themes oder anderer Plugins (wie button { background: red !important; }) können das Layout oder Erscheinungsbild des Banners nicht versehentlich beschädigen.

Durch die Verwendung von Shadow DOM gewährleistet WPConsent maximale Kompatibilität mit allen WordPress-Themes und Plugins und bietet ein konsistentes, funktionales Banner auf allen Websites.

Anpassen mit CSS ::part() Selektoren

Um die Anpassung in diese isolierte Blase zu ermöglichen, „exponiert“ WPConsent bestimmte Elemente mithilfe eines part-Attributs. Sie können diese Teile mit dem Pseudo-Selektor ::part() stylen.

Schritt 1: Fügen Sie Ihr benutzerdefiniertes CSS hinzu

Sie können Ihr benutzerdefiniertes CSS an den üblichen Stellen hinzufügen. In Ihrem Theme oder mit einem Code-Snippet-Plugin wie WPCode. Weitere Optionen zum Hinzufügen von CSS zu Ihrer Website finden Sie in diesem Artikel.

Schritt 2: Verwenden Sie die ::part() Syntax

Alle WPConsent-Teilselektoren müssen damit beginnen, den Hauptcontainer #wpconsent-container anzusprechen. Von dort aus verwenden Sie ::part(), um das spezifische Element anzusprechen, das Sie ändern möchten.

Hier sind einige gängige Anpassungen für den Anfang.

Beispiel 1: Verschieben des schwebenden Einstellungsbuttons

Nachdem das Banner geschlossen wurde, kann ein schwebender „Einstellungen“-Button erscheinen. Standardmäßig befindet er sich unten links. Verschieben wir ihn in die untere rechte Ecke.

#wpconsent-container::part(wpconsent-settings-button) {
    left: auto;
    right: 20px;
    bottom: 20px; /* Make sure to set the bottom position too */
}

Beispiel 2: Ändern des „Alle akzeptieren“-Buttons im Einstellungsfenster

Der „Alle akzeptieren“-Button im Einstellungsmodal (wpconsent-preferences-accept-button) hat standardmäßig den Stil des „Akzeptieren“-Buttons des Hauptbanners. Sie können ihn überschreiben, um ihm einen einzigartigen Stil zu geben.

Machen wir ihn zu einem blauen Farbverlauf.

#wpconsent-container::part(wpconsent-preferences-accept-button) {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    border: none;
    font-weight: 600;
}

Vollständige Referenztabelle der Teile

Sie können Dutzende von Elementen innerhalb des Banners und des Einstellungsmodals anpassen. Verwenden Sie diese Tabelle, um den richtigen part-Namen für das Element zu finden, das Sie stylen möchten.