banner cookiechoices: come personalizzarlo – Cookie Law

Ecco finalmente l’articolo che avevo promesso, ovvero “Come personalizzare il banner cookiechoices” fornito da Google; ricordo che il file cookiechoices permette di mostrare il banner che informa gli utenti dell’uso dei cookie sul sito.

Articoli correlati e molto utili per una maggiore comprensione dell’articolo (dato che li citerò) sono:

• Adeguare il sito alla legge sui Cookie.
• Banner Cookie Law Weebly 2015.

 

Modificare la posizione del banner cookiechoices

Per modificare la posizione del banner bisogna agire sulla variabile butterBarStyles alla riga 35:

Spostare in basso

Per spostare in basso il banner, dovete agire dove c’è scritto top:0;, scrivendo invece bottom:0;. Esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%; background-color:orange;’ +
‘margin:0; left:0; bottom:0; padding:4px;z-index:1000;text-align:center;’;

 

Spostare a destra

Per spostare a destra il banner, dovete agire dove c’è scritto left:0;, scrivendo invece right:0;. Esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%; background-color:orange;’ +
‘margin:0; right:0; bottom:0; padding:4px;z-index:1000;text-align:center;’;

 

Modificare dimensione del banner

Per modificare la dimensione del banner bisogna agire sulla variabile butterBarStyles alla riga 35:

Cambiare larghezza

Se volete cambiare la larghezza del banner (ad esempio renderlo largo la metà), dovete agire sulla variabile width e impostarla con una percentuale diversa dal 100% (il 50% se lo volete la metà). Esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:50%; background-color:orange;’ +
‘margin:0; right:0; bottom:0; padding:4px;z-index:1000;text-align:center;’;

 

Cambiare altezza

Se volete cambiare l’altezza del banner, dovete agire sulla variabile height e impostarla con un valore in pixel; la variabile height non c’è nel codice originale, ma è sufficiente aggiungerla. Esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:50%; height:50px; background-color:orange;’ +
‘margin:0; right:0; bottom:0; padding:4px;z-index:1000;text-align:center;’;

 

Cambiare colore al testo

Per cambiare colore al testo è sufficiente aggiungere il seguente codice: color: CODICE_COLORE; alla riga 34-35. Ecco un esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0; color:red; padding:4px;z-index:1000;text-align:center;’;

 

Cambiare sfondo

Per cambiare il colore di sfondo è necessario modificare la seguente proprietà: background-color: CODICE_COLORE; alla riga 34. Esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%; background-color:orange;‘ +
‘margin:0; left:0; top:0; padding:4px;z-index:1000;text-align:center;’;

 

Cambiare font del testo

Per cambiare font del testo è sufficiente aggiungere il seguente codice: font-family: FONT_DESIDERATO; alla riga 34-35. Ecco un esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0; font-family: “Times New Roman”, Georgia, Serif; padding:4px;z-index:1000;text-align:center;’;

 

Cambiare dimensione carattere

Per cambiare dimensione al testo è sufficiente aggiungere il seguente codice: font-size: DIMENSIONE; alla riga 34-35. Ecco un esempio:

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0; font-size: 16px; padding:4px;z-index:1000;text-align:center;’;

 

Creare il bottone “Maggiori informazioni” al posto del testo semplice

Per fare questo bisogna modificare attentamente dalla riga 108 alla riga 115:

function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
var infoLinkStyle = ‘margin-left:24px; padding:5px 8px; color:#BBD; background-color:#58C; font-weight:bold; color:#FFF; text-decoration:none; border-radius:4px’;
infoLink.style.cssText = infoLinkStyle;
return infoLink;
}

 

Se avete altre soluzioni o domande scrivete pure nei commenti! 🙂

Se trovate l’articolo interessante, un Mi Piace sulla pagina Facebook e/o una condivisione sono graditi. Per non perdere neanche un articolo di World Informatic, iscrivetevi alla Newsletter, oppure utilizzate i Feed Rss.