WPConsent está diseñado para ser fácilmente personalizado para que coincida con la marca de su sitio. Aunque está diseñado para funcionar de forma inmediata sin entrar en conflicto con tu tema, puedes controlar su apariencia utilizando una moderna función CSS llamada CSS ::part() selectores.

Esta guía explica por qué WPConsent está construido de esta manera y cómo puede aplicar con seguridad sus propios estilos.

Por qué WPConsent utiliza Shadow DOM

Es posible que observe que la orientación de los elementos de banner con CSS estándar (como .wpconsent-button) no funciona. Esto es intencionado y es gracias a una tecnología llamada DOM en la sombra.

¿Qué es el DOM en la sombra?

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

1. Aislamiento de estilos: Los estilos dentro del banner (como nuestros estilos de botón) no pueden filtrarse y afectar a su sitio web principal.
2. Protección contra estilos externos: Estilos de su tema u otros plugins (como button { background: red !important; }) no puede 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 plugins de WordPress, proporcionando un banner coherente y funcional en todos los sitios.

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

Para permitir la personalización en esta burbuja aislada, WPConsent "expone" elementos específicos utilizando un part atributo. Puede aplicar estilo a estas partes utilizando el atributo ::part() pseudo-selector.

Paso 1: Añada su CSS personalizado

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

Paso 2: Utilice la función ::part() Sintaxis

Todos los selectores de partes de WPConsent deben comenzar apuntando al contenedor principal, #wpconsent-container. A partir de ahí, se utiliza ::part() para seleccionar el elemento específico que desea cambiar.

He aquí algunas personalizaciones comunes para empezar.

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

Una vez descartado el banner, puede aparecer un botón flotante de "configuración". Por defecto, está en la parte inferior izquierda. Movámoslo 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" del panel de preferencias

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

Hagamos 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 piezas

Puede personalizar docenas de elementos dentro del banner y el modal de preferencias. Utilice esta tabla para encontrar el part para el elemento al que desea aplicar estilo.