WPConsent utiliza Propiedades Personalizadas CSS (o Variables CSS) para darle un control granular sobre los estilos del banner.

Piense en las variables CSS como marcadores de posición para valores de estilo (como colores, tamaños de fuente y espaciado). En lugar de buscar en complejas hojas de estilo, puedes anular fácilmente estas variables en un solo lugar para aplicar los cambios.

Esta guía le mostrará cómo utilizar estas variables y le proporcionará una lista de referencia completa de todas las opciones disponibles.

Cómo utilizar las variables CSS

Para personalizar el banner, debe proporcionar sus propios valores para las variables CSS. La forma más fiable de hacerlo es apuntando al ID principal del banner, #wpconsent-containeren su propia hoja de estilo.

Esta es la estructura básica:

/* Add this to your custom CSS area */
#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-border-radius: 0px;
    --wpconsent-accept-bg: #0073aa;
}

Puedes añadir este CSS personalizado de varias maneras, en este artículo se describen 4 opciones.

Referencia completa de variables CSS

Aquí tienes una lista completa de todas las variables CSS que puedes utilizar para personalizar el banner de WPConsent.

Variables de disposición y posicionamiento

Estas variables controlan el tamaño, la forma y la posición del banner en la página.

--wpconsent-z-index

• Por defecto: 900000
• Propósito: Controla el orden de apilamiento del banner. Auméntelo si el banner aparece detrás de otros elementos de su sitio.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-z-index: 999999;
}

--wpconsent-min-width

• Por defecto: 526px
• Propósito: Establece el ancho mínimo del banner en pantallas grandes (no se aplica a dispositivos móviles por debajo de 767px).
• Por ejemplo:

#wpconsent-container {
    --wpconsent-min-width: 600px; /* Make the banner wider */
}

--wpconsent-padding

• Por defecto: 15px 20px
• Propósito: Controla el espaciado interno (padding) dentro del banner.
• Ejemplo:

#wpconsent-container {
    --wpconsent-padding: 25px 30px; /* More internal spacing */
}

--wpconsent-border-radius

• Por defecto: 10px
• Propósito: Establece la redondez de las esquinas del banner. Utilice 0 para esquinas cuadradas.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-border-radius: 0; /* Square corners */
}

--wpconsent-shadow

• Por defecto: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px
• Propósito: Define el efecto de sombra para el banner. Establecer en none para quitarlo.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-shadow: none; /* No shadow */
}

---

Variables de color

Estas variables controlan la paleta de colores del banner. Aunque muchas pueden configurarse en la interfaz de administración, puedes anularlas aquí para tener un mayor control.

--wpconsent-background

• Por defecto: Configurado a través de la interfaz de administración.
• Finalidad: Color de fondo del banner principal y del modal de preferencias.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-background: #ffffff;
}

--wpconsent-text

• Por defecto: Configurado a través de la interfaz de administración.
• Propósito: El color del texto principal para todo el contenido del banner.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-text: #222222;
}

--wpconsent-border

• Por defecto: var(--wpconsent-text) (hereda el color del texto)
• Propósito: Define el color del borde para varios elementos dentro del banner.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-border: #e0e0e0; /* Light gray border */
}

--wpconsent-outline-color

• Por defecto: Calculado como un 20% de opacidad del color del texto.
• Finalidad: Se utiliza para bordes y separadores sutiles, principalmente en el modal de preferencias.
• Por ejemplo:

#wpconsent-container {
    --wpconsent-outline-color: rgba(0, 0, 0, 0.1);
}

---

Variables de color de los botones

Controle la apariencia de los botones "Aceptar", "Rechazar" y "Preferencias".

--wpconsent-accept-bg

• Finalidad: Color de fondo del botón "Aceptar todo".
• Por ejemplo:

#wpconsent-container {
    --wpconsent-accept-bg: #28a745; /* Green */
}

--wpconsent-accept-color

• Finalidad: Color del texto del botón "Aceptar todo".
• Ejemplo:

#wpconsent-container {
    --wpconsent-accept-color: #ffffff; /* White text */
}

--wpconsent-cancel-bg

• Objeto: color de fondo del botón "Rechazar todo".

--wpconsent-cancel-color

• Objeto: color del texto del botón "Rechazar todo".

--wpconsent-preferences-bg

• Objeto: color de fondo del botón "Preferencias" o "Configuración".

--wpconsent-preferences-color

