WPConsent utiliza propiedades CSS personalizadas (o variables CSS) para ofrecerte un control detallado sobre los estilos del banner.

Piensa 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 hojas de estilo complejas, puedes sobrescribir fácilmente estas variables en un solo lugar para aplicar tus cambios.

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

Cómo usar variables CSS

Para personalizar el banner, necesitas proporcionar tus propios valores para las variables CSS. La forma más fiable de hacerlo es apuntando al ID principal del banner, #wpconsent-container, en tu propia hoja de estilos.

Aquí tienes 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, se describen 4 opciones en este artículo.

Referencia completa de variables CSS

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

Variables de diseño 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. Aumenta este valor si el banner aparece detrás de otros elementos de tu sitio.
• 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).
• Ejemplo:

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

--wpconsent-padding

• Por defecto: 15px 20px
• Propósito: Controla el espaciado interno (relleno) 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. Usa 0 para esquinas cuadradas.
• 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 proyectada para el banner. Establece a none para eliminarla.
• Ejemplo:

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

---

Variables de color

Estas variables controlan la paleta de colores del banner. Si bien muchas se pueden configurar 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.
• Propósito: El color de fondo para el banner principal y la ventana modal de preferencias.
• 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.
• 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.
• Ejemplo:

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

--wpconsent-outline-color

• Por defecto: Calculado como el 20% de opacidad del color del texto.
• Propósito: Se utiliza para bordes y separadores sutiles, principalmente en la ventana modal de preferencias.
• Ejemplo:

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

---

Variables de Color de Botones

Controla la apariencia de los botones de “Aceptar”, “Rechazar” y “Preferencias”.

--wpconsent-accept-bg

• Propósito: Color de fondo para el botón “Aceptar todo”.
• Ejemplo:

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

--wpconsent-accept-color

• Propósito: Color del texto para el botón “Aceptar todo”.
• Ejemplo:

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

--wpconsent-cancel-bg

• Propósito: Color de fondo para el botón “Rechazar todo”.

--wpconsent-cancel-color

• Propósito: Color del texto para el botón “Rechazar todo”.

--wpconsent-preferences-bg

• Propósito: Color de fondo para el botón “Preferencias” o “Configuración”.

--wpconsent-preferences-color

• Propósito: Color del texto para el botón “Preferencias” o “Configuración”.

---

Variables de Tipografía

Controla los tamaños de fuente 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 texto principal del cuerpo 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 del texto del banner, afectando la legibilidad.

---

Variables de Elementos Interactivos

Personaliza 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 del botón de cierre ‘X’.

--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 críticas para asegurar que tu banner sea utilizable para todos, especialmente para aquellos que usan navegación por teclado.

--wpconsent-focus-outline-color

• Por defecto: #007cba (azul de WordPress)
• Propósito: Establece el color del contorno de enfoque que aparece al navegar con un teclado. Asegúrate de que tenga un buen contraste con tu fondo.

--wpconsent-focus-outline-width

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

--wpconsent-focus-outline-offset

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

---

Variables del Botón de Configuración/Preferencias

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

Nota: Estas son variables globales y deben aplicarse al selector :root, no a #wpconsent-container.

--wpconsent-floating-button-bg

• Propósito: Color de fondo del botón flotante.

--wpconsent-floating-button-color

• Propósito: El color del icono/texto para el botón flotante.

---

Ejemplos de personalización avanzada

Aquí tienes algunos “temas” que puedes usar como punto de partida. Simplemente copia y pega el código en tu CSS personalizado.

Ejemplo 1: Tema oscuro moderno

#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 minimalista

Este ejemplo hace que los botones “Rechazar” y “Preferencias” aparezcan como enlaces de solo 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 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 de CSS se admiten en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Navegadores más antiguos como Internet Explorer no admitirán estas personalizaciones y verán el tema predeterminado.