Appliquer mes CSS

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}
 Z (Z-core / Spip-r) : 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 : voir plus bas !

 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...)

Voir aussi CSS perso : où ? pour les différentes versions de SPIP et des systemes Z..