WPConsent verwendet benutzerdefinierte CSS-Eigenschaften (oder CSS-Variablen), um Ihnen eine genaue Kontrolle über die Stile des Banners zu geben.

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

Dieser Leitfaden zeigt Ihnen, wie Sie diese Variablen verwenden können, und enthält eine vollständige Referenzliste aller verfügbaren Optionen.

Wie man CSS-Variablen verwendet

Um das Banner anzupassen, müssen Sie Ihre eigenen Werte für die CSS-Variablen angeben. Am zuverlässigsten geht das, indem Sie die Haupt-ID des Banners anvisieren, #wpconsent-containerin Ihrem eigenen Stylesheet.

Hier ist die Grundstruktur:

/* 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 Weise hinzufügen, 4 Optionen werden in diesem Artikel beschrieben.

Vollständige CSS-Variablen-Referenz

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

Layout- und 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 Mobilgeräte unter 767px).
• Beispiel:

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

--wpconsent-padding

• Standard: 15px 20px
• Zweck: Steuert den internen Abstand (Polsterung) 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 0 für quadratische 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: Legt den Schlagschatteneffekt für das Banner fest. Eingestellt auf none um sie zu entfernen.
• Beispiel:

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

---

Farbvariablen

Diese Variablen steuern die Farbpalette des Banners. Viele können in der Verwaltungsoberfläche eingestellt werden, aber Sie können sie hier überschreiben, um mehr Kontrolle zu haben.

--wpconsent-background

• Standard: Über die Verwaltungsoberfläche eingestellt.
• Zweck: Die Hintergrundfarbe für den Hauptbanner und das Einstellungsmodal.
• Beispiel:

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

--wpconsent-text

• Standard: Über die Verwaltungsoberfläche eingestellt.
• Zweck: Die Haupttextfarbe für alle Inhalte des Banners.
• Beispiel:

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

--wpconsent-border

• Standard: var(--wpconsent-text) (erbt die Textfarbe)
• Zweck: Legt die Rahmenfarbe für verschiedene Elemente innerhalb des Banners fest.
• Beispiel:

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

--wpconsent-outline-color

• Voreinstellung: Berechnet als 20% Deckkraft der Textfarbe.
• Zweck: Wird für dezente Ränder und Trennlinien verwendet, vor allem im Einstellungsmodal.
• Beispiel:

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

---

Schaltfläche Farbvariablen

Steuern Sie das Aussehen der Schaltflächen "Annehmen", "Ablehnen" und "Voreinstellungen".

--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 "Voreinstellungen" oder "Einstellungen".

--wpconsent-preferences-color

• Zweck: Textfarbe für die Schaltfläche "Voreinstellungen" oder "Einstellungen".

---

Typografie-Variablen

Steuern Sie die Schriftgröße und Zeilenhöhe des Bannertextes.

--wpconsent-font-size

• Standard: Über die Verwaltungsoberfläche eingestellt.
• 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, was die Lesbarkeit beeinflusst.

---

Interaktive Element-Variablen

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

--wpconsent-close-size

• Standard: 12px
• Zweck: Legt die Größe (Breite und Höhe) des Symbols für die Schaltfläche "X" zum Schließen fest.

--wpconsent-close-color

• Standard: #454545
• Zweck: Steuert die Farbe des Symbols für die Schaltfläche "X" zum Schließen.

---

Zugänglichkeitsvariablen

Diese Variablen sind entscheidend, um sicherzustellen, dass Ihr Banner von allen genutzt werden kann, insbesondere von denjenigen, die mit der Tastatur navigieren.

--wpconsent-focus-outline-color

• Standard: #007cba (WordPress blau)
• Zweck: Legt die Farbe des Fokusumrisses fest, der beim Navigieren mit der Tastatur erscheint. Achten Sie darauf, dass diese Farbe einen guten Kontrast zum Hintergrund hat.

-wpconsent-focus-outline-width

• Standard: 2px
• Zweck: Steuert die Dicke des Umrisses des Tastaturfokus.

--wpconsent-focus-outline-offset

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

---

Einstellungen/Präferenzen Schaltfläche Variablen

Mit diesen Variablen wird die kleine, schwebende Schaltfläche gestaltet, mit der die Benutzer das Zustimmungsmodal erneut öffnen können. 

Anmerkung: Dies sind globale Variablen und sollten auf die :root Selektor, 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.

---

Beispiele für erweiterte Anpassungen

Hier sind ein paar "Themen", die Sie als Ausgangspunkt verwenden können. Kopieren Sie einfach den Code und fügen Sie ihn in Ihr eigenes CSS ein.

Beispiel 1: Modernes dunkles Thema

#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

In diesem Beispiel werden die Schaltflächen "Ablehnen" und "Voreinstellungen" als reine Textlinks angezeigt.

#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;
}

---

Browser-Kompatibilität

Benutzerdefinierte CSS-Eigenschaften werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Ältere Browser wie Internet Explorer unterstützen diese Anpassungen nicht und zeigen das Standardthema an.