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

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.

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.1  !

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


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


Liens visibles seulement pour les inscrits.

Article publié le 16 janvier 2015, et actualisé en août 2018 Provisoire (à compléter...) .

Répondre à cet article