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) .
Aucune discussion
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 :
|
