L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

Styler le message sur l'utilisation des cookies

 

Voilà un petit tutoriel pour styler le message sur l'utilisation des cookies, mais déjà qu'est ce que les cookies? Je pourrais vous expliquer tout ça, mais Jimdo l'a déjà très bien fait : Cookies


Malheureusement ce message n'est pas très esthétique et en non accord avec les couleurs et l'ambiance du site, mais l'enlever pour autant alors que la loi vous dit d'informer vos visiteurs... La solution ludique reste de styler ce message à votre goût !


Ce tutoriel est largement inspiré de l'idée de Frédéric, alias Filmsdelover (son site : filmsdelover.com).


Changer la couleur de fond

Pour commencer, nous allons changer la couleur de fond du message. Pour cela, aller dans Paramètres, puis dans Modifier le head (dans "Paramètres" de préférence) et coller le code suivant :

<style type="text/css">
/*<![CDATA[*/


/* Le message des cookies */
   
#cc-cookie-law {background: #00A1E9 !important;}  /* couleur de fond */

/*]]>*/
</style>

Pour comprendre pleinement les codes couleurs, je vous propose une séance de rattrapage : Comprendre les codes couleurs


La transparence

Ne mettez pas le code précédent et ce code, mais qu'un seul des deux ! Ce code joue sur la transparence, en plus d'avoir changé la couleur de fond. La transparence se règle de 0 à 1, 0.7 est une bonne valeur pour un message toujours visible, mais pas autant agressif.

<style type="text/css">
/*<![CDATA[*/

 

/* Le message des cookies */
   
#cc-cookie-law {

background: #00A1E9 !important;   /* couleur de fond */

opacity: 0.7;   /* transparence entre 0 et 1 */

}


/*]]>*/
</style>

Un bouton plus visible

Pour que le message ne s'affiche plus aux prochaines visites, il suffit que le visiteur clique sur "Ok". Arrangeons donc un peu ce bouton en ajoutant un mot ou du texte.

<style type="text/css">
/*<![CDATA[*/

 

/* Le message des cookies */
   
#cc-cookie-law a.cc-btn:after{content: ", j'accepte";}  /* texte bouton */


/*]]>*/
</style>

Et sur mobile ?

La version mobile est également pris en compte ;)

Écrire commentaire

Commentaires : 0