Accueil > Recettes Techniques > SPIP > SPIP : Colorier des squelettes par défaut (DIST) avec les CSS

SPIP : Colorier des squelettes par défaut (DIST) avec les CSS

lundi 27 août 2007, par Julien Falconnet

La version 1.9 de SPIP a apporté un squelette par défaut (nommé DIST) particulièrement bien construit, permettant de nombreuses personnalisations du site en passant simplement par l’édition de fichiers CSS. Il s’agit dans cet article d’explorer pratiquement quelques unes des possibilités de personnalisation des couleurs.

Objectif

Il s’agit dans cet article de se doter d’une méthode simple et rapide pour redéfinir complètement les couleurs de DIST.

Pré-requis

Pour profiter pleinement de cet article le lecteur doit etre familier avec les notions suivantes :
– CSS [1]
– SPIP 1.9 [2]
– DIST [3] (savoir que c’est la présentation par défaut de SPIP)
– La lecture de l’article de présentation générale de la CSS de la DIST est fortement recommandée.
– Il n’est PAS nécessaire de savoir faire ses propres squelettes.

De plus, on rappelle que toutes les modifications dont il sera fait état ici, doivent être réalisées dans un répertoire /squelettes et non pas dans /dist au risque de perdre tout son travail à la prochaine mise à jour. Pour les vrais nouveaux je rappelle qu’il suffit de créer un répertoire /squelettes dans /spip et d’y copier les fichiers qu’on veut modifier (ici les .css). Après une mise à jours du cache ce seront automatiquement ces fichiers qui seront utilisés.

Colorisation générale

Il est possible de changer l’ensemble des couleurs de SPIP/DIST à partir des feuilles de style. Le problème est que les déclarations de couleurs sont perdues dans le code abondant des fichiers spip_style.css et habillage.css (je laisse volontairement de côté spip_admin.css). Pour faire des modifications rapides et se faire une idée du résultat tout en gardant la possibilité de revenir en arrière, une bonne solution est de se placer à la fin de habillage.css (pensez à travailler dans /squelettes/ et pas dans /dist/). En effet comme c’est la dernière feuille de style inclue, les déclarations ajoutées à la fin primeront sur toutes les autres (à condition bien sûr que les autres règles de priorités CSS ne priment pas).

Voici donc un jeu de déclaration que l’on peut placer en fin de fichier habillage.css. En remplissant les # par des couleurs, vous allez colorer l’ensemble de votre site (ou presque). Cela vous permettra de faire des essais ou des maquettes rapidement. J’ai étayé autant que possible le code de commentaires. Les couleurs indiquées sont celles utilisées par défaut dans DIST.

