Je prends le prétexte d’une question sur l’interlignage des descriptions d’une galerie Piwigo pour expliquer comment effectuer des modifications dans une feuille de style.

L’opération se déroule en deux phases :

1. l’analyse du ou des éléments de style à modifier, et la simulation des nouveaux paramètres. Le procédé décrit est valable pour n’importe quelle page web  (y compris celles dont vous êtes simple visiteur !) faisant appel à l’HTML et au CSS, et nécessite l’utilisation de Firefox avec son extension Firebug (voir cet article pour plus de détails).
2. l’adaptation de la feuille de style Piwigo, qui requiert l’utilisation du plugin LocalFiles Editor.

Voici la page originale avant modifications :

1. Analyse et simulation avec Firebug

Ouvrez la page concernée dans Firefox, puis actionnez la touche F12 pour lancer Firebug. Placez alors votre curseur sur la zone que vous souhaitez analyser (pavé bleu ci-dessous), faites un Clic-droit, puis sélectionnez Inspecter un élément dans le menu contextuel. Dans la partie basse de votre page s’ouvre un cadre, subdivisé en deux parties :

• le contenu de la page affichée, en HTML, dans la colonne de gauche
• les styles CSS associés, dans la partie droite

Les 3 parties de la fenêtres sont liées, et se mettent à jour automatiquement : le survol de la page web se reflète dans la partie HTML, et vice-versa ; et les styles affichés dans la partie CSS sont réaffichés dynamiquement, de sorte qu’ils correspondent toujours au texte en surbrillance.  En sélectionnant une description de catégorie (pavé bleu ci-dessus), les styles affectant cette zone s’affichent automatiquement dans la partie droite, en commençant par le plus spécifique à la zone considérée, jusqu’au style hérité le plus générique. Comme il ne s’agit ici que de modifier les descriptions affichées précisément sur cette page, nous nous intéresserons au style le plus « direct », celui qui figure en tête de la colonne, ainsi rédigé :

.content div.thumbnailCategory div.description {
font-size:90%;
}

Un style CSS est composé de deux parties :

• ce qui précède { est le sélecteur, qui identifie la/les zone(s) affectée(s) par le style ; nous n’y toucherons pas
• entre les accolades { et } se trouvent les attributs, qui décrivent les clauses de styles à appliquer ; ils sont séparés et terminés par un ;. La clause qui nous intéresse ne comporte actuellement qu’un seul attribut, qui définit une taille de police légèrement inférieure à celle définie en standard : font-size:90%;

Pour créer un nouvel attribut, il suffit de positionner le curseur sur un attribut existant, et d’actionner la touche Tab jusqu’à ce Firebug crée une nouvelle ligne, puis de commencer à saisir le nom de l’attribut. Saisissez line-height pour agir sur la hauteur de ligne, puis une nouvelle tabulation pour accéder à la valeur de l’attribut où vous mettez 1.5em (1em étant la hauteur standard d’une ligne). La modification est instantanément visible sur la page affichée, et ce pour l’ensemble des zones impactées (encadrées en rouge ci-dessous).

Ajustez éventuellement la hauteur de ligne à votre goût ; inutile de resaisir des chiffres au petit bonheur : lorsque vous êtes positionné sur la valeur de l’attribut, les flèches Haut et Bas de votre clavier vous permettent de modifier à la hausse ou à la baisse la valeur initialement saisie, et la page affichée est immédiatement modifiée en conséquence. Et pour revoir « comment c’était avant », il vous suffit de cliquer sur l’icône de désactivation à gauche de l’attribut (Cf. copie d’écran ci-dessus) … puis de réactiver votre modification en cliquant à nouveau sur la même icône.

Un vrai bonheur de pouvoir tester tout plein de modifications en étant sûr de ne rien casser !

Une fois que vous êtes satisfait de vos améliorations, notez-les sur un bout de papier, ou faites Clic droit – Copier, mais attention, nous ne ferons pas forcément un Coller intégral. Il est maintenant temps de les reporter dans la « vraie » feuille de style.

2.Adaptation feuille de style avec LocalFiles Editor

Dans l’administration de Piwigo, rendez vous sur l’onglet CSS du plugin LocalFiles Editor, puis sélectionnez la feuille de style locale correspondant au style que vous utilisez. Ce fichier, qui n’existe pas lorsque vous installez Piwigo, est destiné à enregistrer vos modifications personnelles ; elles viendront supplanter les règles correspondantes fournies en standard, et seront conservées lors des futures montées de versions.

Ajoutez la règle telle que vous l’avez définie avec l’aide de Firebug : le sélecteur complet, et l’attribut correspondant entre ses accolades.

N’oubliez pas de cliquer sur le bouton Enregistrer le fichier. Il ne vous reste plus qu’à aller contempler le résultat …

Pour approfondir …

… les différentes possibilités pour styler un texte, je vous recommande cette page du site W3Schools ; vous y trouverez la liste de tous les attributs possibles et des valeurs associés, ainsi que des exemples interactifs pour tester à volonté (vous modifiez le CSS, vous cliquez, et vous voyez immédiatement le résultat).