Le langage CSS (Cascading Style Sheets ou feuille de style) est très utilise pour personnaliser sa galerie. Il permet de changer les couleurs mais aussi l'affichage de certains éléments. Très pratique aussi pour masquer des éléments.

Tout dépend de votre navigateur :

• Firefox : il vous faudra le plugin Firebug. Ensuite faites F12 ou vous pouvez aussi faire un clique droit, puis “inspecter un élément”
• Internet Explorer : utilisez la touche “F12”.
• Opéra : utilisez Opera Dragonfly en appuyant sur les touches Ctrl + Maj + I sur un ordinateur sous Windows ou Linux, ou sur ⌘ + ⌥ + I sur un Macintosh. Vous pouvez aussi faire un clique droit, puis “inspecter l'élément”.
• Chrome : utilisez la touche “F12”, et l’icône loupe pour inspecter un élément.
• Safari : allez dans Edition→Préférences→avancées et cocher “Activer le menu développement…”, puis vous verrez un nouveau menu en haut entre Favoris et Fenêtre. Vous utiliserez “Afficher l’inspecteur web”.

Chaque élément est identifié par une ou plusieurs balises.

Sans vous expliquer tout le fonctionnement du code CSS, voici un exemple de ce qu'il est possible de faire avec Mozilla.
A l'aide donc du plugin Firebug, ouvrez une page de votre galerie et faites un clic droit n'importe puis cliquez sur “Inspecter un élément”.
Un menu dans le bas de la fenêtre s'ouvre (voir Fig.01).

Sur la Fig.01 je suis volontairement sur l'onglet HTML qui nous permet de visualiser le contenu de la page tel que le lit notre navigateur.
La fenêtre est donc séparée en 2 zones.

1. La première zone (à gauche) permet de visualiser le code HTML de la page et de se balader en son sein.
   Info : Vous remarquez qu'en sélectionnant tel ou tel ligne, vous mettez en surbrillance la zone de la page correspondante. Pratique non ?!
2. La seconde zone (à droite) nous donne toutes les propriétés CSS qui s'applique à la ligne que l'on a sélectionné à gauche. Et c'est dans cette zone que l'on peut facilement effectuer des modifications de code CSS en direct et observer les effets instantanément.

Comme vu précédemment, il devient facile de modifier les propriétés qui affectent une balise directement dans la zone de droite. On peut tout aussi bien rajouter des propriétés qu'en désactiver.

Une fois que que vous avez trouver une adaptation à faire à votre galerie via le CSS, vous allez vouloir intégrer cette petite adaptation.

Piwigo dispose d'un dispositif permettant d'ajouter votre propres modification à l'ensemble de votre galerie (affectant tous les thèmes) ou bien n'impactant qu'un thème bien précis.
Bien sûre, vos modifications ne seront pas perdues lors de mises à jours futures (de Piwigo mais aussi des thèmes).

Via le forum on vous donne un code CSS et vous ne savez pas où l'ajouter ?

Via Firebug vous avez trouvé comment embellir votre galerie ?

Allez dans [ Administration » Plugins » localfiles_editor¹⁾ » Onglet ”CSS” ]
Là vous avez une liste qui vous donne le choix entre un fichier local-rules.css et puis tout une liste correspondant aux thèmes de votre galerie.

Le fichier local-rules.css est un fichier qui sera lu à chaque fois par Piwigo, peut importe le thème affiché.
En conséquent, ajouter votre code dans ce fichier va impacter tous les thèmes. C'est pratique pour certaines adaptations mais pas pour toutes…

Les fichiers correspondant à vos thèmes quand à eux ne vont agir que si le thème en question est actif. Donc c'est très bien pour adapter un thème en particulier.

Ajouter simplement le contenu du code que vous avez et enregistrez. Les effets sont normalement immédiat.
Sinon, pensez à vider le cache de votre navigateur.

Non, absolument pas !
Inutile de tout réécrire, Piwigo va “surcharger” le code CSS original par celui que vous avez modifié.

Non, absolument pas !
Vous n'avez besoin d'écrire que le sélecteur suivi de des éléments modifiés. Tout ce que vous n'avez pas modifié n'a aucunement besoin d'être réécrit. Piwigo va “surcharger” le code CSS original par celui que vous avez modifié.

Si vous ne modifiez que 3-4 éléments il est assez facile de savoir reconnaître le code et savoir ce qu'il impact.
Mais si vous avez plusieurs lignes, il sera nécessaire de bien identifier vos modifications.

Exemple :

// Avec ce code je cache le menu de ma galerie
#menubar {
  display: none;
}

Les fichier CSS que vous générez via le plugin LocalFiles Editor se trouvent dans le répertoire :

./piwigo/local/css

Sujet d'origine : http://fr.piwigo.org/forum/viewtopic.php?pid=161852#p161852