WPConsent está diseñado para ser fácilmente personalizable y coincidir con la marca de tu sitio. Si bien está construido para funcionar directamente sin entrar en conflicto con tu tema, tienes control sobre su apariencia utilizando una característica moderna de CSS llamada selectores CSS ::part().

Esta guía explica por qué WPConsent está construido de esta manera y cómo puedes aplicar tus propios estilos de forma segura.

Por qué WPConsent utiliza Shadow DOM

Es posible que notes que la selección de elementos del banner con CSS estándar (como .wpconsent-button) no funciona. Esto es intencional y se debe a una tecnología llamada Shadow DOM.

¿Qué es Shadow DOM?

Shadow DOM es un estándar web que crea una "burbuja" aislada para el banner WPConsent. Este aislamiento proporciona dos beneficios clave:

1. Aislamiento de estilos: Los estilos dentro del banner (como nuestros estilos de botón) no pueden filtrarse y afectar a tu sitio web principal.
2. Protección contra estilos externos: Los estilos de tu tema u otros complementos (como button { background: red !important; }) no pueden romper accidentalmente el diseño o la apariencia del banner.

Al utilizar Shadow DOM, WPConsent garantiza la máxima compatibilidad con todos los temas y complementos de WordPress, proporcionando un banner funcional y coherente en todos los sitios.

Cómo personalizar con selectores CSS ::part()

Para permitir la personalización dentro de esta burbuja aislada, WPConsent "expone" elementos específicos utilizando un atributo part. Puedes estilizar estas partes utilizando la pseudoselección ::part().

Paso 1: Añade tu CSS personalizado

Puedes añadir tu CSS personalizado en los mismos lugares donde lo harías normalmente. En tu tema o utilizando un plugin de fragmentos de código como WPCode. Para más opciones sobre cómo añadir CSS a tu sitio, consulta este artículo.

Paso 2: Utiliza la sintaxis ::part()

Todos los selectores de parte de WPConsent deben comenzar seleccionando el contenedor principal, #wpconsent-container. A partir de ahí, utilizas ::part() para seleccionar el elemento específico que deseas cambiar.

Aquí tienes algunas personalizaciones comunes para empezar.

Ejemplo 1: Mover el botón flotante de configuración

Después de descartar el banner, puede aparecer un botón flotante de "configuración". Por defecto, está en la esquina inferior izquierda. Vamos a moverlo a la esquina inferior derecha.

#wpconsent-container::part(wpconsent-settings-button) {
    left: auto;
    right: 20px;
    bottom: 20px; /* Make sure to set the bottom position too */
}

Ejemplo 2: Cambiar el botón "Aceptar todo" en el panel de preferencias

El botón "Aceptar todo" dentro de la ventana modal de preferencias (wpconsent-preferences-accept-button) tiene por defecto el estilo del botón "Aceptar" del banner principal. Puedes anularlo para darle un estilo único.

Hagámoslo un degradado azul.

#wpconsent-container::part(wpconsent-preferences-accept-button) {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    border: none;
    font-weight: 600;
}

Tabla completa de referencia de partes

Puedes personalizar docenas de elementos dentro del banner y la ventana modal de preferencias. Utiliza esta tabla para encontrar el nombre de part correcto para el elemento que deseas estilizar.