PlanetStation.org

[Tutorial] Personalizar apariencia y posición 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:

<!-- You should make sure that the file cookiechoices.js is available
and accessible from the root directory of your site.  -->
<script src="/cookiechoices.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentBar('Este sitio web utiliza cookies. Las cookies son archivos almacenados en tu navegador y son usados por la mayoría de páginas web para ayudar a personalizar tu experiencia en la web. Si continúas navegando, consideramos que aceptas su uso.',
                                       'Aceptar', 'Más información', 'http://ejemplo.com');
  });
</script> 

Tras esto ya veremos el aviso en nuestra página. Como podéis comprobar, en el código anterior hay una url a una página de ejemplo. Lo ideal es que creeis en vuestra página una página o artículo sobre la Política de Cookies, algo así como la que tengo en la mía.

 

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

/* CSS Aceptación Cookie */
div#cookieChoiceInfo {
background-color: #1C1C1C !important;
color:#FFFF00;
text-shadow:1px 1px 1px #ccc;
font-size:14px;
font-family:sans-serif;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color:#DBA901;
text-shadow:1px 1px 1px #ccc;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:sans-serif;
font-size:14px;
font-weight:bold;}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#FFFF00;
}

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 habiamos copiado en el directorio raiz de la web.

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

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

var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;’;

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 tendriamos todo para modificar nuestro aviso de cookies.

 

 

Escribir un comentario


Código de seguridad
Refescar