Le code CSS (personnaliser sa galerie)

Introduction

Le langage CSS (Cascading Style Sheets ou feuille de style) est très utilisé 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.

Quelques sites pour apprendre le CSS

Prérequis

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”.

Je cherche ma balise

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).

Fig.01 Menu Firebug
Fig.01 Menu Firebug


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 telle ou telle 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'appliquent à la ligne que l'on a sélectionnée à 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.

Je modifie mon code à la volée

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.

Je souhaite intégrer mes modifications dans Piwigo

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).

Où ajouter mes modifications ?

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 Editor1) » 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, peu 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 quant à 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.

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

Dois-je réécrire tout le contenu d'un fichier ?

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

Dois-je réécrire toutes les propriétés d'un élément ?

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é.

Commentez vos modifications !

Si vous ne modifiez que 3-4 éléments il est assez facile de savoir reconnaître le code et savoir ce qu'il impacte.
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;
}

Où sont stockées mes modifications ?

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

Pour aller plus loin...

1) Le plugin doit être activé au préalable
 
Haut de page
utiliser/utilisation/fonctionnalites/css.txt · Dernière modification: 2013/12/30 01:42 par tosca
 
 
github twitter facebook google+ newsletter Faire un don Piwigo.org © 2002-2017 · Contact