CSS perso : où ?

  Où ajouter ses personnalisations de CSS

Le principe des squelettes (et des thèmes) reste d’utiliser les surcharges de squelettes (en fait plutot des règles de priorité d’utilisation), pour donner précédence aux fichiers du dossier ./squelettes par rapport aux squelettes téléchargés à l’installation.

Ceci est en particulier repris pour les feuilles de styles, les styles définis dans les thèmes et/ou la dist, étant adaptables par la simple ecriture d’une feuille perso.css. ; le meme processus est aussi disponible pour Imprimer proprement les pages (à une nuance près).

Article publié le 16 janvier 2015, et actualisé en mai 2024

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Attention, cette page est encore en  

La feuille de style de personnalisation est nommée de façon standard perso.css pour Appliquer mes CSS ; ce fichier est appelé par la noisette de header des squelettes, en standard squelettes-dist/inclure/head.html et vous placerez votre version dans le dossier des squelettes.
Attention : le fichier source perso.css n’est pas interprété par SPIP,sauf si vous placez au même endroit un fichier analogue css/perso.css.html qui sera alors la feuille de style de personnalisation prise en charge par SPIP, après interprétation des balises SPIP éventuelles.
Le plus simple était parfois de simplement recopier squelettes-dist/habillage.css en squelettes/perso.css pour bien identifier les styles disponibles, puis à éditer cette copie renommée pour ne conserver que les lignes de modifications que vous voudrez appliquer !

 Dist SPIP 2.1

En SPIP 2.1, les diverses feuilles de styles sont insérées par l’intermédiaire du fichier inc-head.html à consulter en-ligne dans votre dossier squelettes-dist/.
Ce sont successivement
- spip_style.css : Feuille de style par defaut pour le code généré par SPIP
- spip_formulaires.css : Feuille de style par defaut pour les formulaires de SPIP
- #INSERT_HEAD_CSS : Balise permettant aux plugins d’insérer leurs propres CSS
(ce qui interdit aux plugins de surcharger les styles standard SPIP)
- habillage.css : Feuille de style CSS pour l’affichage du site a l’ecran
- impression.css : Feuille de style CSS pour l’impression
-  perso.css : Feuille de style personnalisée pour surcharger les précédentes
(A noter par défaut -et c’est vrai dans toutes les installations standard décrites ci-dessous- cette css n’existe pas : c’est à vous de créer ce fichier texte CSS dans Le dossier ./squelettes).
- spip_admin.css : les boutons d’administration (rajoutée après coup, pour les seuls utilisateurs connectés).

 En ZPIP

L’implémentation de ZPIP est effective dans le plugin de nom z ; le ./inclure/head.html standard appelle :
- le header éventuel (si #CHEMIN{inc-theme-head.html}) du thème par #INCLURE{fond=inc-theme-head},
- la feuille de personnalisation de styles : : #CHEMIN{perso.css}

 Dist SPIP 3.0

L’appel standard de feuilles de styles dans ./css/ estdans le ./inclure/head.html :
- une feuille de vos styles : #CSS{css/style.css}
- la feuille de personnalisation : #CSS{css/perso.css}

 Avec Z ! spipr

Z-core appelle les feuilles de styles de ./css/ dans le ./inclure/head.html :
- les feuilles standard et les feuilles insérées par des plugins #INSERT_HEAD_CSS
- la feuille de style du thème : #CSS{css/theme.css},
- le header éventuel (si #CHEMIN{inc-theme.html}) du thème par #INCLURE{fond=inc-theme},
- la feuille de personnalisation de styles : #CSS{css/perso.css}

 Depuis SPIP 3.1

Pour Personnaliser sa dist SPIP 3, SPIP organise strictement l’appel de ses feuilles de style css, toujours dans ./squelettes-dist/inclure/head.html selon la méthode daisy ; et Appliquer mes CSS propose désormais trois feuilles de styles personnalisables en Structuration des sélecteurs CSS , toujours recherchées par une balise #CHEMIN{css/*.css} , donc dans un sous-dossier ./css :

  • la feuille theme.css est déjà présente dans Squelettes de la "dist", et vous devrez donc la modifier à partir d’une copie en ./squelettes.
  • vous pourrez éventuellement y ajouter une variante.css à votre guise
  • enfin la traditionnelle feuille perso.css est toujours appelée en dernier

Ces feuilles de style css sont donc à utiliser pour Les couleurs d’un SPIP 3.x !

A noter que les appels aux favicon sont également présent depuis ce même ./inclure/head.html tout en fin de fichier.

A noter : le plugin Zcore introduit une balise #CSS (définie en zcore_pipelines[256], analogue à #CHEMIN) qui effecture un calcul dynamique du fichier CSS chargé (en général /css/perso.css.html, sinon /css/perso.css), avec le commentaire #PRODUIRE{fond=css/perso.css}, que vous retrouverez alors dans /local/cache-css/cssdyn-css_perso_css-....,... avec l’effet de bord pernicieux que vous ne verrez plus révélée par SkelEditor votre feuille de style correctrice, si elle est en ..css.html [1] !

Par ailleurs, vous pourriez aussi être intéressés à consulter le perso_css en fin de Adapter SPIP pour un Intranet...


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Ce qui n’est pas forcement une bonne pratique d’ailleurs, de faire interpréter du CSS à SPIP : les plugins SCSSPHP et LESS-CSS sont là pour cela !


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 16 janvier 2015, et actualisé en mai 2024 Provisoire (à compléter...) .

Répondre à cet article