Dans l’article précédent, nous avons vu quels étaient les avantages des feuilles de style CSS. Voyons maintenant quel usage spécifique SPIP fait des feuilles de style.
Des styles définis par SPIP
Dans SPIP, certains styles jouent un rôle important : ils servent à modifier les propriétés graphiques des éléments qui ne sont pas définis dans votre HTML (celui de votre squelette), mais dans le code généré par SPIP. En effet, SPIP associe de lui-même plusieurs styles au code qu’il génère.
Ainsi, lorsque l’on utilise les raccourcis SPIP dans les articles (permettant par exemple de mettre en gras, en italique, créer des liens hypertextes, des intertitres, des tableaux, etc.), SPIP produit les balises HTML nécessaires à ces effets, chacune de ces balises étant alors dotée d’un sélecteur CSS.
Par exemple, le raccourci suivant :
Ceci est un [lien->http://www.uzine.net]est ainsi transformé en code HTML :
Ceci est un <a href="http://www.uzine.net" class="spip_out">lien</a>
Quel est l’intérêt ? Ces balises portent un nom spécifique dans l’attribut class : ce nom définit à quelle « classe » ils appartiennent, c’est-à-dire un ensemble d’éléments HTML qui hériteront des mêmes propriétés graphiques définies dans la feuille de style.
Dans notre exemple, le code HTML est complété par le sélecteur CSS intitulé « spip_out ». Le webmestre peut donc pousser la personnalisation graphique des liens sortants en modifiant la définition stylistique de « spip_out » (couleur différente, fond coloré, police utilisée, etc.).
L’apparence de la plupart des raccourcis SPIP peut ainsi être paramétrée dans les feuilles de style. Cela vaut aussi pour les formulaires automatiques (répondre à un forum, signer une pétition...) et d’autres encore. Certains de ces styles sont très utiles, voire indispensables, d’autres seront réservés aux webmestres qui souhaitent obtenir des effets exotiques.
Où se trouvent ces définitions de style ?
Les propriétés graphiques appliquées aux pages HTML sont regroupées dans les fichiers .css qui accompagnent les squelettes. Les squelettes et leurs feuilles de style sont regroupés dans le répertoire squelettes-dist/.
- Les définitions de style propres à SPIP se trouvent dans la « feuille de style externe » nommée spip_style.css. Celle-ci regroupe les définitions des styles associées au code généré par SPIP (passées en revue dans cette rubrique).
- Une autre feuille de style, spip_admin.css, permet de contrôler l’apparence des boutons d’administration (« recalculer cette page », etc.).
Vous pouvez les modifier (c’est même conseillé : « Mettez-y votre style ! »), mais notez bien que vous ne pouvez pas les renommer. Ces styles sont indispensables et doivent nécessairement être définis pour un bon affichage de vos squelettes.