WPConsent verwendet CSS Custom Properties (oder CSS-Variablen), um Ihnen eine detaillierte Kontrolle über die Stile des Banners zu ermöglichen.

Betrachten Sie CSS-Variablen als Platzhalter für Stilwerte (wie Farben, Schriftgrößen und Abstände). Anstatt komplexe Stylesheets zu durchsuchen, können Sie diese Variablen einfach an einer Stelle überschreiben, um Ihre Änderungen anzuwenden.

Diese Anleitung zeigt Ihnen, wie Sie diese Variablen verwenden, und bietet eine vollständige Referenzliste aller verfügbaren Optionen.

Verwendung von CSS-Variablen

Um das Banner anzupassen, müssen Sie eigene Werte für die CSS-Variablen angeben. Der zuverlässigste Weg, dies zu tun, ist, die Haupt-ID des Banners, #wpconsent-container, in Ihrem eigenen Stylesheet anzusprechen.

Hier ist die grundlegende Struktur:

/* Add this to your custom CSS area */
#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-border-radius: 0px;
    --wpconsent-accept-bg: #0073aa;
}

Sie können dieses benutzerdefinierte CSS auf verschiedene Arten hinzufügen. 4 Optionen werden in diesem Artikel beschrieben.

Vollständige CSS-Variablenreferenz

Hier ist eine vollständige Liste aller CSS-Variablen, die Sie zur Anpassung des WPConsent-Banners verwenden können.

Layout- & Positionierungsvariablen

Diese Variablen steuern die Größe, Form und Position des Banners auf der Seite.

--wpconsent-z-index

• Standard: 900000
• Zweck: Steuert die Stapelreihenfolge des Banners. Erhöhen Sie diesen Wert, wenn das Banner hinter anderen Elementen auf Ihrer Website angezeigt wird.
• Beispiel:

#wpconsent-container {
    --wpconsent-z-index: 999999;
}

--wpconsent-min-width

• Standard: 526px
• Zweck: Legt die Mindestbreite des Banners auf größeren Bildschirmen fest (gilt nicht für mobile Geräte unter 767 Pixel).
• Beispiel:

#wpconsent-container {
    --wpconsent-min-width: 600px; /* Make the banner wider */
}

--wpconsent-padding

• Standard: 15px 20px
• Zweck: Steuert den Innenabstand (Padding) innerhalb des Banners.
• Beispiel:

#wpconsent-container {
    --wpconsent-padding: 25px 30px; /* More internal spacing */
}

--wpconsent-border-radius

• Standard: 10px
• Zweck: Legt die Rundung der Ecken des Banners fest. Verwenden Sie 0 für eckige Ecken.
• Beispiel:

#wpconsent-container {
    --wpconsent-border-radius: 0; /* Square corners */
}

--wpconsent-shadow

• Standard: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px
• Zweck: Definiert den Schlagschatteneffekt für das Banner. Setzen Sie auf none, um ihn zu entfernen.
• Beispiel:

#wpconsent-container {
    --wpconsent-shadow: none; /* No shadow */
}

---

Farbvariablen

Diese Variablen steuern die Farbpalette des Banners. Während viele in der Admin-Oberfläche eingestellt werden können, können Sie sie hier überschreiben, um mehr Kontrolle zu erhalten.

--wpconsent-background

• Standard: Einstellung über die Admin-Oberfläche.
• Zweck: Die Hintergrundfarbe für das Hauptbanner und das Präferenz-Modal.
• Beispiel:

#wpconsent-container {
    --wpconsent-background: #ffffff;
}

--wpconsent-text

• Standard: Einstellung über die Admin-Oberfläche.
• Zweck: Die Haupttextfarbe für alle Inhalte im Banner.
• Beispiel:

#wpconsent-container {
    --wpconsent-text: #222222;
}

--wpconsent-border

• Standard: var(--wpconsent-text) (erbt die Textfarbe)
• Zweck: Definiert die Rahmenfarbe für verschiedene Elemente im Banner.
• Beispiel:

#wpconsent-container {
    --wpconsent-border: #e0e0e0; /* Light gray border */
}

--wpconsent-outline-color

• Standard: Berechnet als 20% Deckkraft der Textfarbe.
• Zweck: Wird für dezente Rahmen und Trennlinien verwendet, hauptsächlich im Präferenz-Modal.
• Beispiel:

#wpconsent-container {
    --wpconsent-outline-color: rgba(0, 0, 0, 0.1);
}

---

Schaltflächen-Farbvariablen

Steuern Sie das Erscheinungsbild der Schaltflächen „Akzeptieren“, „Ablehnen“ und „Präferenzen“.

--wpconsent-accept-bg

• Zweck: Hintergrundfarbe für die Schaltfläche „Alle akzeptieren“.
• Beispiel:

#wpconsent-container {
    --wpconsent-accept-bg: #28a745; /* Green */
}

--wpconsent-accept-color

• Zweck: Textfarbe für die Schaltfläche „Alle akzeptieren“.
• Beispiel:

#wpconsent-container {
    --wpconsent-accept-color: #ffffff; /* White text */
}

--wpconsent-cancel-bg

