CSS personnalisé

Pour un contrôle total sur l'apparence de la bannière, utilisez le CSS personnalisé pour remplacer n'importe quel style.

Où ajouter du CSS personnalisé

Accédez à Constructeur de bannière → Avancé → CSS personnalisé et collez votre CSS.

Le CSS personnalisé est injecté dans une balise <style> au sein du DOM fantôme de ConsentForge, de sorte qu'il n'affecte que la bannière — pas les styles de votre site.

Noms de classes de la bannière

Sélecteur	Élément
.cf-banner	Conteneur racine de la bannière
.cf-banner__title	En-tête de la bannière
.cf-banner__description	Texte du corps de la bannière
.cf-btn-accept	Bouton Tout accepter
.cf-btn-reject	Bouton Tout refuser
.cf-btn-customize	Bouton Personnaliser / Gérer les préférences
.cf-preference-center	Superposition du Centre de préférences
.cf-category	Une rangée de catégorie unique dans le Centre de préférences
.cf-toggle	L'entrée de bascule de consentement

Exemples

Boutons arrondis

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

Boutons pleine largeur sur mobile

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

Couleur de bascule personnalisée

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

Variables CSS

Pour les changements de couleur/police, préférez les variables CSS aux remplacements de classes — elles sont plus faciles à maintenir et résistantes aux mises à jour.