Si vous connaissez le langage CSS (sinon lisez d’abord cet article : « Introduction aux feuilles de style »), vous pouvez très facilement modifier l’apparence de votre site, sans même avoir besoin de connaître le langage des boucles et balises de SPIP.
Créez votre feuille de style
Lors de l’installation de SPIP, les squelettes sont distribués avec plusieurs « feuilles de style externes » qui regroupent les indications produisant l’habillage graphique du site. Vous pouvez modifier ces fichiers et ajouter vos propres définitions de style, mais il est préférable de le faire dans votre propre fichier CSS afin de pas voir vos ajouts « écrasés » lorsque vous installerez une nouvelle version de SPIP.
Important : ne travaillez jamais directement dans les fichiers fournis par défaut, sinon vous risqueriez de perdre toutes vos modifications à chaque mise à jour de SPIP ! Pour éviter cela, faites une copie des fichiers que vous souhaitez modifier.
1. Créez un fichier mes_styles.css (ou tout autre nom que vous avez décidé de lui donner) et rangez-le dans votre dossier « squelettes ». Vous copierez dans ce fichier les définitions de styles que vous souhaitez utiliser et modifier ; mais pour la suite de ce tutorial, nous allons considérer que vous partez d’une feuille vierge.
2. Appelez cette feuille de style dans l’entête de votre squelette, c’est-à-dire entre les balises <head> du fichier HTML (aux côtés du title et autres meta). De la façon suivante :
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}" />
Bien souvent une seule feuille de style suffit pour tout l’habillage graphique d’un site, mais vous pouvez déclarer de cette façon autant de feuilles de style que nécessaire.
- SPIP vous facilite la vie : perso.css
Pour découvrir un peu la personnalisation des styles, vous pouvez aussi tout simplement créer un fichier perso.css dans le dossier squelettes/css/.
Comme SPIP charge ce fichier en dernier dans le head, les styles qui y sont définis ou redéfinis deviendront prioritaires. L’utilisation de ce fichier est bien pratique pour :
- modifier l’un ou l’autre style
- tester des modifications
- déclarer des styles perso
Pour des développements et personnalisations plus conséquentes, il reste conseillé d’utiliser vos propres feuilles de style déclarées comme indiqué ci-dessus.
Respectez la « cascade »
Il est important de garder à l’esprit le fonctionnement « en cascade » du CSS (Cascading Style Sheets signifie littéralement « feuilles de style en cascade ») : lorsque plusieurs définitions de style concernent un même élément, est appliqué en priorité le style le plus proche de l’élément. L’ordre dans lequel les styles sont « lus » a donc une importance.
- Feuilles de style externes
Si vous utilisez plusieurs feuilles de style, notez que l’ordre dans lequel celles-ci sont appelées dans l’entête de la page a une importance. Si vous appelez d’abord mes_styles.css et ensuite spip_style.css : ce sont les styles de cette dernière, plus proches, qui s’appliqueront prioritairement aux votres. Pensez donc à faire l’inverse :
<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}">
- Styles définis dans le code HTML
Si vous ne souhaitez pas toucher aux fichiers CSS, vous pouvez continuer à insérer, par endroits, des indications graphiques directement dans le code HTML de vos squelettes : en définissant quelques styles dans le head, et/ou en plaçant des indications de style directement dans les balises HTML de la page.
Les styles placés directement dans les balises, étant au plus proches des éléments concernés, seront prioritaires sur ceux définis dans le head, eux-mêmes prioritaires sur ceux des feuilles de style externes.
Des styles qui ont de la « class »
Comment fait-on alors pour changer, par exemple, l’apparence de tous les intertitres SPIP ? C’est très simple. Ouvrez votre fichier mes_styles.css dans un éditeur de texte et ajoutez-y la ligne suivante :
h3.spip { color: red; font-size: 18px; }
Rechargez la page : tous les intertitres apparaissent comme par magie en rouge ; remarquez de plus que les autres h3 de votre page, s’il y en a, ne sont pas affichés en rouge.
Expliquons brièvement la syntaxe de cette règle de mise en page :
- h3.spip juste avant les accolades signifie que la règle ne s’applique qu’aux <h3> dotés d’un attribut class égal à « spip ». Notez bien : ni les <h3> n’ayant pas cet attribut, ni les balises ayant cet attribut sans être des <h3>, ne seront concernés.
Si vous ajoutez vos propres styles, sachez que la valeur donnée à l’attribut class est totalement arbitraire. La seule chose qui compte, est que vous utilisiez bien le même nom dans le code HTML (class="toto") et dans votre feuille de style CSS (.toto { ... }).
Rappelons toutefois que vous ne pouvez pas renommer les class associées au code généré par SPIP (dont les définitions de style sont regroupées dans [spip_style.css->1177]).
- Les accolades contiennent la liste des propriétés graphiques associées au style ainsi défini. Ici nous voyons que la couleur est réglée à rouge et que la police de caractères doit être affichée avec une taille de 18 pixels.
Notons que toutes les propriétés non définies dans cette liste garderont leur valeur habituelle pour la balise considérée ; dans le cas présent, le h3 générera toujours un texte en gras, car rien dans cette définition de style ne dit le contraire.
La gestion du cache
Le fait que les styles soient définis dans un fichier séparé a une conséquence importante. En effet, ce fichier, au contraire de vos squelettes n’est pas géré par SPIP (il n’en a pas besoin !). Cela signifie que si vous modifiez une feuille de style, vous n’avez pas besoin de vider le cache de SPIP : il suffit de recharger la page dans votre navigateur. Cela rend le réglage de la mise en page encore plus aisé.
Rappelons tout de même que votre feuille de style doit être déclarée dans vos fichiers HTML, et que ceux-ci doivent être recalculés une première fois pour que cette déclaration soit prise en compte. ... </quote>