Objectif
Il s’agit dans cet article de se doter d’une méthode simple et rapide pour redéfinir complètement les couleurs des squelettes « 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 le répertoire « /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 » au premier niveau de votre répertoire 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 :
- Il est minimaliste : les fonds et les couleurs
- On peut compliquer en ajoutant des background et des color. Attention au mauvais goût.
- On peut encore compliquer en jouant sur les bordures (ajout, retrait, personnalisation). Attention à la mise en page avec des bordure larges.
- 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) - 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 ;) ).
Nota : 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 collant à la fin de habillage.css .
Pour obtenir des 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; } Pour obtenir des couleurs foncées
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; }Pour obtenir des 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) .
Discussions par date d’activité
2 discussions
Bonjour,
Tout d’abord félicitations pour le mal que vous vous donnez pour tenter d’expliquer à d’autres ce que vous semblez maîtriser.
Hélas votre article manque peut-être de quelques précisions à destination des grands débutants dont je suis...
Car j’ai beau faire ce que je crois comprendre, c’est à dire copier/coller les morceaux de code que vous donnez à la fin de mon fichier « habillage.css » il ne se passe strictement aucun changement au niveau des couleurs !... Je demande que la page soit recalculée, je vide le cache, mais rien.
Sans-doute n’ai-je pas fait quelque chose qui vous semble évident, mais franchement, SPIP cela me semblait une bonne idée, mais c’est un peu décourageant...
Il y a parfois des bizarreries en informatique. Des trucs qu’on est persuadé d’avoir fait alors que...
Bon, je vais essayer de proposer une check-liste des choses à vérifier :
- vérifier le code copié-coller. Est-ce que le code correspond bien à un des code de couleur que je propose ? les premiers codes proposés corresondent aux couleurs par défaut, donc leur insertion ne changera rien.
Pour etre bien sur je propose qu’on parte tous sur la base de
- Ensuite vérifier (3 fois) que le fichier porte bien le bon nom, sans faute de frappe et qu’il est bien dans squelettes (avec un S) qui lui même se trouve à la racine de spip sur le serveur.
- Ensuite faire recalculer la page et la rafraîchir (on sait jamais).
- Ensuite si ça marche toujours pas, alors c’est que le problème vient d’ailleurs. Il peut avoir plusieurs sources : Le squelette utilisé n’est pas celui par défaut (DIST), un plugin rajoute une feuille de style aprés, la version de SPIP n’est pas 1.9.2., ou encore autre chose.
Si ça marche toujours pas, alors il faut revenir poser des questions mais en précisant tous les paramètres possibles : version de spip, squelette utilisé, plugins installés, voir navigateur et encore mieux : adresse du site pour qu’on aille voir le probleme.
Bonjour
J’ai eu le même problème : pas de changement visible après modification des couleurs.
Après recherches sans succès (nom de fichier, chemin, etc...) j’ai opté pour une solution radicale : supprimer les PREMIERES définitions et ne laisser que mes définitions « perso ».
Et là ça marche...
Pas tout à fait satisfaisant quand même, car si la surcharge n’est pas très académique, ça demeure une méthode valable en principe (au moins pour tester).
En pratique, pas même besoin de supprimer la première définition : suffit de la mettre en commentaire :
remplacer :
/* Des couleurs specifiques selon les types de menus
*/
.rubriques background : #EAFFEA ;
.rubriques .menu-titre background : #F2FFF2 ;
etc, etc...
.divers .menu-titre background : #FCFCF0 ;
par
/* Des couleurs specifiques selon les types de menus
.rubriques background : #EAFFEA ;
.rubriques .menu-titre background : #F2FFF2 ;
etc, ...
.divers .menu-titre background : #FCFCF0 ;
*/
Répondre à ce message
Sur le plan pédagogique, cet article est très réussi.
Mais sur le plan pratique, la prochaine version de SPIP (1.9.3) rendra cet article en bonne patie caduque. C’est dommage.
Je m’explique.
Tout le mécanisme repose sur une la copie intégrale du fichier habillage.css dans le répertoire /squelettes/ et l’ajout à la fin du fichier de nouvelles règles de styles venant surcharger les directives précédentes. Et ça fonctionne très bien en version 1.9.2 de SPIP.
Toutefois, si on fait une mise à jour en 1.9.3 (svn), ce sera la catastrophe. Et je ne l’ai même pas testé pour l’appréhender : la nouvelle structure des squelettes par défaut du répertoire /div/ a changé et les règles de styles d’ habillage.css en conséquence.
Je suggère donc d’ajouter une étape supplémentaire dans cet article qui consiste en ceci :
la ligne suivante :
Ainsi, on y trouverait un TRIPLE avantage :
Évidemment, si le fichier inc-head du répertoire des squelettes par défaut de SPIP incluait un appel à perso.css ou quelque chose déquivalent, ça nous faciliterait grandement la tâche : on n’aurait pas besoin de surcharger inc-head dans nos /squelettes/ .
Bonjour,
Effectivement la méthode de modification de la CSS est discutable, non seulement elle risque de ne pas supporter le passage de version, mais en plus ajouter des blocs de code en fin de fichier css (en sur-sur-sur-définissant certaines entrées) n’est pas très propre.
Mon objectif était avant tout de documenter la DIST en offrant la liste des propriétés à modifier pour la colorier. J’ai voulu la rendre plus vivante en offrant une méthode de test la plus rapide possible (pas de squelette à modifier, pas de fichier à créer), mais peut être devrais-je insister sur son manque de pérénité. Je ne pense pas qu’il faille ajouter une méthode de modification de la DIST dans l’article, car ce n’est pas son objet. Mais si il existe un article présentant les règles de bonnes pratiques pour modifier la DIST, je rajouterai avec plaisir un lien. Pour l’instant je ne me sens pas de l’écrire par manque de recul.
En tous cas merci de toutes ces précisions, même en commentaires elles aideront certainement le lecteur à améliorer sa compréhension.
ps : j’attends encore un peu pour voir si d’autres commentaires enrichiront le débat, puis j’essaierai d’améliorer l’article à ce sujet.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
