Modifier quelques styles

Tout d’abord, rappelons que ces pratiques sont réservées au webmestre exclusivement ; d’ailleurs, c’est le seul à pouvoir accéder à l’ensemble des outils de modifications.

Mais rien ne vous interdit d’observer la stylisation (ou la structuration) d’une page de votre site favori  !

 Les outils nécessaires

Il faut distinguer deux classes d’outils :
 ceux utilisés sur votre poste client, pour examiner les styles : ce sont généralement des addons de votre navigateur favori.
La référence est souvent FireBug sur FF [1] (auquel correspond DragonFly sur Opera), que vous compléterez aussi avec Web developer ; enfin, vous pouvez aussi vouloir regarder la structuration des headers et ancres...

 ceux installés sur votre serveur SPIP : c’est les outils et options de debug de SPIP, et seul le webmestre -connecté- du site peut les utiliser !
il s’agit essentiellement de l’option var_mode=inclure et du plugin Skeleditor qui en fait une présentation plus ergonomique.

 L’examen externe

Cette étude peut s’appuyer sur plusieurs aspects :

SPN headings

 commençons par la structure de la page telle que mise en evidence par les niveaux de titres, comme celle proposée par l’addon HeadingMaps.
_ Vous voyez ici la hiérarchie de la page Web d’un article [2], qui fait normalement apparaître une certaine arborescence sémantique du document : souvenez-vous que les lecteurs vocaux de page (pour accessibilité aux déficients visuels... ) se basent sur cette structure pour dicter le texte et la navigation de la page...

 la plupart des webmestres connaissent déjà Webdeveloper, dont la barre d’outils s’affiche facilement.
L’utilisation de WebDeveloper  > Infos > Dimensions des Div ou Ordre des div présente d’autres informations permettant de comprendre l’organisation des blocs de votre page :

 mais vous préfererez peut-être la visualisation 3D offerte par FireBug, en cliquant sur l’icone 3D (celle en bleu dans le bandeau ci-joint).
(c’est joli de faire tourner votre maquette de page à la souris...).

 Auditer le code HTML

Plutôt que de visualiser le source de votre page, utiliser l’examinateur FireBug (activez par clic-droit Examiner l’élément) : cela vous propose une lecture arborescence du code de la page, en cliquant sur les puces-triangles des divers blocs HTML

Ensuite, vous pouvez profiter de trois options remarquables de simplicité :
 visualiser la ligne de code correspondant à une zone cliquée (et réciproquement) dans votre page HTML
 visualiser les lignes de feuilles de style CSS correspondantes (fenêtre à droite)
 modifier directement l’apparence en éditant un attribut CSS dans cette meme fenetre

Helas, les modifications mises au point ne peuvent pas être directement sauvegardées dans SPIP :
mais c’est normal, par sécurité, ce travail est réservé au webmestre (voir ci-après).

Dernier point, l’usage des sélecteurs CSS : là encore FireBug vous affiche (dans une bulle noire) les sélecteurs correspondants à la zone cliquée à examiner, et il met en évidence le bloc correspondant par un encadré en pointillé.

 Corriger

Pour corriger le source générant la page que vous consultiez, il vous faut donc être Webmestre et connecté !

La première question -savoir quel fichier-squelette corriger- trouve sa réponse dans l’utilisation du paramètre &var_mode=inclure (activé par le bouton Squelettes CSS dans le bandeau d’admin si Skeleditor est installé) : ce paramètre provoque l’exposé des noms de fichiers squelettes, s’affichant au debut de la zone de la page qu’il génère...

La seconde étape -modifier le source- s’opère directement par un clic sur le nom de squelette, Skeleditor ouvrant directement une fenêtre d’édition dans l’espace privé, ou avec tout Editeurs du WebMestre PC ou Editeurs pour WebMestre Linux...

Nous verrons prochainement où intervenir, que ce soit pour Quel squelette modifier ?, ou pour le sélecteurs de style CSS...