Benutzerdefiniertes CSS

Für vollständige Kontrolle über das Erscheinungsbild des Banners verwenden Sie benutzerdefiniertes CSS, um beliebige Stile zu überschreiben.

Wo benutzerdefiniertes CSS hinzugefügt wird

Gehen Sie zu Banner Builder → Erweitert → Benutzerdefiniertes CSS und fügen Sie Ihr CSS ein.

Benutzerdefiniertes CSS wird in ein <style>-Tag innerhalb des ConsentForge Shadow DOM eingefügt, sodass es nur das Banner betrifft – nicht die Stile Ihrer Website.

Banner-Klassennamen

Selektor	Element
.cf-banner	Stamm-Container des Banners
.cf-banner__title	Banner-Überschrift
.cf-banner__description	Banner-Fließtext
.cf-btn-accept	Schaltfläche „Alle akzeptieren"
.cf-btn-reject	Schaltfläche „Alle ablehnen"
.cf-btn-customize	Schaltfläche „Anpassen / Einstellungen verwalten"
.cf-preference-center	Overlay des Präferenzcenters
.cf-category	Eine einzelne Kategoriezeile im Präferenzcenter
.cf-toggle	Das Einwilligungs-Toggle-Element

Beispiele

Abgerundete Schaltflächen

.cf-btn-accept,
.cf-btn-reject,
.cf-btn-customize {
  border-radius: 9999px;
}

Vollbreite Schaltflächen auf Mobilgeräten

@media (max-width: 640px) {
  .cf-banner__actions {
    flex-direction: column;
  }
  .cf-btn-accept,
  .cf-btn-reject {
    width: 100%;
  }
}

Benutzerdefinierte Toggle-Farbe

.cf-toggle:checked {
  background-color: #10B981;
}

CSS-Variablen

Für Farb- und Schriftänderungen bevorzugen Sie CSS-Variablen gegenüber Klassen-Überschreibungen – sie sind wartungsfreundlicher und upgrade-sicher.