Les couleurs d’un SPIP 3.x

Selon Squelettes de la "dist", quelques éléments seulement nécessitent des colorations....

La plupart de ces informations sont définies dans les feuilles de styles utilisées :
- habillage.css dans les versions précédentes
- css/theme.css depuis les versions SPIP 3.1

Avec la reprise de la charte graphique de SPIP (voir Histoires de LOGO), vous trouverez encore intéret à personnaliser l’habillage graphique de votre site en css !

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Cet article va essentiellement vous proposer une lecture commentée de la dernière feuille ./css/theme.css pour que vous puissiez plus facilement mettre votre SPIP à vos couleurs : voici l’apparence de départ.

Voyons les lignes définissant ces colorations

 Les liens

Contrairement aux origines du Web, les liens cliquables ne sont plus systématiquement soulignés theme[23] text-decoration:none  ; mais leurs colorations sont désormais en rose, qu’il aient été visité theme[21] color: #db1762; ou non theme[25] background-color:#c41558; color:#fff; . Ces mêmes colorations sont reprises dans les sous-menus de navigation latérale...
Dans le cas des liens principaux, marqués en "header", les interlignes sont agrandies theme[18] line-height: 1.2 ; de même les tailles de polices sont agrandies mais cela provient de ./css/typo.css !
Au contraire, dans les rappels d’arborescence (le fil d’ariane theme[32] .arbo ) , on rapporte une taille réduitetheme[32] font-size: .9em, et surtout une couleur uniformément grise theme[32]color: #666, avec le soulignement pour des navigations hiérarchiques ; en cas de sélection theme[37] background: #666; color: white , c’est mis en blanc sur fond gris !

 Textes et titres

En-dehors des enrichissements colorés pour les liens décrits ci-dessus, le texte est assez uniformément gris foncé sur blanc theme[15] color:#222222;background:#ffffff ; le fond vient souvent dans un blanc cassé
Mais surtout le choix de polices est fixétheme[15]  font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif : cette succession générale propose donc une police sans sérif (sans empattements) quasiment toujours disponible et lisible...

Enfin les tailles des titres sont aussi agrandies en correspondance avec les niveaux hiérarchiques de plans, toujours à partir de ./css/typo.css...

 Autres styles à personnaliser

Juste une remarque pour vous expliciter les boutons en bords ronds, qui pourraient vous plaire ; c’est directement géré dans le layout d’origine ./css/layout.css

  1. .nav li a {
  2.     display: inline-block;
  3.     padding: 0.25em 0.5em;
  4.     margin: 0 0.25em 0.5em 0;
  5.     border-radius: 0.25em;
  6.     text-decoration: none;
  7.     background: #f0f0f0;
  8.     color: #db1762;
  9. }

Télécharger

Quant à la personnalisation du bouton-formulaire de recherche, vous la retrouverez dans ./css/theme.css [103] :

  1. .formulaire_recherche input.text {
  2.     width: 83%;
  3.     height: 32px;
  4.     padding-left: 20px;
  5.     vertical-align: middle;
  6.     border: solid 1px #aaa;
  7.     background: #fff url(img/recherche.png) no-repeat left center;
  8.     -webkit-border-radius: 0.25em 0 0 0.25em;
  9.     border-radius: 0.25em 0 0 0.25em;
  10. }

Télécharger

Extrait plus complet SPIP 3.1 dist

 Commencer à modifier

En plus des instructions communes pour MODIFIER la dist / SPIP 3, vous prendrez garde à suivre précisément et tester chaque modification à vos fichiers :
- ./squelettes/css/theme.css que vous aurez recopié par SkelEditor,
- ./squelettes/css/perso.css que vous aurez créé...

A vos surcharges de CSS.


 La même chose pour SPIP 3.2.x

Pour un autre site, je viens d’avoir à remplacer ces roses flashy de la nouvelle interface, pour coller à l’orange du logo du site client.
Alors, j’ai commencé par récupérer toutes les définitions decolor (ou de background-color ) exprimées dans les squelettes-dist/css/*.css : j’en ai créé la feuille personnalisée de style capable de les écraser, que je vous fournis ci-dessous : vous n’aurez plus qu’à la remodifier à votre sauce, et la recharger sur votre site !

  1. /*    /squelettes/CSS/perso.css               */
  2. /* ------------------------------------------ */
  3. /* Habillage des COULEURS de SPIP 3.1
  4. /* ------------------------------------------ */
  5. a, a:visited { color: #ff5700;  }                         /*   themes.css[22]  #db1762   */
  6. a:focus, a:hover,  a:active { background-color:#ffa300; } /*   themes.css[26]  #c41558   */
  7. .arbo a:visited { color: #666; }                          /*   themes.css[36]  #666   */
  8. .arbo a:focus { background: #666; color: white; }         /*   themes.css[38]  #666   */
  9.  
  10.  
  11.  
  12.  
  13. /* LAYOUT.css    Entete et barre de navigation */
  14. ------------------------------------------ */
  15. .header .spip_logo_site a:hover  {color:#ff5700;}         /*   layout.css[30]  #db1762   */
  16. .nav li a { color: #ff5700; }                             /*   layout.css[39]  #db1762   */
  17. .nav li.on a { background:#ffa300; }                      /*   layout.css[40]  #c41558   */
  18.  
  19.  
  20.  
  21. /* FORM.css [38..48]   base formulaires */                /* FORM.css [38..48]    */
  22. .error,
  23. .alert      { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
  24. .notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
  25. .success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
  26. .info     { background: #d5edf8; color: #205791; border-color: #92cae4; }
  27.  
  28. .error a,
  29. .alert a      { color: #8a1f11; }
  30. .notice a   { color: #514721; }
  31. .success a    { color: #264409; }
  32. .info a     { color: #205791; }
  33.  
  34. /* SPIP.css   Styles associes au code genere par SPIP */
  35. /* Reponses */

Télécharger


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


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 20 août 2018, et actualisé en novembre 2018 .

Répondre à cet article