changer couleur tarteaucitron

Intégrer et customiser Tarte au Citron

Avec la RGPD qui est arrivée dans nos contrées, il a fallut vite trouver des outils pratiques pour mettre nos sites en conformité. Tarte au Citron s’est révélé être à la fois le plus pratique et le plus performant, et en plus il permet de faire plein de trucs chouettes. Pour la faire courte, c’est la grosse barre grise en bas du Bloc Notes !

 

Pourquoi Tarte au Citron et pas un autre ?

  • C’est un outil français
  • Il est open source
  • Il est recommandé par la CNIL
  • Son intégration est simple et rapide
  • Sa version gratuite se suffit à elle-même

 

Ça reste sensiblement pareil dans tous les projets webs, pour son intégration : le dossier de TaC à la racine, intégration du script dans le head / footer, et le tour est joué. Enfin presque. Parce que la première fois où j’ai parlé de cet outil, la plupart des développeurs autour de moi étaient là « attends… le plugin est payant pour WordPress ? Mais comment on va faire ?  »

 

Que… Quoi ? Comment ça « comment vous allez faire » ? Vous êtes bien développeurs ?

 

Apparemment, l’idée même de mettre littéralement les mains dans le cambouis en fait flipper plus d’un ! La mode du « Il y a forcément un plugin qui le fait alors je l’installe » doit s’arrêter. Si on pense un minimum vitesse et référencement, cette mode n’est pas compatible avec un quelconque travail pour remonter un site dans les premiers résultats de votre moteur de recherche favoris. C’est encore plus flagrant avec la communauté française de Prestashop, mais on en reparlera plus tard 😉

 

Je ne vais pas réinventer la roue, le tuto d’installation de tarteaucitron.js est plutôt complet. Il est à la portée de n’importe quel développeur, même pour les débutants. On notera juste pour le script, à la ligne « orientation », on passera la valeur à « bottom » pour l’avoir en bas du site, c’est plus sexy. N’hésitez pas à jouer avec ce premier script, pour mieux saisir toutes ses options.

Comment changer la couleur de Tarte au Citron ?

Nous allons surtout nous intéresser à sa customisation. Vous l’avez remarqué, la barre verte et grise n’est pas joyeuse, et cela reste assez simple de changer sa couleur pour l’adapter à la charte graphique d’un site internet. Par exemple, ici la charte graphique du client est en nuances de bleu et orange :

Changer couleur tarte au citron

 

Pour les développeurs n’ayant pas perdu leur IDE sur la route de l’installation de plugins en masse 😛 , il suffit de chercher dans le fichier css de l’outil, les couleurs et les remplacer. Sur PhpStorm, un petit CTRL+F+R permet de chercher et de remplacer en même temps.

Voici les couleurs à chercher et à remplacer :

Pour les gris :

  • #575757
  • RGB 66, 66, 66
  • #333, #333333
  • #555, #555555, rgba (51, 51, 51)

Pour les verts :

  • #008300 
  • #0A0
  • #1B870B

Une petite recherche, un remplacement de couleurs, et le tour est joué ! 😉

Libriste. Développeuse multifonctions. Community Manager à mes heures perdues. 3D Maker. Nourri 2 blogs et 3 chats.
Posts created 5

4 commentaires pour “Intégrer et customiser Tarte au Citron

  1. Bonsoir,
    Concernant la mise au couleur du site, je ne comprend pas trop la manip. Le script a insérer sur tarteaucitron est un script a positionner entre les balise head. Il y a une référence a à une css « useExternalCss », mais sa valeur est à ‘false’, ce qui a pour effet de renvoyer la css depuis le site qui héberge le script. J’ai pu récupérer la css sur GitHub
    Mais comment est-il possible d’indiquer un chemin vers une css sur son propres serveur ; en mettant la valeur à « true » ? mais comment indiquer l’url dans le script ?
    Merci pour votre retour

    1. Il y a deux façons :
      – Modifier directement la feuille de styles du script (il faudra faire attention si vous mettez le script à jour)
      – Passer la valeur de « UseExternalCss » à true. Ce qui aura pour effet de renvoyer vers la feuille de styles principale du site, où il faudra gérer intégralement le style de Tarte au Citron

  2. Bonjour et merci pour cet article, je sais personaliser la couleur en haut accepeter mais pas celle des boutons autoriser dans le choix des services. j4ai repérer les coules dans les JS #10007 et #10003 mais rien n’a changé…si vous avez une piste? ou bien faut il ajouter le style? Merci

    1. Bonjour !
      Les boutons sont générés automatiquement quand on insère un nouveau service à Tarteaucitron, ce n’est pas quelque chose que l’on peut modifier directement dans les fichiers. En revanche, en rajoutant une nouvelle ligne dans votre fichier CSS et ajouter à la fin un ‘ !important ‘ devrait aider (ce n’est pas forcément une méthode que j’apprécie)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Commencez à saisir votre recherche ci-dessus et pressez Entrée pour rechercher. ESC pour annuler.

Retour en haut