La modification des couleurs d’un thème Piwigo est probablement l’une des personnalisations les plus simples à réaliser ; sans pour autant « casser » le thème original, puisqu’il s’agit simplement d’ajouter, dans un fichier local qui vous est propre, les quelques règles CSS qui viendront supplanter celles du thème original lors du chargement de la page. Dans cet exemple, on va modifier les couleurs du thème Marine, qui comporte un fichier style theme.css et une image de fond /img/bckgnd.png

Assurez-vous d’abord que le plugin LocalFiles Editor est bien présent et activé sur votre galerie (il doit apparaître dans la liste des plugins du menu). Sélectionnez l’onglet CSS, puis le fichier local/css/marine-rules.css correspondant au thème Marine. Ce fichier est vide, vous allez y mettre les nouvelles règles de style que vous souhaitez appliquer à la place de celles du style standard.

Dans votre éditeur de texte, ouvrez le fichier style à modifier (ici theme.css du thème Marine) de manière à l’avoir sous les yeux, et pouvoir en copier les lignes que vous allez modifier.

Sélectionner les règles comportant un attribut de couleur (fond, bordure, police, etc. surlignées en jaune) que vous souhaitez modifier,

copiez les dans le fichier créé par LocalFiles Editor, puis remplacez les codes couleurs par ceux que vous désirez.

Il faut également changer l’image de fond (règle surlignée en bleu). Celle d’origine est stockée dans un sous-répertoire /img du thème ; le plus simple consiste à enregistrer la nouvelle image sous le même nom, mais dans un sous-répertoire /img du répertoire /local/css. Ainsi, il vous suffit de recopier la règle d’origine dans marine-rules.css, sans la modifier.

N’oubliez pas d’Enregistrer le fichier une fois les modifications effectuées.

Pour obtenir le résultat suivant :

il a suffi de redéfinir 3 couleurs dans marine-rules.css :

• #1f4576 a été remplacé par #76532d
• #426096 par #937759
• #061635 par #330800

et d’enregistrer la nouvelle image de fond en tant que /local/css/img/bckgnd.png

Maintenant, la bannière d’en-tête n’est plus vraiment en harmonie avec votre nouveau thème ! Pour la modifier, voyez ce billet.