Spip et les feuilles de style

SPIP 1.2 Lorsque l’on utilise les raccourcis typographiques dans les articles dans SPIP (permettant par exemple de mettre en gras, en italique, créer des liens hypertextes, des intertitres, etc.), SPIP produit les balises HTML nécessaires à ces effets, chacune de ces balises étant alors associée à une classe de style CSS.

Par exemple,

Ceci est un [lien->http://www.uzine.net]

est transformé en code HTML ainsi :

Le code HTML est ainsi complété par l’appel à un style CSS intitulé « spip_out ». L’utilisateur peut donc pousser la personnalisation de son interface graphique en définissant ce style « spip_out » (couleur différente, fond coloré, police utilisée...).

La plupart des raccourcis typographiques de SPIP peuvent ainsi être paramétrés avec des feuilles de style ; certains sont très utiles, d’autres seront réservés aux webmestres qui souhaitent obtenir des effets exotiques...

Où se trouve la définition de ces feuilles de style ?

Lors de l’installation de SPIP, avec les squelettes fournis en standard, la définition des feuilles de style se trouve dans le fichier :

 spip_style.css

Vous pouvez le modifier (c’est même conseillé), définir votre propre fichier de feuilles de style, ou intégrer directement des définitions dans vos squelettes.

Notez bien : la notion de feuille de style, ou cascading style sheets, n’est pas une norme propre à SPIP, il s’agit d’un standard du Web. De très nombreuses documentations existent sur ce sujet par ailleurs ; consulter par exemple la page du W3C à ce sujet.

Afin de suivre la suite de la présente explication, il est vivement conseillé d’ouvrir le fichier « spip_style.css » dans un éditeur de textes.

Les liens hypertextes

Les deux premières définitions permettent de modifier le comportement de « a » et « a:hover » ; très classiques, elles concernent tous les liens affichés sur votre page Web (afficher les liens sans soulignement, et régler le « survol » des liens hypertextes).

Viennent ensuite trois définitions propres aux raccourcis typographiques de SPIP : « a.spip_in », « a.spip_out », « a.spip_url ».

 a.spip_in concerne les liens à l’intérieur de votre propre site. Par exemple :

Ceci est un [lien interne->article1177]

 a.spip_out concerne les liens vers l’extérieur de votre site. Par exemple :

Ceci est un [lien externe->http://www.uzine.net]

 a.spip_url traite les adresses URL transformées en lien hypertexte. Par exemple :

[->http://www.uzine.net]

(ce raccourci affiche directement l’URL, avec un lien hypertexte vers cette adresse, ainsi : http://www.uzine.net).

Le principal intérêt de ces trois styles différents est de permettre de différencier graphiquement les liens internes au site et les liens vers un autre site.

Les intertitres

Les intertitres, créés par le raccourci suivant :

{{{Un intertitre}}}

peuvent être définis par le style h3.spip. Ce style est sans doute l’un des plus utiles, car il permet de définir la taille, la police et le positionnement des intertitres dans les articles.

Par défaut, la définition en est :

Code et cadre

Les éléments de code, définis par le raccourci :

<code>Du code dans le texte</code>

sont paramétrés par le style .spip_code. Peu utilisé.

Introduit dans SPIP 1.3, la balise <cadre>...</cadre> permet de présenter du code source dans un tableau (élément de formulaire) dans lequel il est facile copier-coller le texte. La feuille de style associée est : .spip_cadre, définie ainsi par défaut :

Les notes de bas de page

Les notes de bas de page, définies par le raccourci :

Le texte[[Une note de bas de page]]

sont paramétrés par le style p.spip_note. Souvent inutile, puisque les notes peuvent être modifiées directement en HTML lors de l’emploi de la balise #NOTES dans vos squelettes.

Les tableaux

Les tableaux sont définis dans SPIP de la façon suivante :

ce qui donne :

Nom	Date de naissance	Ville
Jacques	5/10/1970	Paris
Claire	12/2/1975	Belfort
Martin	1/31/1957	Nice
Marie	23/12/1948	Perpignan

Les feuilles de style permettent de paramétrer finement l’affichage de tels tableaux :

 table.spip permet de modifier le comportement général du tableau (notamment sa position, à gauche, centré...) ;

 table.spip tr.row_first définit le comportement de la « première ligne » du tableau (ici en jaune) (pour que la « première ligne » soit prise en compte, il faut que les éléments qu’elle contient soient placés en gras) ;

 table.spip tr.row_odd pour les lignes paires ;

 table.spip re.row_even pour les lignes impaires ;

 table.spip td permet de modifier le comportement des cases du tableau.

Un des intérêts repose sur le choix de couleurs différentes pour « row_odd » et « row_even », permettant de faire une présentation de couleurs alternées pour les lignes d’un tableau (ici, gris clair et gris foncé).

Ligne de séparation horizontale

Une ligne de séparation horizontale, définie par :

----

peut être modifiée par : hr.spip.

Gras et italique

Le gras et l’italique sont définis par les raccourcis :

Du texte {{en gras}}, du texte {en italique}

Ils peuvent être modifiés par les styles : b.spip et i.spip. Styles peu utiles.

Les paragraphes

Les paragraphes créés par SPIP (en laissant des lignes vides entre les paragraphes) peuvent être modifiés par le style : p.spip.

A priori, peu utile, car on peut directement paramétrer le comportement des éléments de texte en HTML.

Les formulaires

Dans l’espace public, différents formulaires sont utilisés pour le moteur de recherche interne, l’interface de rédaction des messages des forums, les inscriptions à l’espace privé...

Les feuilles de style sont : .forml, .spip_encadrer, spip_bouton, .formrecherche.

Par défaut, ils sont définis ainsi :

 .forml définit les « cases » de texte des formulaires ; utile pour définir la largeur de ces cases, et la couleur du fond ;

 .spip_encadrer ; lorsqu’un formulaire propose différentes « parties », la séparation entre ces différentes parties peut être paramétrées avec ce style (par exemple, encadrer chaque partie, créer un espace avant ou après...) ;

 .spip_bouton modifie l’aspect du bouton de validation du formulaire ;

 .formrecherche modifie l’aspect de la case « Rechercher » du moteur de recherche.

Conclusion

Vous remarquerez que, par défaut, certaines feuille de style ne sont pas définies. Elles peuvent être considérées comme très accessoires (réservées aux webmestres voulant obtenir des effets graphiques très spécifiques).

En règle générale, les styles qui provoquent des modifications graphiques spectaculaires sur un site, par ailleurs simples à paramétrer, sont celles qui concernent :
 les liens de l’ensemble de la page, a et a:hover,
 le comportement des intertitres, h3.spip,
 les formulaires.