CSS personalizado

Para tener control total sobre la apariencia del banner, use CSS personalizado para anular cualquier estilo.

Dónde agregar CSS personalizado

Vaya a Constructor de banners → Avanzado → CSS personalizado y pegue su CSS.

El CSS personalizado se inyecta en una etiqueta <style> dentro del shadow DOM de ConsentForge, por lo que solo afecta al banner — no a los estilos de su sitio web.

Nombres de clases del banner

Selector	Elemento
.cf-banner	Contenedor raíz del banner
.cf-banner__title	Encabezado del banner
.cf-banner__description	Texto del cuerpo del banner
.cf-btn-accept	Botón Aceptar todo
.cf-btn-reject	Botón Rechazar todo
.cf-btn-customize	Botón Personalizar / Gestionar preferencias
.cf-preference-center	Superposición del Centro de preferencias
.cf-category	Una fila de categoría en el Centro de preferencias
.cf-toggle	El interruptor de consentimiento

Ejemplos

Botones redondeados

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

Botones de ancho completo en móvil

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

Color personalizado del interruptor

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

Variables CSS

Para cambios de color/fuente, prefiera las variables CSS en lugar de las anulaciones de clase — son más fáciles de mantener y resistentes a las actualizaciones.