SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 251 visiteurs en ce moment

Accueil > Squelettes > Squelettes par défaut > Variations sur la dist 1.9 > Colorier des squelettes par défaut (DIST) avec les CSS

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

12 septembre 2007 – par Julien Falconnet – commentaires

5 votes

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

  1. /*******************
  2. /* >> COLORIER << */
  3. /******************/
  4. /* > pour toutes les pages */
  5. body{background:#FFFFFF; /*le fond de page*/
  6. color:#000000;} /*la couleur par défaut (essentiellement pour des broutilles*/
  7. .texte { color: #000000; } /* L'essentiel des contenus */
  8. a { color: #000000; }/*Attention ce sont la plupart des titres*/
  9. a.on{ color: #000000; }/* Pour les liens menant vers la page courante */
  10. .cartouche .titre {color: #000000; }
  11.  
  12.  
  13. /* > Pour les petits cadres de liens (noisettes ou assimilés) */
  14. /* Pour chaque, le fond général puis le fond du titre du cadre (.menu-titre) */
  15. .rubriques { background: #EAFFEA;}
  16. .rubriques .menu-titre { background: #F2FFF2; }
  17. .breves { background: #EAFFEA; }
  18. .breves .menu-titre { background: #F2FFF2; }
  19. .syndic { background: #E8F8F8; }
  20. .syndic .menu-titre { background: #F0FCFC; }
  21. .forums { background: #EAFFEA; } /*sert notamment pour le cadre "auteurs"*/
  22. .forums .menu-titre { background: #F2FFF2; }
  23. .divers { background: #E8F8F8; }
  24. .divers .menu-titre { background: #F0FCFC; }
  25.  
  26.  
  27. /* > Détails de pages particulières */
  28. .page_plan #contenu h2 {background: #EEEEEE;} /*Affichage des rubriques de niveau 1*/
  29. .forum-texte{background: transparent;} /* le textes des commentaires*/
  30. ul .forum-chapo {background: #C4E0E0; } /* les titres des commentaire en fonction de leur profondeur */
  31. ul ul .forum-chapo { background: #D4E8E8; }
  32. ul ul ul .forum-chapo { background: #E4F0F0; }
  33. ul ul ul ul .forum-chapo { background: #F4F8F8;}
  34. ul ul ul ul ul .forum-chapo { background: #FFF; }

Télécharger

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

  1. body{background:#;}
  2. body , a , .forum-chapo .forum-titre a { color: #; }
  3. a.on{ color: #; }
  4. .cartouche .titre {color: #; }
  5. .texte , .forum-texte { color: #; }
  6. .rubriques , .breves , .forums , .syndic , .divers , .forum-texte { background: #;}
  7. .forum .forum-chapo , .page_plan #contenu h2 , .rubriques .menu-titre , .breves .menu-titre , .forums .menu-titre , .syndic .menu-titre , .divers .menu-titre { background: #; }

Télécharger

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

  1. body{background:#EEF; color:#A00;}
  2. .texte { color: #800; }
  3. a , .forum-titre a { color: #606; }
  4. a.on{ color: #A00; }
  5. .cartouche .titre {color: #800; }
  6. .rubriques , .breves , .forums , .syndic , .divers { background: #DDD;}
  7. .rubriques .menu-titre , .breves .menu-titre , .forums .menu-titre , .syndic .menu-titre , .divers .menu-titre { background: #CCC; }
  8. .page_plan #contenu h2 {background: #CCC;}
  9. .forum-texte{background: #DDD;color:#333;}
  10. .forum .forum-chapo {background: #CCC; }

Télécharger

Pour obtenir des couleurs foncées

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

Télécharger

Pour obtenir des couleurs roses

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

Télécharger

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

  1. /***********************************
  2. /* SYNTHESE DES LIGNES A COULEURS DE LA DIST */
  3. /***********************************/
  4. /*Color*/
  5. body{color: #333;}
  6. .cartouche .titre {color: #000; }
  7. .texte {color: #000;}
  8. .reponse_formulaire { color: #e86519; }
  9. .forum-chapo .forum-titre , .forum-chapo .forum-titre a {color: #333; }
  10. .forum-texte { color: #333;}
  11. a { color: #333; }
  12. a.spip_note {} /* liens vers notes de bas de page */
  13. a.spip_in { color: #900; } /* liens internes */
  14. a.spip_out { color: #009; } /* liens sortants */
  15. a.spip_url { color: #009; } /* liens url sortants */
  16. a.spip_glossaire { color: #060; } /* liens vers encyclopedie */
  17. .on { color: #000; } /* liens exposes */
  18.  
  19. /*Background*/
  20. body {background: #FFF;}
  21. .rubriques { background: #EAFFEA;}
  22. .rubriques .menu-titre { background: #F2FFF2; }
  23. .breves { background: #FFEAEA; }
  24. .breves .menu-titre { background: #FFF2F2; }
  25. .syndic { background: #E8F8F8; }
  26. .syndic .menu-titre { background: #F0FCFC; }
  27. .forums { background: #EAEAFF; }
  28. .forums .menu-titre { background: #F2F2FF; }
  29. .divers { background: #F8F8E8; }
  30. .divers .menu-titre { background: #FCFCF0; }
  31. .spip_surligne { background: #FF6; }
  32. .lien {background: #EEE;}
  33.  
  34.  
  35. table.spip tr.row_first {background: #FFC; }
  36. table.spip tr.row_odd {background: #DDD; }
  37. table.spip tr.row_even { background: #EEE; }
  38. table.spip_barre a img {background: #FDA;}
  39. table.spip_barre a:hover img { background: #FFF;}
  40. table.spip_barre input.barre { background: #EEE; }
  41. .page_plan #contenu h2 {background: #EEE;}
  42.  
  43.  
  44. ul .forum-chapo { background: #C4E0E0; }
  45. ul ul .forum-chapo { background: #D4E8E8; }
  46. ul ul ul .forum-chapo { background: #E4F0F0; }
  47. ul ul ul ul .forum-chapo { background: #F4F8F8; }
  48. ul ul ul ul ul .forum-chapo { background: #FFF; }
  49. #signatures td.signature-date { background: #E4F0F0;}
  50. #signatures td.signature-nom { background: #ECF4F4;}
  51. #signatures td.signature-message { background: #F4F8F8;}
  52.  
  53. /*Border*/
  54. .spip_modele {border: 1px dotted #666; }
  55. #entete {border-bottom: 2px solid #333;}
  56. #pied { border-top: 1px dotted #CCC;}
  57. .rubriques , .breves , .syndic , .forums , .divers {border: 1px solid #CCC;}
  58. .menu-titre {border-bottom: 1px dotted #CCC;}
  59. .lien {border: 1px solid #CCC;}
  60. .ps , .notes { border-top: 2px solid #CCC; }
  61.  
  62.  
  63. table.spip_barre a img {border: 1px outset #999; }
  64. table.spip_barre a:hover img { border: 1px solid #999; }
  65. #documents_portfolio { border-top: 2px solid #CCC; }
  66. #documents_joints { border-top: 2px solid #CCC; }
  67. .liste-articles li .texte {border: 1px solid #CCC;}
  68. .page_plan #contenu h2 {border: 1px solid #CCC;}
  69. fieldset.reponse_formulaire { border-color: #e86519; }
  70.  
  71.  
  72. .forum-repondre , .forum-decompte { border-top: 2px solid #CCC;}
  73. ul .forum-message { border: 1px solid #666; }
  74. ul ul .forum-message { border: 1px solid #A4A4A4; }
  75. ul ul ul .forum-message { border: 1px solid #B8B8B8; }
  76. ul ul ul ul .forum-message { border: 1px solid #CCC; }
  77. ul ul ul ul ul .forum-message { border: 1px solid #E0E0E0; }
  78. ul ul ul ul ul ul .forum-message { border: 1px dotted #E0E0E0; }
  79. ul .forum-chapo { border-bottom: 1px dotted #B8B8B8; }
  80. ul ul ul ul .forum-chapo { border-bottom: 1px dotted #E0E0E0; }

Télécharger

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

Voir en ligne : Le texte original

Notes

[1Cascading Style Sheet

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

[3Squelettes 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

Dernière modification de cette page le 12 septembre 2007

Retour en haut de la page

Vos commentaires

  • Le 18 septembre 2007 à 19:06, par Christophe Couloumy En réponse à : Colorier des squelettes par défaut (DIST) avec les CSS

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

    • Le 18 septembre 2007 à 20:53, par Julien Falconnet En réponse à : Colorier des squelettes par défaut (DIST) avec les CSS

      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

      bodybackground :#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 ;

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

    • Le 4 novembre 2007 à 21:47, par lexter En réponse à : Colorier des squelettes par défaut (DIST) avec les CSS

      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

  • Le 15 septembre 2007 à 00:38, par André Vincent En réponse à : Colorier des squelettes par défaut (DIST) avec les CSS

    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 :

    • copier dans /squelettes/ le fichier inc-head.html
    • insérer après :
      [(#REM) Feuille de style CSS pour l'affichage du site a l'ecran ]
      [<link rel="stylesheet" href="(#CHEMIN{habillage.css}|direction_css)" type="text/css" media="projection, screen, tv" />]

      la ligne suivante :

      [(#REM) Feuille de style CSS pour l'affichage du site a l'ecran ]
      [<link rel="stylesheet" href="(#CHEMIN{perso.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
    • inscrire dans /squelettes/perso.css UNIQUEMENT les surcharges désirées et dans notre cas, uniquement les surcharges de couleurs.

    Ainsi, on y trouverait un TRIPLE avantage :

    1. compatibilité ascendante et descendante avec les diverses versions de SPIP 1.9,
    2. facilité d’édition et de mise à jour ; perso.css ne contenant QUE les surcharges
    3. facilité de mise en plugin d’une multitude de palette de couleurs.

    É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/ .

    • Le 15 septembre 2007 à 16:05, par Julien Falconnet En réponse à : Préalable méthodologique.

      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

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Adaptive Images

    15 novembre 2013 – 65 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

Ça spipe par là