Aangepaste CSS

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

Waar u aangepaste CSS kunt toevoegen

Ga naar Banner Builder → 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.

Bannerklassenamen

Selector	Element
`.cf-banner`	Banner-rootcontainer
`.cf-banner__title`	Bannerkoptekst
`.cf-banner__description`	Bannerintrotekst
`.cf-btn-accept`	Alles accepteren-knop
`.cf-btn-reject`	Alles weigeren-knop
`.cf-btn-customize`	Aanpassen / Voorkeuren beheren-knop
`.cf-preference-center`	Voorkeurencentrum-overlay
`.cf-category`	Een enkele categorierij in het Voorkeurencentrum
`.cf-toggle`	De toestemmingsschakelaar

Voorbeelden

Afgeronde knoppen

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

Knoppen met volledige breedte 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, geef de voorkeur aan CSS-variabelen boven klasse-overschrijvingen — ze zijn beter onderhoudbaar en upgrade-bestendig.

Waar u aangepaste CSS kunt toevoegen​

Bannerklassenamen​

Voorbeelden​

Afgeronde knoppen​

Knoppen met volledige breedte op mobiel​

Aangepaste schakelaarkleur​

CSS-variabelen​