¿Las reglas CSS de tu tema no tienen ningún efecto en tu banner de cookies? Todo lo que necesitas es un lugar en tu sitio para guardar unas pocas líneas de CSS.
Esta guía cubre dónde WPConsent guarda sus estilos, qué selectores los alcanzan y dónde colocar tus propias reglas.
Tabla de contenidos
- ¿Por qué el CSS de tu tema no cambia el banner?
- Añadiendo tu CSS a WordPress
- Estilizando el banner desde fuera del Shadow Root
- Accediendo a los elementos del banner con ::part()
- Estilizando la página de política de cookies
- Estilizando los marcadores de contenido bloqueado
- Eligiendo el selector correcto
- Preguntas frecuentes
Antes de empezar, asegúrate de que WPConsent esté instalado y activado en tu sitio de WordPress.
¿Por qué el CSS de tu tema no cambia el banner?
WPConsent crea el banner de consentimiento y el panel de preferencias dentro de un shadow root. Un shadow root es un mini-documento autocontenido adjunto a un elemento de tu página.
Ese mini-documento lleva su propia hoja de estilos, y el límite a su alrededor funciona en ambas direcciones. Los estilos de los botones de WPConsent nunca se filtran a tu sitio, y los estilos de tu sitio nunca llegan al interior.
Es por eso que una regla como .wpconsent-banner { background: black } parece ser ignorada. No está siendo superada por algo más específico. El selector no tiene nada que igualar, porque el elemento que nombra se encuentra al otro lado del límite.
Añadir !important no cambia nada, y tampoco lo hace acumular selectores adicionales como html .wpconsent-banner. Dirigirse directamente a los botones o al panel de preferencias tampoco marca la diferencia.
El mismo límite explica otra cosa que quizás hayas notado. La hoja de estilos del banner de WPConsent no aparece junto a la de tu tema en las herramientas de desarrollador de tu navegador. WPConsent la carga desde el interior del shadow root en su lugar.
Tres cosas cruzan el límite, y cada una tiene su propia sección o su propia guía:
- Propiedades heredadas establecidas en el contenedor. Esta es la única ruta que utiliza CSS ordinario, y la sección siguiente la cubre.
- Propiedades personalizadas CSS. Estas son la forma en que WPConsent publica sus colores, espaciado, esquinas y tamaños de fuente para que los anules.
- El selector
::part(). Este accede a los elementos individuales que WPConsent expone por nombre, incluyendo el botón flotante de configuración. La sección Accediendo a los elementos del banner con ::part() nombra a cada uno de ellos.
Nota: Nuestra guía sobre personalizar el banner con variables CSS nombra cada propiedad personalizada. La sección sobre ::part() a continuación nombra cada elemento que WPConsent expone.
El resto de WPConsent es otra historia. Tu página de política de cookies, tus marcadores de contenido bloqueado y el botón de preferencias son contenido ordinario de la página. Ningún shadow root se acerca a ellos, por lo que aceptan CSS ordinario.
Esos tres componen la mayor parte de esta guía, y la primera pregunta es dónde van las reglas.
Añadiendo tu CSS a WordPress
Para empezar, encontraremos un lugar para tus reglas. Pertenecen a donde ya guardas el CSS personalizado de tu sitio. WordPress tiene un lugar incorporado para esto exactamente, y es el que recomendamos.
Desde tu panel de WordPress, ve a Apariencia » Personalizar. Desde aquí, abre CSS adicional y pega tu regla en el editor.
Los cambios realizados en el Personalizador llegan a tus visitantes una vez que se publican. Hasta entonces, el banner mantiene su aspecto actual.
La hoja de estilos de un tema hijo también funciona, al igual que un fragmento de CSS en un plugin de fragmentos de código. Hay una razón práctica para preferir CSS adicional, sin embargo.
WordPress imprime el CSS adicional después de cada hoja de estilos de plugin. Por lo tanto, cuando tu regla y una de las reglas de WPConsent son igualmente específicas, la tuya tiene precedencia.
Una hoja de estilos de tema se imprime antes en la página que la de WPConsent, por lo que desde allí la misma regla puede perder ese empate. La solución es un solo selector adicional, que eleva tu regla por encima de la del plugin, independientemente del orden de carga. Cada ejemplo de marcador de posición más abajo está escrito de esa manera, por lo que funciona desde cualquiera de las tres ubicaciones.
La guía de WPBeginner para agregar CSS personalizado en WordPress compara las tres ubicaciones con más detalle.
Con un lugar para poner una regla, el banner en sí es el primer lugar para probar una.
Estilizando el banner desde fuera del Shadow Root
Una familia de propiedades CSS cruza un límite de sombra por diseño: las heredadas, como font-family. La hoja de estilos de WPConsent inicia la raíz de sombra restableciendo todo y luego re-habilitando la herencia de fuentes. Es por eso que el banner ya capta la tipografía que usa tu página.
Aquí está ese banner antes de cualquier CSS personalizado.
Una regla en el contenedor reemplaza lo que el banner hereda, y el valor se pasa a todo lo que está dentro de él:
#wpconsent-container {
font-family: Georgia, serif;
letter-spacing: 0.01em;
}
El texto del aviso capta la nueva tipografía de inmediato. El espaciado entre letras es un ajuste fino en lugar de un cambio visible. Está ahí para mostrar que una segunda propiedad heredada viaja de la misma manera.
Los tres botones conservan su fuente original. Eso es cosa de los navegadores en lugar de WPConsent: un <button> obtiene su propia tipografía de la hoja de estilos incorporada del navegador. La siguiente sección cubre el selector que sí llega a ellos.
letter-spacing, text-transform, font-weight y font-style llegan al banner desde el contenedor de la misma manera. Los colores, fondos, relleno y radio de las esquinas no lo hacen, porque esas propiedades no se heredan. Esas son las propiedades personalizadas.
Nota: Coloca la regla en #wpconsent-container en lugar de en :root o html. Una regla :root parece la opción obvia y no hace nada aquí. Los propios valores de WPConsent, y el font-family de tu tema en body, ambos se sientan más cerca del banner que html.
Eso es todo lo que el CSS normal puede hacer con el banner. Un selector más llega hasta él, y es la respuesta a esos tres botones.
Accediendo a los elementos del banner con ::part()
WPConsent da a la mayoría de los elementos dentro de su shadow root un nombre público. Un nombre es algo que tu hoja de estilos puede seleccionar incluso a través del límite, usando el selector ::part().
El selector es siempre el contenedor, luego el nombre del elemento que deseas:
#wpconsent-container::part(wpconsent-button-accept) { font-family: Georgia, serif; }
Esto es lo que llega a los tres botones que conservaron su fuente del navegador en la sección anterior. Nombrar los tres los pone en la misma cara serif que el texto del aviso, en letras mayúsculas pequeñas:
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences) {
font-family: Georgia, serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
Cada nombre llega a un tipo de elemento, y un elemento que WPConsent no ha nombrado no se puede alcanzar de esta manera en absoluto. El resto de esta sección son todos los nombres que existen, agrupados por dónde se encuentran.
Nota: Para colores, espaciado, esquinas y tamaños de fuente, las propiedades personalizadas son la ruta más corta, y una regla en el contenedor cubre el banner y el panel juntos. Recurre a ::part() cuando desees una propiedad que las propiedades personalizadas no transportan, o cuando desees que un elemento difiera del resto.
Partes del Banner
wpconsent-banneres el banner en sí, sea cual sea el diseño que hayas configurado.wpconsent-banner-bodyes el bloque que contiene el texto de tu aviso de cookies.wpconsent-banner-footeres la fila que contiene los botones.wpconsent-banner-logoes la imagen del logo, y aparece solo una vez que hayas configurado un logo en los ajustes de tu banner.wpconsent-button-accept,wpconsent-button-cancelywpconsent-button-preferencesson los botones Aceptar, Rechazar y Preferencias.
Partes del Panel de Preferencias
wpconsent-preferences-modales el elemento más externo del panel, ywpconsent-preferences-contentes la tarjeta dentro de él.wpconsent-preferences-headeres la tira en la parte superior, que contienewpconsent-preferences-titlepara el encabezado ywpconsent-preferences-closepara el control de cierre.wpconsent-preferences-descriptiones el texto introductorio debajo del encabezado.wpconsent-preferences-accordionenvuelve cada fila de categoría.wpconsent-preferences-actionses el pie de página, conwpconsent-preferences-buttonspara la fila de botones dentro de él.wpconsent-preferences-buttons-leftes el grupo izquierdo de esa fila, que contiene Aceptar todo y Cerrar. El botón de guardar se encuentra fuera de él.wpconsent-preferences-accept-button,wpconsent-preferences-cancel-buttonywpconsent-preferences-save-buttonson los botones Aceptar todo, Cerrar y Guardar y cerrar del panel.
Partes de la fila de categorías y servicios
Cada fila expandible del panel comparte un conjunto de nombres, ya sea una categoría o un servicio individual:
wpconsent-accordion-itemes una fila cualquiera.wpconsent-accordion-headeres la tira sobre la que haces clic, ywpconsent-accordion-togglees el control que hay en ella.wpconsent-accordion-contentes el área que se abre debajo.wpconsent-checkbox-togglees el interruptor de encendido/apagado de una fila. Una fila que los visitantes no pueden desactivar, como las cookies esenciales, también tienewpconsent-checkbox-toggle-disabled.wpconsent-cookie-policy-itemes la fila que enlaza con tu política de cookies, y solo aparece una vez que has elegido una página de política de cookies.
Dos de los nombres se generan a partir de tu propio contenido, por lo que varían según el sitio:
wpconsent-category-más el slug de la categoría nombra una fila de categoría, comowpconsent-category-marketing.wpconsent-service-más el slug del servicio nombra una fila de servicio, comowpconsent-service-google-analytics.
Esos dos son los que debes usar cuando quieras que una categoría o un servicio tengan un aspecto diferente al resto.
Partes de la tabla de cookies
Al expandir una fila se revelan las cookies que cubre, en una pequeña tabla propia:
wpconsent-cookies-listes la tabla.wpconsent-cookies-list-headeres su fila de encabezado.wpconsent-cookies-list-itemes cada cookie listada debajo.
Parte del botón flotante de configuración
wpconsent-settings-buttones el pequeño control redondo que reabre el panel después de que el banner ha desaparecido.
Ese vale la pena mencionarlo por sí solo, porque es la única parte cuyo color de fondo necesita !important para cambiar. Nuestra guía sobre cómo personalizar el banner con variables CSS cubre cómo moverlo y cambiarle el color.
Todo a partir de aquí es parte de WPConsent que se encuentra en tus páginas. Allí, CSS se comporta como en cualquier otro lugar.
Estilizando la página de política de cookies
Tu página de política de cookies se crea con un shortcode y se renderiza como contenido de página normal. No hay ningún límite que sortear.
Aquí tienes cómo se ve una de sus tablas con solo el estilo propio de WPConsent.
Seis clases cubren todo lo que genera el shortcode:
.wpconsent-cookie-policyenvuelve toda la salida..wpconsent-cookie-category-namees el encabezado de cada categoría de cookies, con.wpconsent-cookie-category-descriptionpara su texto introductorio..wpconsent-cookie-service-namey.wpconsent-cookie-service-descriptionhacen el mismo trabajo para cada servicio dentro de una categoría..wpconsent-cookie-policy-tablees cada tabla de la página.
Esta regla da a las tablas una fila de encabezado oscura, bordes más limpios y una franja más cálida en filas alternas:
.wpconsent-cookie-policy-table th {
background-color: #101820;
color: #f8b500;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 13px;
}
.wpconsent-cookie-policy-table th,
.wpconsent-cookie-policy-table td {
border-color: #d8dde2;
padding: 12px 14px;
}
.wpconsent-cookie-policy-table tbody tr:nth-child(odd) td {
background-color: #fbf7ec;
}
Ninguna regla en esa regla necesita !important, y esto es deliberado por parte de WPConsent. Sus propias reglas de política de cookies no tienen ninguna especificidad, puramente para establecer un aspecto inicial que cualquier regla tuya pueda reemplazar.
El estilo de tabla de tu tema prevalece por la misma razón. Es por eso que una página de política adopta la apariencia del resto de tu sitio antes de que la toques.
Nuestra guía sobre la página de política de cookies cubre cómo generar la página y mantenerla actualizada.
La otra superficie que tus visitantes encuentran en tus páginas es lo que aparece en lugar de un embed bloqueado.
Estilizando los marcadores de contenido bloqueado
Cuando el bloqueo de contenido está activado, un embed al que un visitante no ha consentido es reemplazado por un marcador de posición. Ese marcador de posición es también un marcado de página ordinario, por lo que toma CSS ordinario.
Un marcador de posición son cuatro elementos:
.wpconsent-iframe-placeholderes la caja exterior que ocupa el lugar del embed..wpconsent-iframe-thumbnailcontiene una imagen de vista previa del contenido bloqueado..wpconsent-iframe-overlay-contentcubre toda la caja y centra el botón. Este es el elemento a usar cuando quieres un tinte sobre la vista previa..wpconsent-iframe-accept-buttones el botón en sí.
Esta regla redondea la caja, elimina el color de la vista previa, le aplica un tinte y convierte el botón en una píldora:
.wpconsent-iframe-placeholder {
border: 2px solid #d8dde2;
border-radius: 12px;
}
.wpconsent-iframe-placeholder .wpconsent-iframe-thumbnail img {
filter: grayscale(1);
}
.wpconsent-iframe-placeholder .wpconsent-iframe-overlay-content {
background-color: rgba(16, 24, 32, 0.55);
}
.wpconsent-iframe-placeholder .wpconsent-iframe-accept-button {
padding: 14px 26px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35);
}
Cada una de las últimas tres reglas nombra el marcador de posición así como el elemento dentro de él. Ese es el selector adicional mencionado anteriormente. Permite que la regla funcione desde una hoja de estilos de tema hijo así como desde CSS adicional.
También es posible apuntar a un servicio a la vez. Cada marcador de posición lleva una segunda clase que nombra el servicio que reemplazó, como .wpconsent-iframe-placeholder-google-maps. También lleva los atributos data-wpconsent-name y data-wpconsent-category.
Un selector como [data-wpconsent-category="marketing"] .wpconsent-iframe-accept-button alcanza todos los marcadores de marketing en tu sitio y deja el resto intacto.
El color de fondo y de texto del botón es lo único que se cambia en otro lugar. Provienen de las mismas dos propiedades personalizadas que el botón Aceptar todo del banner, por lo que la guía de variables CSS es donde configurarlos.
Nuestra guía sobre bloqueo de contenido y marcadores cubre cómo activar la función y elegir el texto del marcador.
Eso cubre las tres superficies, lo que deja la pregunta de cómo encontrar un selector por ti mismo.
Eligiendo el selector correcto
Las clases de la política de cookies, las clases del marcador y el botón de preferencias se comportan como elementos ordinarios en el inspector de tu navegador. La clase que necesitas está justo ahí en el marcado resaltado.
El banner se comporta de manera diferente, y vale la pena saber qué estás mirando. Inspeccionarlo muestra #wpconsent-container con una línea #shadow-root (open) anidada dentro. Expandir eso revela todo el banner, con nombres de clase y todo.
Esos nombres de clase son reales, y el inspector te mostrará los estilos sobre ellos. Una regla escrita contra ellos en tu hoja de estilos aún no los alcanzará. El árbol es una forma de entender de qué está hecho el banner, no una forma de estilizarlo.
Aquí está cada elemento de WPConsent que se encuentra fuera de la shadow root, en un solo lugar:
#wpconsent-containeres el elemento al que se adjunta el banner, y el objetivo de las propiedades heredadas y personalizadas..wpconsent-cookie-policyy las cinco clases dentro de él son la página de la política de cookies..wpconsent-iframe-placeholdery las tres clases dentro de él son los marcadores de contenido bloqueado..wpconsent-open-preferenceses el botón que genera el shortcode de preferencias de WPConsent, dondequiera que lo hayas colocado.
Este último toma su aspecto de tu tema, de la misma manera que cualquier otro botón en tus páginas. Una regla corta le da un aspecto propio:
.wpconsent-open-preferences {
background-color: #101820;
color: #f8b500;
border-radius: 999px;
padding: 12px 22px;
}
Nuestra guía sobre abrir el panel de preferencias con un enlace personalizado cubre cómo agregar ese botón a una página o menú.
¡Eso es todo! Ahora sabes cuáles de las partes de WPConsent aceptan CSS ordinario, cuáles necesitan una ruta diferente y dónde mantener las reglas. Para cambiar los colores, el espaciado y las esquinas del banner, echa un vistazo a nuestra guía sobre personalizar el banner con variables CSS.
Preguntas frecuentes
A continuación, hemos respondido algunas de las preguntas más comunes sobre cómo estilizar WPConsent con tu propio CSS.
¿Por qué mi regla sobre .wpconsent-banner es ignorada?
Ese elemento vive dentro de una shadow root, por lo que un selector en tu hoja de estilos no tiene nada que coincidir. Esto se mantiene sin importar cuán específico hagas el selector, y si agregas o no !important. La sección ¿Por qué el CSS de tu tema no cambia el banner? de arriba cubre qué usar en su lugar.
¿Puedo poner la regla en :root en su lugar?
No para el banner. Tu tema declara propiedades heredadas como font-family en body, que está más cerca del banner que html. Los valores de las propiedades personalizadas de WPConsent están aún más cerca, así que usa #wpconsent-container.
¿Necesito !important en alguna de estas reglas?
No. Ninguno de los ejemplos en esta guía lo usa, incluidas las reglas de la política de cookies y los marcadores de posición. El único lugar donde es realmente necesario es el color de fondo del botón flotante de configuración, que cubre la guía de variables CSS.
¿Puedo estilizar el icono de cierre del banner con ::part()?
No. El icono de cierre es el único elemento del banner al que WPConsent no le da un nombre público, por lo que no hay ninguna parte que seleccionar. Su tamaño y color provienen de dos propiedades personalizadas, que nuestra guía sobre personalización del banner con variables CSS cubre.
¿Dónde debería guardar el CSS?
Apariencia » Personalizar » CSS adicional es la opción más sencilla. WordPress lo imprime después de las hojas de estilo de los plugins, por lo que tus reglas ganan cualquier empate en especificidad. Una hoja de estilo de tema hijo o un plugin de fragmentos de código también funcionan, con un selector adicional añadido a cualquier regla que empate.
¿Sobrevivirá mi CSS a una actualización del plugin?
Sí. Las reglas viven en tu tema, el Personalizador o tu plugin de fragmentos en lugar de dentro de WPConsent. Actualizar el plugin las deja en paz.
¿Puedo cambiar el texto del banner con CSS?
El texto es una configuración en lugar de algo que estilizar, y WPConsent tiene campos para todo ello. Nuestra guía sobre contenido y texto del banner recorre el aviso, las etiquetas de los botones y los encabezados del panel.
¿Dónde encuentro la hoja de estilos del banner de WPConsent?
Se carga desde dentro de la shadow root en lugar de en la página misma. Las hojas de estilo de WPConsent que verás en la página son la de los marcadores de posición de contenido bloqueado y la de las tablas de políticas de cookies. La de la política de cookies solo se carga en las páginas que llevan el shortcode.
¿Necesito una licencia de pago para algo de esto?
No. La shadow root, el selector del contenedor, las clases de la política de cookies y las clases de los marcadores de posición funcionan igual en todos los niveles de licencia. Cada regla en esta guía se aplica a cualquier sitio de WPConsent.