• Zweck: Hintergrundfarbe für die Schaltfläche „Alle ablehnen“.

--wpconsent-cancel-color

• Zweck: Textfarbe für die Schaltfläche „Alle ablehnen“.

--wpconsent-preferences-bg

• Zweck: Hintergrundfarbe für die Schaltfläche „Präferenzen“ oder „Einstellungen“.

--wpconsent-preferences-color

• Zweck: Textfarbe für die Schaltfläche „Präferenzen“ oder „Einstellungen“.

---

Typografie-Variablen

Steuern Sie die Schriftgrößen und Zeilenhöhe des Bannertexts.

--wpconsent-font-size

• Standard: Einstellung über die Admin-Oberfläche.
• Zweck: Die Basisschriftgröße für den Haupttext im Banner.

--wpconsent-title-size

• Standard: 20px
• Zweck: Die Schriftgröße für den Haupttitel des Banners.

--wpconsent-line-height

• Standard: 1.4
• Zweck: Steuert die Zeilenhöhe für den Bannertext und beeinflusst die Lesbarkeit.

---

Interaktive Elementvariablen

Passen Sie kleinere Elemente wie die Schließen-Schaltfläche an.

--wpconsent-close-size

• Standard: 12px
• Zweck: Legt die Größe (Breite und Höhe) des 'X'-Schließen-Icons fest.

--wpconsent-close-color

• Standard: #454545
• Zweck: Steuert die Farbe des 'X'-Schließen-Icons.

---

Barrierefreiheitsvariablen

Diese Variablen sind entscheidend, um sicherzustellen, dass Ihr Banner für alle nutzbar ist,  insbesondere für Personen, die die Tastaturnavigation verwenden.

--wpconsent-focus-outline-color

• Standard: #007cba (WordPress-Blau)
• Zweck: Legt die Farbe der Fokus-Umrandung fest, die bei der Navigation mit der Tastatur erscheint. Stellen Sie sicher, dass diese einen guten Kontrast zum Hintergrund aufweist.

–wpconsent-focus-outline-width

• Standard: 2px
• Zweck: Steuert die Dicke der Tastatur-Fokus-Umrandung.

--wpconsent-focus-outline-offset

• Standard: 2px
• Zweck: Legt den Abstand zwischen dem fokussierten Element und seiner Umrandung fest.

---

Variablen für Einstellungen/Präferenzen-Schaltfläche

Diese Variablen gestalten die kleine schwebende Schaltfläche, mit der Benutzer das Einverständnis-Modal erneut öffnen können. 

Hinweis: Dies sind globale Variablen und sollten dem :root -Selektor zugewiesen werden, nicht #wpconsent-container.

--wpconsent-floating-button-bg

• Zweck: Hintergrundfarbe der schwebenden Schaltfläche.

--wpconsent-floating-button-color

• Zweck: Die Symbol-/Textfarbe für die schwebende Schaltfläche.

---

Erweiterte Anpassungsbeispiele

Hier sind einige „Themes“, die Sie als Ausgangspunkt verwenden können. Kopieren Sie einfach den Code und fügen Sie ihn in Ihr benutzerdefiniertes CSS ein.

Beispiel 1: Modernes dunkles Theme

#wpconsent-container {
    --wpconsent-background: #1a1a1a;
    --wpconsent-text: #e0e0e0;
    --wpconsent-border-radius: 15px;
    --wpconsent-padding: 25px 30px;
    --wpconsent-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    --wpconsent-accept-bg: #4caf50;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: #424242;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #616161;
    --wpconsent-preferences-color: #ffffff;

    --wpconsent-close-color: #e0e0e0;
    --wpconsent-focus-outline-color: #4caf50;
}

Beispiel 2: Minimalistisches klares Design

Dieses Beispiel lässt die Schaltflächen „Ablehnen“ und „Einstellungen“ als reine Textlinks erscheinen.

#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-text: #212121;
    --wpconsent-border-radius: 0;
    --wpconsent-padding: 20px;
    --wpconsent-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wpconsent-min-width: 480px;

    --wpconsent-accept-bg: #212121;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: transparent;
    --wpconsent-cancel-color: #212121;
    --wpconsent-preferences-bg: transparent;
    --wpconsent-preferences-color: #212121;

    --wpconsent-font-size: 14px;
    --wpconsent-title-size: 18px;
    --wpconsent-line-height: 1.6;
}

Beispiel 3: Hoher Kontrast für Barrierefreiheit

#wpconsent-container {
    --wpconsent-background: #000000;
    --wpconsent-text: #ffffff;
    --wpconsent-outline-color: #ffffff;

    --wpconsent-accept-bg: #00ff00;
    --wpconsent-accept-color: #000000;
    --wpconsent-cancel-bg: #ff0000;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #ffff00;
    --wpconsent-preferences-color: #000000;

    --wpconsent-focus-outline-color: #ffff00;
    --wpconsent-focus-outline-width: 3px;
    --wpconsent-focus-outline-offset: 3px;

    --wpconsent-close-color: #ffffff;
}

---

Browserkompatibilität

CSS Custom Properties werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Ältere Browser wie der Internet Explorer unterstützen diese Anpassungen nicht und zeigen das Standarddesign an.