/*******************
/* >> COLORIER << */
/******************/
/* > pour toutes les pages */
body{background:#FFFFFF; /*le fond de page*/
color:#000000;} /*la couleur par défaut (essentiellement pour des broutilles*/
.texte { color: #000000; } /* L'essentiel des contenus */
a { color: #000000; }/*Attention ce sont la plupart des titres*/
a.on{ color: #000000; }/* Pour les liens menant vers la page courante */
.cartouche .titre {color: #000000; }
/* > Pour les petits cadres de liens (noisettes ou assimilés) */
/* Pour chaque, le fond général puis le fond du titre du cadre (.menu-titre) */
.rubriques { background:  #EAFFEA;}
.rubriques .menu-titre { background: #F2FFF2; }
.breves { background: #EAFFEA; }
.breves .menu-titre { background: #F2FFF2; }
.syndic { background: #E8F8F8; }
.syndic .menu-titre { background: #F0FCFC; }
.forums { background: #EAFFEA; } /*sert notamment pour le cadre "auteurs"*/
.forums .menu-titre { background: #F2FFF2; }
.divers { background: #E8F8F8; }
.divers .menu-titre { background: #F0FCFC; }
/* >  Détails de pages particulières */
.page_plan #contenu h2 {background: #EEEEEE;} /*Affichage des rubriques de niveau 1*/
.forum-texte{background: transparent;} /* le textes des commentaires*/
ul .forum-chapo {background: #C4E0E0; } /* les titres des commentaire en fonction de leur profondeur */
ul ul .forum-chapo { background: #D4E8E8; }
ul ul ul .forum-chapo { background: #E4F0F0; }
ul ul ul ul .forum-chapo { background: #F4F8F8;}
ul ul ul ul ul .forum-chapo { background: #FFF; }

Quelques remarques sur ce code :

  1. Il est minimaliste : les fonds et les couleurs
  2. On peut compliquer en ajoutant des background et des color. Attention au mauvais goût.
  3. On peut encore compliquer en jouant sur les bordures (ajout, retrait, personnalisation). Attention à la mise en page avec des bordure larges.
  4. Même pour les choses de bases on peut compliquer. En jouant par exemple sur #page (mais attention, sans toucher à la composition ça risque d’être moche). En ajoutant des images de fond (mais encore il risque de falloir ajouter de la composition pour obtenir un résultat satisfaisant)
  5. On peut aussi compliquer en jouant sur les polices.

Un code encore plus concis

En poussant plus loin et en essayant de faire plus rapide, voici un code plus court. C’est un peu moins fin, mais ça va nettement plus vite pour se faire une idée. J’ai fonctionné par factorisation en regroupant les sections qui ont de bonnes raisons d’avoir les même couleurs (texte par défaut et texte des articles par exemple).

body{background:#;} 
body, a,.forum-chapo .forum-titre a { color: #; }
a.on{ color: #; }
.cartouche .titre {color: #; }
.texte, .forum-texte { color: #; } 
.rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background:  #;}
.forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #; }

Quelques exemples

Et en guise d’exemples, voici trois blocs à copier coller pour se faire une idée (ils sont laids mais représentatifs ;) ).

Si vous êtes sous Firefox/Iceweasel et avez installé le greffon "web developeur", vous pouvez même tester en direct avec un ctrl+maj+e puis en copiant collan à la fin de habillage.css .

COULEURS GRISES

body{background:#EEF; color:#A00;} 
.texte { color: #800; } 
a,.forum-titre a { color: #606; }
a.on{ color: #A00; }
.cartouche .titre {color: #800; }
.rubriques,.breves,.forums, .syndic, .divers { background:  #DDD;}
.rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #CCC; }
.page_plan #contenu h2 {background: #CCC;} 
.forum-texte{background: #DDD;color:#333;} 
.forum .forum-chapo {background: #CCC; }

COULEURS FONCEES 

body{background:#202;} 
body, a,.forum-chapo .forum-titre a { color: #AFA; }
a.on{ color: #CFC; }
.cartouche .titre {color: #3F3; }
.texte, .forum-texte { color: #0F0; } 
.rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background:  #000;}
.forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #606; }

COULEURS ROSES

body{background:#F88;} 
body, a,.forum-chapo .forum-titre a { color: #008; }
a.on{ color: #33D; }
.cartouche .titre {color: #22D; }
.texte, .forum-texte { color: #008; } 
.rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background:  #FFA;}
.forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #FF8; }

Documentation complémentaire

Et enfin, en guise de documentation complémentaire, un recensement des définitions de couleurs dans la DIST. C’est notamment utile lorsqu’on cherche à comprendre pourquoi telle ou telle définition ne veut pas s’appliquer (recherche de priorité css). Les définitions ont été reclassées en fonction de leur type :
– color (couleur de la police)
– background (couleur du fond)
– border (couleur et paramètres des bordures).

/***********************************
/* SYNTHESE DES LIGNES A COULEURS DE LA DIST */
/***********************************/
/*Color*/
body{color: #333;}
.cartouche .titre {color: #000; }
.texte {color: #000;}
.reponse_formulaire { color: #e86519; }
.forum-chapo .forum-titre, .forum-chapo .forum-titre a {color: #333; }
.forum-texte { color: #333;}
a { color: #333; }
a.spip_note {} /* liens vers notes de bas de page */
a.spip_in { color: #900; } /* liens internes */
a.spip_out { color: #009; } /* liens sortants */
a.spip_url { color: #009; } /* liens url sortants */
a.spip_glossaire { color: #060; } /* liens vers encyclopedie */
.on { color: #000; } /* liens exposes */

/*Background*/
body {background: #FFF;}
.rubriques { background: #EAFFEA;}
.rubriques .menu-titre { background: #F2FFF2; }
.breves { background: #FFEAEA; }
.breves .menu-titre { background: #FFF2F2; }
.syndic { background: #E8F8F8; }
.syndic .menu-titre { background: #F0FCFC; }
.forums { background: #EAEAFF; }
.forums .menu-titre { background: #F2F2FF; }
.divers { background: #F8F8E8; }
.divers .menu-titre { background: #FCFCF0; }
.spip_surligne { background: #FF6; }
.lien {background: #EEE;}
table.spip tr.row_first {background: #FFC; }
table.spip tr.row_odd {background: #DDD; }
table.spip tr.row_even { background: #EEE; }
table.spip_barre a img {background: #FDA;}
table.spip_barre a:hover img { background: #FFF;}
table.spip_barre input.barre { background: #EEE; }
.page_plan #contenu h2 {background: #EEE;}
ul .forum-chapo { background: #C4E0E0; }
ul ul .forum-chapo { background: #D4E8E8; }
ul ul ul .forum-chapo { background: #E4F0F0; }
ul ul ul ul .forum-chapo { background: #F4F8F8; }
ul ul ul ul ul .forum-chapo { background: #FFF; }
#signatures td.signature-date {	background: #E4F0F0;}
#signatures td.signature-nom {	background: #ECF4F4;}
#signatures td.signature-message {	background: #F4F8F8;}


/*Border*/
.spip_modele {border: 1px dotted #666; }
#entete {border-bottom: 2px solid #333;}
#pied {	border-top: 1px dotted #CCC;}
.rubriques, .breves, .syndic, .forums, .divers {border: 1px solid #CCC;}
.menu-titre {border-bottom: 1px dotted #CCC;}
.lien {border: 1px solid #CCC;}
.ps, .notes {	border-top: 2px solid #CCC; }
table.spip_barre a img {border: 1px outset #999; }
table.spip_barre a:hover img { border: 1px solid #999; }
#documents_portfolio { border-top: 2px solid #CCC; }
#documents_joints { border-top: 2px solid #CCC; }
.liste-articles li .texte {border: 1px solid #CCC;}
.page_plan #contenu h2 {border: 1px solid #CCC;}
fieldset.reponse_formulaire { border-color: #e86519; }
.forum-repondre, .forum-decompte { border-top: 2px solid #CCC;}
ul .forum-message { border: 1px solid #666; }
ul ul .forum-message { border: 1px solid #A4A4A4; }
ul ul ul .forum-message { border: 1px solid #B8B8B8; }
ul ul ul ul .forum-message { border: 1px solid #CCC; }
ul ul ul ul ul .forum-message { border: 1px solid #E0E0E0; }
ul ul ul ul ul ul .forum-message { border: 1px dotted #E0E0E0; }
ul .forum-chapo { border-bottom: 1px dotted #B8B8B8; }
ul ul ul ul .forum-chapo { border-bottom: 1px dotted #E0E0E0; }

Ces lignes ont pu être obtenues facilement grace à grep.

Conclusion

Voici, je pense, l’essentiel de ce qui est nécessaire pour modifier les couleurs de la distribution par défaut (DIST) de SPIP. On s’en est volontairement tenu ici à la coloration, sans jamais toucher à la composition (sauf bien sûr si on élargit à l’excès les bordures, ce qui est à éviter vues les différences d’interprétations des navigateurs) .

A terme il n’est pas très propre de multiplier les redéfinitions css, donc une fois votre charte bien définies, n’hésitez pas à aller intégrer vos déclarations dans le flot normal des fichiers css.

[1] Cascading Style Sheet

[2] Système de Publication pour l’Internet Version 1.9

[3] Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont contenus tous les fichier : /dist/ sans doute pour squelettes de DISTribution

Messages