CSS personalizzato

Per il controllo completo sull'aspetto del banner, usa CSS personalizzato per sovrascrivere qualsiasi stile.

Dove aggiungere CSS personalizzato

Vai su Banner Builder → Avanzate → CSS personalizzato e incolla il tuo CSS.

Il CSS personalizzato viene iniettato in un tag <style> all'interno dello shadow DOM di ConsentForge, quindi riguarda solo il banner — non gli stili del tuo sito web.

Nomi delle classi del banner

Selettore	Elemento
.cf-banner	Contenitore radice del banner
.cf-banner__title	Intestazione del banner
.cf-banner__description	Testo del corpo del banner
.cf-btn-accept	Pulsante Accetta tutto
.cf-btn-reject	Pulsante Rifiuta tutto
.cf-btn-customize	Pulsante Personalizza / Gestisci preferenze
.cf-preference-center	Overlay del Centro preferenze
.cf-category	Una singola riga di categoria nel Centro preferenze
.cf-toggle	L'input di toggle del consenso

Esempi

Pulsanti arrotondati

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

Pulsanti a larghezza piena su mobile

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

Colore toggle personalizzato

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

Variabili CSS

Per modifiche di colore/font, preferisci le variabili CSS agli override delle classi — sono più manutenibili e sicure agli aggiornamenti.