Aangepaste CSS

Voor volledige controle over het uiterlijk van de banner gebruikt u Aangepaste CSS om elke stijl te overschrijven.

Waar u aangepaste CSS toevoegt

Ga naar Bannerbouwer → Geavanceerd → Aangepaste CSS en plak uw CSS.

Aangepaste CSS wordt geïnjecteerd in een <style>-tag binnen de ConsentForge shadow DOM, zodat het alleen de banner beïnvloedt — niet de stijlen van uw website.

CSS-klassenamen van de banner

Selector	Element
.cf-banner	Hoofd-container van de banner
.cf-banner__title	Bannerkop
.cf-banner__description	Bannertekst
.cf-btn-accept	Knop Alles accepteren
.cf-btn-reject	Knop Alles weigeren
.cf-btn-customize	Knop Aanpassen / Voorkeuren beheren
.cf-preference-center	Overlay Voorkeurscentrum
.cf-category	Een enkele categorierij in het Voorkeurscentrum
.cf-toggle	Het toestemmingsschakelaar-element

Voorbeelden

Afgeronde knoppen

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

Volledige breedte knoppen op mobiel

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

Aangepaste schakelaarkleur

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

CSS-variabelen

Voor kleur-/lettertypewijzigingen verdienen CSS-variabelen de voorkeur boven klasse-overschrijvingen — ze zijn beter onderhoudbaar en upgradebestendig.