Personalizar apariencia y posicion de cookiechoices.js

Recientemente Google ha publicado un pequeño código llamado cookiechoices.js que permite a los webmasters añadir, fácilmente, la alerta de que tu sitio web usa Cookies y de ese modo cumplir con las normativas europeas. En este tutorial os explicaré como editar básicamente los colores de dicho aviso, así como la posición en la que queremos que se muestre.

De este modo podréis adaptar el aviso sobre el uso de cookies al estilo de vuestra página.

Implementar cookiechoices.js en la web

Lo primero que haremos será descargar el archivo cookieschoices.js y subirlo al directorio raiz de nuestra página web.

Para que el aviso se muestre, debemos añadir en el <body> del index nuestra página un código similar al siguiente:

Tras esto ya veremos el aviso en nuestra página.

Personalización básica del estilo de cookiechoices.js

Ahora ya lo tendríamos todo, pero seguramente el aviso no tendrá nada que ver con el estilo de la web, así que lo normal es que queramos adapatarlo.

Para ello debemos editar el css de nuestra página y añadir al final el siguiente código

Con el código anterior la apariencia del aviso debería cambiar. Con el código de ejemplo que os he puesto, ahora tendría un color de fondo oscuro y letras amarillas y los enlaces en un color anaranjado que al colocarte sobre ellos pasan al mismo color que el texto.

Para editar los colores a vuestro gusto sólo tendréis que modificar los colores de los códigos (4 en total) dónde el 1º es el color de fondo, el 2º es el color del texto, el 3º es el color de los enlaces y el 4º es el color al colocarse sobre los enlaces. Podéis consultar códigos de colores en esta página.

Modificar posición de cookiechoices.js También podemos modificar la posición en la que queremos que se muestre el aviso sobre las cookies, para ello tendremos que modificar el archivo cookiechoices.js que habíamos copiado en el directorio raíz de la web.

Es probable que la barra tape algún menú o algún elemento de la web que prefieres que tenga buena visibilidad.

Para modificar la posición has de modificar la línea número 35:

Para que el aviso no esté fijo y deje de mostrarse al hacer scroll, cambia el fixed por absolute (si optas por esto no pongas el aviso abajo o no se verá hasta llegar abajo del todo de la página).

Para que el aviso esté abajo cambia top por bottom.

Para que el texto quede alineado a la izquierda cambia center por left.

Y con esto ya tendríamos todo para modificar nuestro aviso de cookies.

 

facebook Personalizar apariencia y posicion de cookiechoices.jstwitter Personalizar apariencia y posicion de cookiechoices.jsgoogle Personalizar apariencia y posicion de cookiechoices.jsdiggit Personalizar apariencia y posicion de cookiechoices.jspinterest Personalizar apariencia y posicion de cookiechoices.jslinkedin Personalizar apariencia y posicion de cookiechoices.jsprint Personalizar apariencia y posicion de cookiechoices.jsemail Personalizar apariencia y posicion de cookiechoices.jsSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.