• Objeto: color del texto del botón "Preferencias" o "Configuración".

---

Variables tipográficas

Controle el tamaño de letra y la altura de línea del texto del banner.

--wpconsent-font-size

• Por defecto: Configurado a través de la interfaz de administración.
• Propósito: El tamaño de fuente base para el cuerpo principal del texto en el banner.

--wpconsent-title-size

• Por defecto: 20px
• Propósito: El tamaño de fuente para el título principal del banner.

--wpconsent-line-height

• Por defecto: 1.4
• Propósito: Controla la altura de línea para el texto del banner, afectando la legibilidad.

---

Variables de elementos interactivos

Personalice los elementos más pequeños, como el botón de cierre.

--wpconsent-close-size

• Por defecto: 12px
• Propósito: Establece el tamaño (ancho y alto) del icono 'X' del botón cerrar.

--wpconsent-close-color

• Por defecto: #454545
• Propósito: Controla el color del icono del botón de cierre 'X'.

---

Variables de accesibilidad

Estas variables son fundamentales para garantizar que su banner sea utilizable por todo el mundo, especialmente por quienes utilizan la navegación por teclado.

--wpconsent-focus-outline-color

• Por defecto: #007cba (WordPress azul)
• Propósito: Establece el color del contorno de enfoque que aparece cuando se navega con un teclado. Asegúrese de que tiene un buen contraste con el fondo.

-wpconsent-focus-outline-width

• Por defecto: 2px
• Propósito: Controla el grosor del contorno del foco del teclado.

--wpconsent-focus-outline-offset

• Por defecto: 2px
• Objeto: Establece la distancia entre el elemento enfocado y su contorno.

---

Variables del botón Configuración/Preferencias

Estas variables dan estilo al pequeño botón flotante que permite a los usuarios volver a abrir el modal de consentimiento. 

Nota: Se trata de variables globales y deben aplicarse a los ficheros :root selector, no #wpconsent-container.

--wpconsent-floating-button-bg

• Finalidad: Color de fondo del botón flotante.

--wpconsent-floating-button-color

• Objeto: Color del icono/texto del botón flotante.

---

Ejemplos de personalización avanzada

Aquí tienes algunos "temas" que puedes utilizar como punto de partida. Solo tienes que copiar y pegar el código en tu CSS personalizado.

Ejemplo 1: Tema moderno y oscuro

#wpconsent-container {
    --wpconsent-background: #1a1a1a;
    --wpconsent-text: #e0e0e0;
    --wpconsent-border-radius: 15px;
    --wpconsent-padding: 25px 30px;
    --wpconsent-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    --wpconsent-accept-bg: #4caf50;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: #424242;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #616161;
    --wpconsent-preferences-color: #ffffff;

    --wpconsent-close-color: #e0e0e0;
    --wpconsent-focus-outline-color: #4caf50;
}

Ejemplo 2: Diseño limpio y minimalista

Este ejemplo hace que los botones "Rechazar" y "Preferencias" aparezcan como enlaces de sólo texto.

#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-text: #212121;
    --wpconsent-border-radius: 0;
    --wpconsent-padding: 20px;
    --wpconsent-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wpconsent-min-width: 480px;

    --wpconsent-accept-bg: #212121;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: transparent;
    --wpconsent-cancel-color: #212121;
    --wpconsent-preferences-bg: transparent;
    --wpconsent-preferences-color: #212121;

    --wpconsent-font-size: 14px;
    --wpconsent-title-size: 18px;
    --wpconsent-line-height: 1.6;
}

Ejemplo 3: Alto contraste para la accesibilidad

#wpconsent-container {
    --wpconsent-background: #000000;
    --wpconsent-text: #ffffff;
    --wpconsent-outline-color: #ffffff;

    --wpconsent-accept-bg: #00ff00;
    --wpconsent-accept-color: #000000;
    --wpconsent-cancel-bg: #ff0000;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #ffff00;
    --wpconsent-preferences-color: #000000;

    --wpconsent-focus-outline-color: #ffff00;
    --wpconsent-focus-outline-width: 3px;
    --wpconsent-focus-outline-offset: 3px;

    --wpconsent-close-color: #ffffff;
}

---

Compatibilidad con navegadores

Las propiedades personalizadas CSS son compatibles con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Los navegadores más antiguos, como Internet Explorer, no admiten estas personalizaciones y mostrarán el tema predeterminado.