Cómo personalizar el Banner de Cookies

Cómo personalizar el Banner de Cookies del plugin Adapta RGPD

El plugin Adapta RGPD tiene una opción para añadir un Banner de Política de Cookies que sirve como ayuda para cumplir los requisitos legales en materia de cookies de la Unión Europea.

El Banner de Cookies no esta activo por defecto. Tienes que activarlo siguiendo estos pasos:

  • En el menú principal, pulsa en Adapta RGPD para configurar el plugin.
  • En la parte superior pulsa en la pestaña Integración.
  • Marca la casilla Activar Banner de Política de Cookies y luego pulsa el botón Guardar Cambios.

Activar Banner de Cookies

A partir de este momento, los visitantes de tu sitio verán un banner que les advierte de la existencia de cookies y pide su consentimiento para descargarlas. En el mismo banner hay un enlace a la página de Política de Cookies en el caso de que esté activa y un botón para aceptarlas.

Cambiar el diseño

El plugin te permite personalizar los textos del banner y cambiar su propio diseño.

En este artículo te voy a enseñar a cambiar entre los distintos estilos prediseñados y, si tienes necesidades de diseño específicas, a establecer tu propio diseño utilizando hojas de estilo CSS.

#1. Utilizar los estilos prediseñados

El plugin te permite escoger entre cuatro estilos prediseñados pensados para tener un gran contraste y ser válidos para la mayoría de los sitios:

  • Clásico
  • Clásico en la parte superior
  • Moderno Claro
  • Moderno Oscuro

Estilo Clásico:

Activar Banner de Cookies

Estilo Moderno:

Activar Banner de Cookies

#2. Crear un estilo propio para el Banner de Cookies

Si los estilos prediseñados no te convencen puedes personalizar completamente el diseño sobrescribiendo los estilos CSS propios del plugin.

Necesitas tener unos conocimientos mínimos de CSS y saber como realizar cambios en los estilos CSS de WordPress. Existen dos formas de modificar los estilos CSS en WordPress. De las dos, el editor de código CSS te resultará más sencilla, aunque si tienes suficientes conocimientos de WordPress te recomiendo crear un tema hijo (Qué es y cómo crear un Tema Hijo).

Escogido el método para modificar CSS te muestro las clases CSS principales que utiliza el plugin:

La clase principal es argpd-cookies y engloba todos los elementos del banner de cookies.

#cookies-eu-banner{ 
}

Así, si sobrescribes el ID cookies-eu-banner puedes cambiar la posición o el color del banner.

Y para modificar el estilo del enlace a la política de cookies o del botón de aceptación, tienes que sobreescribir estas clases:

#cookies-eu-banner #cookies-eu-more {
/* estilos del enlace a la política de cookies */
}

#cookies-eu-banner #cookies-eu-accept {
/* estilos del botón de aceptación */
}

#cookies-eu-banner #cookies-eu-reject {
/* estilos del botón de rechazar */
}

Ejemplo 1. Cambiar la posición del banner a la parte superior

Para cambiar la posición del banner clásico, de su posición inferior a la parte superior, añades esta configuración CSS:

#cookies-eu-banner {
	top:0px;
	bottom: inherit;
}

Ahora el banner aparece en la parte superior:

Activar Banner de Cookies

Ejemplo 2. Cambiar el color del banner, del enlace y del botón

Ahora voy a cambiar el color de fondo del banner, el del enlace a la política de cookies y el botón de aceptación.

Utilizaré un color personalizado más acorde con la plantilla que estoy utilizando:

#cookies-eu-banner {
	top:0px;
	bottom: inherit;
	background-color: white;	
}

#cookies-eu-banner #cookies-eu-accept {
	color: #e91e63;	
}

Y aquí puedes ver el resultado:

Activar Banner de Cookies

Ejemplo 3. Cambiar el estilo del texto

La fuente de texto que utiliza el banner de cookies es la fuente principal del tema. En este ejemplo voy a cambiar el estilo con una fuente de tipo Arial:

#cookies-eu-banner {
	font-family: Arial, Helvetica, sans-serif;	
}

Espero te sirva de ayuda. Si te surge cualquier duda puedes mandármela desde aquí.