Appliquer mes CSS

  une personnalisation (perso.css) sans tout casser


L’habillage graphique est presque entièrement défini en SPIP, grâce à des fichiers CSS, qui représentent un ensemble impressionnant de lignes.

Mais SPIP est conçu de telle manière qu’il est bien plus facile d’en modifier -et surtout personnaliser- la visualisation que pour d’autres produits très connus, sans être obligé d’Appliquer un thème standard, ni d’etre expert en CSS et HTML : vous pouvez facilement rajouter quelques définitions surchargeant les expressions données dans le habillage.css standard, en créant et complétant un fichier perso.css dans Le dossier ./squelettes, automatiquement pris en compte par SPIP.

 
 
 
 
 
 
 
 

On se souvient que toute modification de SPIP doit se faire dans le dossier ./squelettes pour ne pas perdre ses modifications lors d’une mise-à-jour.

Pour l’habillage graphique, les modifications consistent le plus souvent à surcharger des styles définis par SPIP sur certains éléments affichés : il faut identifier les styles concernés, puis en donner une définition corrigée dans la feuille personnalisée perso.css.

Pour la définition des styles d’habillage de SPIP -assez nombreux, et repris normalement dans habillage.css- ils ne seront pas étudiés dans cette page... qui veut juste s’intéresser à quelques pièges rencontrés dans cette étude.
Vous commencerez donc à écrire votre fichier de styles personnalisés, avec vos connaissances CSS/HTML..

Les headers de Squelettes de la "dist" et de la plupart des Zpip ou Z, Zcore et Thèmes prévoient bien la reprise d’un fichier perso.css recherché dans les [NPA] chemins ; mais ce fichier est un vrai fichier CSS, donc parfaitement accessible et modifiable pour les afficionados du CSS.

Quelques pièges

- l’emplacement du fichier perso.css est parfois différent, entre les versions de SPIP : vérifiez dans le squelette head.html [1] réellement utilisé :
- SPIP 3 : utilise #CHEMIN{css/perso.css}
- SPIP 2 : utilise #CHEMIN{  perso.css  }
- & Zpip : utilise #CHEMIN{  perso.css  }
- et attention au cas spécifique de spip_admin.css pour les boutons d’administration

- ce fichier perso.css n’est pas un fichier squelette interprété par SPIP, bien qu’il soit normalement posé dans le répertoire des Le dossier ./squelettes : c’est parce qu’il ne possède pas l’extension .html implicite obligatoire pour activer le moteur d’exécution des instructions SPIP, et cela induit deux conséquences, parfois gênantes :

  1. impossible d’y insérer une balise de champ qui ne serait pas interprétée ; on peut contourner ce fonctionnement en définissant plutôt le fichier perso.css.html..
  2. le chemin relatif des fichiers images doit être exprimé explicitement, car vous ne pouvez pas utiliser #CHEMIN{images/..} : par exemple,si le fichier de styles perso est dans le dossier squelettes, et vous appliquez une image de fond tirée du sous-répertoire ./squelettes/images, vous écrirez sans doute dans votre CSS : #entete {background-image: url( squelettes/images/bandeau.jpg) repeat-x; }

- enfin, un cas particulier : la personnalisation du bandeau d’administration (qui affiche les boutons d’administration par un #FORMULAIRE_ADMIN) n’est pas possible par perso.css [2] mais inséré tout juste avant le tag </head> dans vos pages affichées ; toutefois, vous pouvez surcharger celle-ci en créant un spip_admin_perso.css (que cette fonction rajoutera aussi...)


Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Normalement inclure/head.html est utilisé par tous les squelettes..

[2Plus précisement la fonction ./public/admin.php [44]affiche_boutons_admin() spip_admin.css au lieu d’utiliser #INSERT_HEADER_CSS, le faisant par le pipe affichage_final.


Liens visibles seulement pour les inscrits.

Article publié le 24 septembre 2013, et actualisé en octobre 2014 .

Répondre à cet article