CSS Personalizzato

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

Dove aggiungere il CSS personalizzato

Andate su Costruttore Banner → Avanzate → CSS Personalizzato e incollate il vostro CSS.

Il CSS personalizzato viene iniettato in un tag <style> all'interno del shadow DOM di ConsentForge, quindi influisce solo sul banner — non sugli stili del vostro 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 dell'interruttore di 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 personalizzato dell'interruttore

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

Variabili CSS

Per le modifiche a colori/caratteri, preferite le variabili CSS rispetto alle sostituzioni di classe — sono più manutenibili e resistenti agli aggiornamenti.