Les couleurs d’un SPIP 3.1

  Quelles modifications prévoir

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 code>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 meme 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 héirarchiques 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 a 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.


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


Liens visibles seulement pour les inscrits.

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

Répondre à cet article