Comme de nombreux développeurs web, j’ai découvert, il y a quelques temps déjà, le thème Divi commercialisé par l’équipe de Elegant Theme.

Ce thème, très riche en fonctionnalité, nous permet, à nous développeurs, de gagner un temps précieux et nous fournit toute une « palette » de modules utiles faciles à implémenter sur nos sites.

Néanmoins, il est toujours pratique de pouvoir rajouter soi-même des fonctionnalités à un outil dont on se sert quotidiennement.

Dans cet article, je vais vous expliquer comment personnaliser la palette de couleur accessible depuis l’interface de Divi pour TOUT le site :). C’est utile quand on a définit la charte graphique d’un site avec notre client de pouvoir accéder facilement et automatiquement aux couleurs personnalisées que l’on a choisi.

Si je suis plus courageux, je convertirai ce code en plugins pour le mettre plus facilement à disposition. Dans l’immédiat, voyons comment faire.

• Commencez par télécharger ce fichier de thème enfant,
• Allez dans l’interface d’administration de votre site -> « Apparence » -> « Thèmes » et cliquez sur « Ajouter » -> « Mettre un thème en ligne »,
• Sélectionner le fichier « ColorJS.zip » que vous venez de télécharger, puis cliquez sur « Installer maintenant« ,
• Enfin, Activez-le.

Vous pourrez le personnaliser à vos besoins comme n’importe quel thème enfant de Divi en ajoutant vos propres règles CSS dans le fichier de style habituel.

Une fois que vous aurez défini les couleurs personnalisées de votre site (que vous aurez noté au format hexadécimal), il ne vous restera plus qu’à éditer le fichier « color.js » (à l’aide de votre nouvel éditeur préféré : Notepad++) qui se trouve dans le sous-répertoire « js » de votre thème.