Wie kann ich die Styles des Cookiebanners anpassen?

Mithilfe der folgenden CSS-Klassen, lässt sich der Cookiebanner individuell an den Style Ihrer Webseite anpassen.

{{ primaryButtonBackgroundColor }}

Hintergrundfarbe der primären Schaltfläche

{{ primaryButtonForegroundColor }}

Schriftfarbe der primären Schaltfläche

{{ primaryButtonBorderColor }}

Rahmenfarbe der primären Schaltflächen

{{ declineButtonBackgroundColor }}

Hintergrundfarbe der Ablehnen-Schaltfläche

{{ declineButtonForegroundColor }}

Schriftfarbe der Ablehnen-Schaltfläche

{{ declineButtonBorderColor }}

Rahmenfarbe der Ablehnen-Schaltfläche

{{ otherButtonBackgroundColor }}

Hintergrundfarbe sonstiger Schaltflächen

{{ otherButtonForegroundColor }}

Schriftfarbe sonstiger Schaltflächen

{{ otherButtonBorderColor }}

Rahmenfarbe sonstiger Schaltflächen

{{ settingsIconBackgroundColor }}

Hintergrundfarbe des Einstellungs-Icons

{{ settingsIconForegroundColor }}

Vordergrundfarbe des Einstellungs-Icons

{{ windowBackgroundColor }}

Hintergrundfarbe des Hauptfensters

{{ windowForegroundColor }}

Schriftfarbe des Hauptfensters

{{ windowBorderColor }}

Rahmenfarbe des Hauptfensters

{{ windowLinkColor }}

Linkfarbe des Hauptfensters

{{ iframeBlockerBackgroundColor }}

Hintergrundfarbe des IFrame-Blockers

{{ iframeBlockerForegroundColor }}

Schriftfarbe des IFrame-Blockers

{{ iframeBlockerButtonBackgroundColor }}

Schaltflächen-Hintergrundfarbe des IFrame-Blockers

{{ iframeBlockerButtonForegroundColor }}

Schaltflächen-Schriftfarbe des IFrame-Blockers

{{ primaryColor }}

Die erkannte primäre Branding-Farbe, entweder die Vorder- oder Hintergrundfarbe der primären Schaltfläche

{{ primaryColorContrast }}

Die Kontrastfarbe zur erkannten primären Branding-Farbe, entweder die Vorder- oder Hintergrundfarbe der primären Schaltfläche

{{ secondaryColor }}

Die erkannte sekundäre Branding-Farbe, entweder die Vorder- oder Hintergrundfarbe sonstiger Schaltflächen

{{ secondaryColorContrast }}

Die Kontrastfarbe zur erkannten sekundären Branding-Farbe, entweder die Vorder- oder Hintergrundfarbe sonstiger Schaltflächen

{{ dismissIconColor }}

Die Farbe des -Icons, abgeleitet von der Fenster-Schriftfarbe

{{ headingForegroundColor }}

Die Schriftfarbe für Überschriften, abgeleitet von der Fenster-Schriftfarbe

{{ tableHeadingBackgroundColor }}

Die Hintergrundfarbe des Tabellenkopfes, abgeleitet von der Schriftfarbe sonstiger Schaltflächen

{{ tableHeadingForegroundColor }}

Die Schriftfarbe des Tabellenkopfes, abgeleitet von der Hintergrundfarbe sonstiger Schaltflächen

{{ tableBackgroundColorEven }} und {{ tableBackgroundColorOdd }}

Die alternierenden Hintergrundfarben von Tabellenzeilen, beide abgeleitet von der Fenster-Hintergrundfarbe

{{ tableForegroundColor }}

Die standardmäßige Textfarbe in Tabellen, abgeleitet von der Fenster-Schriftfarbe

{{ footerLinkColor }}

Die standardmäßige Farbe von Verweisen im Fußbereich. Weiß oder Schwarz, abhängig von der Helligkeit der Fenster-Rahmenfarbe

{{ footerBorderColor }}

Die Rahmenfarbe des Fußbereichs, abgeleitet von der Rahmenfarbe des Fensters

{{ subFooterBackgroundColor }}

Die Hintergrundfarbe des sekundären Fußbereichs in einigen Layouts, abgeleitet von der Fenster-Rahmenfarbe

{{ position }}

Position des Hauptfensters (top/center/button)

{{ selectType }}

Auswahltyp (checkbox/switch)

{{ showPurposesInMainWindow }}

Ob die Kategorien im Hauptfenster angezeigt werden

{{ defaultScrollbarWidth }}

Angenommene Breite von Scroll-Leisten

Zusätzlich können Sie einige Twig-Ausdrücke verwenden, um z.B. Farben von anderen Farben abzuleiten

{{ primaryButtonBackgroundColor|lighten(20) }}

Dies erzeugt eine Farbe, die 20% heller ist, als die primäre Schaltflächen-Hintergrundfarbe

{{ primaryButtonBackgroundColor|darken(20) }}

Dies erzeugt eine Farbe, die 20% dunkler ist, als die primäre Schaltflächen-Hintergrundfarbe

{{ primaryButtonBackgroundColor|hover }}

Dies erzeugt eine Farbe, die für Hover-Effekte geeignet ist. Ein wenig heller oder dunkler als die primäre Schaltflächen-Hintergrundfarbe, abhängig von der Helligkeit der ursprünglichen Farbe

{{ primaryButtonBackgroundColor|hover(20) }}

Dies erzeugt eine Farbe, die 20% heller oder dunkler ist, als die primäre Schaltflächen-Hintergrundfarbe, abhängig von der Helligkeit der ursprünglichen Farbe

{{ primaryButtonBackgroundColor|alpha(0.6) }}

Dies erzeugt eine halbtransparente Farbe mit einer Deckkraft von 0.6 (60 %)

{{ selectColor(windowBackgroundColor, 'black', 'white') }}

Dies wählt eine Farbe, abhängig von der Helligkeit einer Referenzfarbe aus. In diesem Fall Schwarz für einen hellen Fenster-Hintergrund und Weiß für einen dunklen Hintergrund.