¿Te gustaría que tu banner de cookies coincidiera más estrechamente con tu tema de lo que la vista de Estilo puede gestionar por sí sola? Todo lo que necesitas es un lugar para poner unas pocas líneas de CSS.
Esta guía recorre las propiedades personalizadas de CSS que WPConsent expone para su interfaz de consentimiento y te muestra qué cambia cada una.
Tabla de contenidos
- ¿Cómo expone WPConsent los estilos de su banner?
- Encontrar los valores que anula tu CSS
- Restaurar el estilo del banner de consentimiento
- Restaurar el estilo del panel de preferencias
- Restaurar el estilo del botón flotante de configuración
- Coincidir con los marcadores de posición de tu contenido bloqueado
- Buscar cada propiedad disponible
- Preguntas frecuentes
Antes de empezar, asegúrate de que WPConsent esté instalado y activado en tu sitio de WordPress.
¿Cómo expone WPConsent los estilos de su banner?
WPConsent dibuja su interfaz de consentimiento dentro de un contenedor autónomo llamado shadow root. Ese contenedor tiene su propia hoja de estilos privada, que es lo que evita que tu tema cambie accidentalmente el estilo del banner y evita que el banner cambie el estilo de tu tema. También significa que una regla de tema normal como .wpconsent-banner { background: black } nunca llega al banner.
La forma admitida es un conjunto de propiedades personalizadas de CSS. WPConsent lee sus colores, espaciado, esquinas y tamaños de fuente de estas propiedades, por lo que establecer una desde tu propia hoja de estilos cambia el banner sin tocar el plugin. Cada propiedad se nombra con un prefijo --wpconsent-.
Todas se resuelven contra un solo elemento, el contenedor con el ID wpconsent-container, y ese es el selector al que apuntar:
#wpconsent-container { --wpconsent-background: #101820; }
Apuntar a ese contenedor es importante, porque es el único lugar donde una regla simple gana sin necesidad de !important. Las reglas escritas contra :root o html parecen la opción obvia y silenciosamente no hacen nada al banner, ya que WPConsent establece sus propios valores más abajo en la página que eso.
Nota: Las propiedades personalizadas se propagan, por lo que una regla en #wpconsent-container cubre el banner de consentimiento y el panel de preferencias juntos. El botón flotante de configuración y los marcadores de posición de tu contenido bloqueado necesitan su propia regla, que las secciones a continuación cubren.
Dónde pones la regla depende de ti. La hoja de estilos de tu tema hijo, Apariencia » Personalizar » CSS adicional, o un plugin de fragmentos de CSS funcionan. Nuestra guía sobre personalizar el banner con CSS repasa las opciones.
Antes de escribir una regla, vale la pena saber cuáles de las propiedades ya tienen un valor que elegiste tú mismo.
Encontrar los valores que anula tu CSS
Para empezar, mapearemos los campos de color del diseñador del banner a sus nombres de propiedad. La mayoría de las propiedades de color y tipo son la configuración que ya guardaste allí, publicada como CSS, por lo que una regla que cambia una es realmente una regla que anula un campo que puedes ver.
Desde la barra lateral de administración de WordPress, ve a WPConsent » Diseño del banner y abre la pestaña Estilo.
La sección Color del botón, cerca del final de este panel, contiene los valores de las propiedades del botón.
Cada campo se corresponde con una propiedad:
--wpconsent-accept-bgy--wpconsent-accept-colorprovienen de Fondo de aceptar y su Color de fuente.--wpconsent-cancel-bgy--wpconsent-cancel-colorprovienen de Fondo de cancelar y su Color de fuente.--wpconsent-preferences-bgy--wpconsent-preferences-colorprovienen de Fondo de personalizar y su Color de fuente, que es el botón de preferencias.--wpconsent-background,--wpconsent-texty--wpconsent-font-sizeprovienen de la sección Banner, más arriba en el mismo panel.
Nuestra guía sobre estilo del banner cubre este panel en su totalidad. Con el mapeo en mano, puedes empezar a anularlo.
Restaurar el estilo del banner de consentimiento
El banner es la superficie que la mayoría de la gente quiere cambiar primero, y responde a dos grupos de propiedades: uno para el color y otro para la forma y el tipo. Aquí está el banner tal como lo dibuja WPConsent antes de cualquier CSS personalizado, para que tengas algo con qué comparar.
Cambiar los colores
La paleta del banner proviene del fondo y el texto del panel, además de un color de fondo y un color de texto para cada botón. Configurarlos juntos es lo que hace que un banner rediseñado parezca deliberado en lugar de medio convertido.
#wpconsent-container {
--wpconsent-background: #101820;
--wpconsent-text: #f3f4f6;
--wpconsent-accept-bg: #f8b500;
--wpconsent-accept-color: #101820;
--wpconsent-cancel-bg: #2b3a46;
--wpconsent-cancel-color: #f3f4f6;
--wpconsent-preferences-bg: #2b3a46;
--wpconsent-preferences-color: #f3f4f6;
}
Esa regla convierte el mismo banner en un panel oscuro con una única acción resaltada.
Ambos grupos de propiedades pueden ir en la misma regla, y el segundo grupo es donde se agotan las configuraciones.
Cambiar la forma y el tipo
El segundo grupo rige la geometría: redondeo de esquinas, sombra de caja, espaciado interno, ancho del panel y el tipo. Ninguno de estos tiene un campo equivalente en la vista Estilo, por lo que CSS es la única forma de acceder a ellos.
#wpconsent-container {
--wpconsent-border-radius: 0;
--wpconsent-shadow: none;
--wpconsent-padding: 24px 32px;
--wpconsent-min-width: 640px;
--wpconsent-font-size: 17px;
--wpconsent-line-height: 1.7;
}
El resultado es un panel plano, con esquinas cuadradas y más espacioso.
--wpconsent-min-width establece el ancho mínimo permitido para el panel, y el panel aún crece para ajustarse a textos de aviso más largos y se limita al ancho de la pantalla. El panel del banner es solo la mitad de lo que alcanzan estas propiedades.
Restaurar el estilo del panel de preferencias
El panel de preferencias se dibuja dentro del mismo contenedor que el banner, por lo que hereda todas las propiedades que establezcas allí. La regla de color de la sección anterior no necesita nada adicional: el fondo del panel, las etiquetas de las categorías y los propios botones del panel siguen el mismo estilo.
Los botones del panel reutilizan los tres pares de propiedades de botones en lugar de tener los suyos propios:
--wpconsent-accept-bgy--wpconsent-accept-colordan estilo al botón Aceptar todo del panel.--wpconsent-cancel-bgy--wpconsent-cancel-colordan estilo a su botón Cerrar.--wpconsent-preferences-bgy--wpconsent-preferences-colordan estilo a su botón Guardar y cerrar.
Es por eso que el panel anterior coincide con el banner sin una segunda regla.
Una propiedad pertenece específicamente a este panel:
--wpconsent-outline-colordibuja las reglas horizontales que separan las filas de categorías.
WPConsent establece esa a partir del color de texto guardado con una opacidad reducida, por lo que en un panel oscuro esas reglas pueden resultar más tenues de lo que deseas. Establecerla explícitamente te devuelve la separación:
#wpconsent-container { --wpconsent-outline-color: rgba(248, 181, 0, 0.35); }
Nuestra guía sobre el panel de preferencias cubre qué hace cada fila.
Dos superficies quedan fuera de esta cascada, y cada una tiene su propia regla corta.
Restaurar el estilo del botón flotante de configuración
El botón flotante de configuración es el pequeño control redondo que permite a los visitantes reabrir sus opciones después de que el banner haya desaparecido. Lleva sus colores directamente en lugar de a través de las propiedades personalizadas, por lo que la regla de color anterior lo deja solo. Tampoco tiene ninguna configuración de posición en ninguna parte del administrador.
WPConsent lo expone a tu hoja de estilos con el nombre wpconsent-settings-button, al que accedes con el selector ::part(). Esta regla lo mueve a la parte inferior derecha, lo redondea en un círculo, le da una sombra más profunda y lo cambia de color:
#wpconsent-container::part(wpconsent-settings-button) {
left: auto;
right: 28px;
bottom: 28px;
padding: 16px;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35);
background-color: #f8b500 !important;
}
Observa el !important en el color de fondo y solo en el color de fondo. WPConsent escribe ese valor directamente en el botón para que pueda seguir los colores de tu banner guardado, y !important es lo que permite que tu regla tenga precedencia. La posición, el relleno, las esquinas y la sombra surten efecto sin él.
El icono del botón se elige en el administrador en lugar de en CSS, y nuestra guía sobre el botón flotante de consentimiento cubre cómo elegirlo. La última superficie es la que tus visitantes encuentran en tus páginas en lugar de en una esquina.
Coincidir con los marcadores de posición de tu contenido bloqueado
Cuando el bloqueo de contenido está activado, una incrustación para la que un visitante no ha dado su consentimiento se reemplaza con un marcador de posición que lleva su propio botón de aceptación. Ese botón reutiliza dos propiedades que ya has visto:
--wpconsent-accept-bges el fondo del botón marcador de posición.--wpconsent-accept-colores su texto.
El marcador de posición se encuentra en tu página en lugar de dentro del contenedor de consentimiento, por lo que necesita ambas propiedades establecidas donde pueda verlas.
Limitar la regla al propio marcador de posición es la forma más ordenada de hacerlo:
.wpconsent-iframe-placeholder {
--wpconsent-accept-bg: #f8b500;
--wpconsent-accept-color: #101820;
}
El botón marcador de posición coincide entonces con el botón de aceptar en tu banner.
Repetir los dos valores en una segunda regla es deliberado: el marcador de posición y el banner son partes separadas de la página, y mantenerlos en reglas separadas es lo que te permite darle al marcador de posición un tratamiento diferente si quieres uno. Nuestra guía sobre bloqueo de contenido y marcadores de posición cubre cómo activar la función y elegir el texto del marcador de posición.
Eso cubre las cuatro superficies, lo que deja las propiedades en sí.
Buscar cada propiedad disponible
Aquí están todas las propiedades personalizadas que la interfaz de consentimiento de WPConsent lee, agrupadas por lo que controlan. Todas van en #wpconsent-container.
Propiedades de Color
Estas toman sus valores iniciales de la pestaña Estilo, por lo que una regla aquí anula lo que guardaste allí.
--wpconsent-backgroundes el fondo del panel, tanto en el banner como en el panel de preferencias.--wpconsent-textes el color del texto del cuerpo, y también el color del icono del selector de idioma cuando tienes más de un idioma habilitado.--wpconsent-outline-colores la línea horizontal entre las filas de categorías en el panel de preferencias, que WPConsent establece a partir del color de tu texto con opacidad reducida.--wpconsent-accept-bgy--wpconsent-accept-colorson el fondo y el texto del botón Aceptar todo.--wpconsent-cancel-bgy--wpconsent-cancel-colorson el fondo y el texto del botón Rechazar, compartidos con el botón Cerrar del panel.--wpconsent-preferences-bgy--wpconsent-preferences-colorson el fondo y el texto del botón Preferencias, compartidos con el botón Guardar y Cerrar del panel.
Propiedades de Diseño y Tipografía
Estos no tienen campo en el administrador, por lo que CSS es la única forma de establecerlos.
--wpconsent-border-radiuses el redondeo de las esquinas del panel del banner.--wpconsent-shadowes la sombra proyectada detrás del panel, y acepta cualquier valor válido debox-shadow, incluidonone.--wpconsent-paddinges el espacio entre el borde del panel y su contenido, y acepta cualquier valor válido depadding.--wpconsent-min-widthes el ancho mínimo permitido para el panel del banner.--wpconsent-font-sizees el tamaño del texto del aviso, que la pestaña Estilo también establece.--wpconsent-line-heightes el espaciado entre líneas del texto del aviso.--wpconsent-borderes el color del borde del menú desplegable del selector de idioma, y se aplica cuando tienes más de un idioma habilitado en una versión de pago.--wpconsent-z-indexes el orden de apilamiento de la interfaz de consentimiento, para sitios donde otro elemento fijo se superpone al banner.
Botón de cierre y propiedades de enfoque
Estos se aplican al icono de cierre del banner y al anillo de enfoque que ven los visitantes que navegan con el teclado.
--wpconsent-close-sizees el tamaño del icono de cierre del banner, en los banners que muestran uno.--wpconsent-close-colores el color de dicho icono.--wpconsent-focus-outline-colores el color del anillo de enfoque en botones y casillas de verificación.--wpconsent-focus-outline-widthes el grosor de dicho anillo.--wpconsent-focus-outline-offsetes el espacio entre el anillo y el elemento que rodea.
¡Eso es todo! Ahora sabe cómo rediseñar cada superficie de la interfaz de consentimiento de WPConsent desde su propia hoja de estilos. Para ver la configuración que puede cambiar sin escribir ningún CSS, consulte nuestra guía sobre opciones de diseño del banner.
Preguntas frecuentes
¿Por qué el CSS de mi tema no cambia el banner?
La interfaz de consentimiento se dibuja dentro de una shadow root con su propia hoja de estilos privada, por lo que los selectores que coinciden con los elementos internos del banner nunca los alcanzan desde el exterior. Las propiedades personalizadas son la ruta de entrada admitida, y el selector ::part() cubre el botón flotante de configuración. Consulte la sección ¿Cómo expone WPConsent los estilos de su banner? de arriba.
¿Puedo poner la regla en :root en su lugar?
No para el banner. WPConsent establece sus propios valores en un contenedor más abajo en la página que html, por lo que una regla :root pierde frente a ellas sin importar la especificidad que le dé. Los marcadores de posición de contenido bloqueado son la única excepción, y el ámbito a .wpconsent-iframe-placeholder los maneja de todos modos con mayor precisión.
¿Necesito !important en estas reglas?
Solo en el background-color y color del botón flotante de configuración, porque WPConsent escribe esos dos valores en el propio botón. Cada propiedad personalizada en #wpconsent-container surte efecto sin él, al igual que todo lo demás en la regla ::part().
¿Sobrevivirá mi CSS a una actualización del plugin?
Sí. Las reglas residen en su tema o en su plugin de CSS en lugar de en WPConsent, por lo que actualizar el plugin las deja en paz. Las propiedades personalizadas también son la interfaz que WPConsent publica para este propósito, lo que las convierte en lo más estable para apuntar.
¿Necesita el panel de preferencias su propia regla?
No. Se dibuja dentro del mismo contenedor que el banner y reutiliza las mismas propiedades, por lo que una sola regla en #wpconsent-container rediseña ambos. Consulte la sección Rediseño del Panel de Preferencias de arriba.
¿Puedo cambiar el icono del botón de configuración con CSS?
El icono proviene de la cuadrícula Icono del botón en la pestaña Estilo, que también le permite cargar su propia imagen. Esa cuadrícula es donde cambiarlo, y nuestra guía sobre el botón flotante de consentimiento lo explica.
¿Qué valores tienen las propiedades por defecto?
Las propiedades de color y tamaño de fuente parten de lo que hayas guardado en la pestaña Estilo, por eso la sección Cómo encontrar los valores que anula tu CSS te muestra primero ese panel. El diseño, el botón de cierre y las propiedades de enfoque provienen de la propia hoja de estilos de WPConsent, y las herramientas de desarrollador de tu navegador te muestran sus valores actuales en #wpconsent-container.
¿Funcionarán estas reglas en todos los diseños de banner?
Las propiedades de color, tamaño de fuente y altura de línea se aplican a todos los diseños. Estas cuatro dan forma al panel, por lo que son para los diseños Flotante y Modal, que muestran el banner como una tarjeta:
--wpconsent-border-radius--wpconsent-shadow--wpconsent-padding--wpconsent-min-width
El diseño Largo muestra una barra de ancho completo y establece sus propios bordes, sombra y espaciado para adaptarse a esa forma. Nuestra guía sobre opciones de diseño de banner cubre los diseños.