Tutoriels et logiciels libres
Personnaliser la dist de SPIP : la décorationLa modification des feuilles de style a été traitée dans l’article : Un blog à mes couleurs, on refait les murs, je ne le reprendrai pas dans cet article qui sera plus orienté sur les aspects plus spécifiques de la dist.
Les feuilles de styles à modifier
Pour tout dire, de la couleur et des pictogrammes, on en retrouve dans toutes les feuilles de style du squelette. Mais il n’est pas forcément nécessaire de changer toutes les couleurs, cela dépend de la charte graphique du site et aussi de son contenu, d’où l’importance d’avoir une idée assez précise de la gamme de couleurs à utiliser. Cela facilite le travail.
À noter, la couleur mentionnée dans le fichier clear.css :
à la ligne 10 est un très léger grisé qui ne nécessite pas forcément d’être changé [1].
Les couleurs et le fond de page
Pour des questions de lisibilité, et d’accessibilité, et pas uniquement pour les personnes atteintes de troubles visuels, il est conseillé très fortement de privilégier un rapport de contraste important entre le texte et le fond (ou tout ce qui se met par-dessous). Vous ne savez pas qui va lire votre article, sur quoi et dans quelles conditions de luminosité !
Le fond de page : se paramètre dans le fichier layout.css, sur la ligne 9 au niveau de body il y a une mention d’image, c’est elle qui donne l’aspect du fond. Il faut supprimer la mention si vous voulez un fond blanc par exemple on peut laisser la mention #FFF ou indiquer une autre couleur en code hexadécimal.
Ensuite, dans ce cas précis je suggère de commencer par modifier les couleurs du texte dans le fichier typo.css. Pas plus de deux, outre les liens, généralement une pour la titraille, les textes en h1, h2 , h2, etc. ou seulement pour les titres des articles et une pour le reste du texte, ou tout le texte de la même couleur.
Il est à noter que le titre de chaque article est un paragraphe h1.
Les liens doivent être facilement repérables, si vous ajoutez une couleur de survol (a : active) il faut penser au contraste également. Les liens se personnalisent dans la feuille style.css, au niveau de la ligne 160 pour a : active.
Si on veut remplacer rapidement une couleur par une autre on peut faire un rechercher-remplacer.
Et enfin les autres couleurs, dans la série de petites astuces, si on part du principe que les rapports des nuances de couleurs tiennent la route et sont bien calibrés, pour avoir une nuance de même niveau dans une couleur différente, on peut :
(1) copier le code hexadécimal donné dans un outil comme Colorzilla (dans la Palette de couleurs), (2) faire remonter le curseur à droite du gros pavé de couleur pour arriver à celle désirée et copier ensuite le code hexadécimal obtenu, après avoir, le cas échéant, ajusté légèrement en (3) déplaçant le rond qui indique la nuance. Ces modifications se font dans les fichiers style. css, form.css et layout.css.
Si vous voulez ajouter un filet de séparation entre le contenu et le menu à droite, à la ligne 16 du fichier layout.css, il faut ajouter une bordure à droite pour obtenir une ligne comme celle-ci :
où :
- border-right indique où se situe le filet, ici à droite et son épaisseur, ici un pixel
- padding-right paramètre la marge intérieure, c’est-à-dire la position des éléments par rapport à la bordure, donc ici 6 pixels à droite de la bordure
- border-color est la couleur de la bordure en code hexadécimal, ici un bleu nuit très foncé.
Arrivé à cette étape on ne devrait plus avoir ceci :
mais quelque chose comme cela :
Les icônes
Si on veut aussi personnaliser les différentes icônes, la solution la plus simple consiste tout bonnement à générer des fichiers au même nom et à la même taille que ceux prévus et les ranger au même endroit de votre dossier squelettes. Par exemple la petite loupe du cartouche de recherche doit impérativement être dans le dossier img du dossier css de votre répertoire squelettes et pas ailleurs. Il en va de même si vous vouliez avoir une image de fond par exemple.
Concernant les autres éléments, il est plus simple de créer un dossier appelé images (le nom n’est pas impératif) dans lequel vous les rangerez soit à la racine du dossier soit dans des sous-dossiers aux noms parlants.
Vous rangerez un éventuel bandeau à cet endroit. De cette façon on sépare réellement la forme, éléments rangés dans squelettes, du fond, le dossier IMG de SPIP dans lequel sont réunis tous les médias téléversés sur le serveur.
Comment on fait pour avoir des icônes comme on veut ? Soit on se les dessine, je suggère le logiciel de dessin vectoriel Inkscape pour ce faire, soit on va en chercher sur le net en faisant attention au respect du droit d’auteur.
Pour aller plus loin
Quelques sites où trouver des icônes susceptibles d’être libres de droit.
- Les icônes sur Wikimedia commons : les catégories sont en anglais.
- Openclipart : ce ne sont pas particulièrement des images au format icône, mais, comme il s’agit de fichiers vectoriels au format svg, vous pouvez les retravailler sans problème avec Inkscape ou tout autre logiciel de dessin vectoriel et ensuite les exporter comme bitmap au format png. Site en anglais.
- Iconfinder : moteur de recherche spécialisé dans les icônes. Soit dit en passant, vous pouvez l’ajouter à votre liste d’outils de recherche dans Firefox, en anglais également.
Il faudra toutefois vérifier si vous avez le droit de les utiliser et surtout dans quelles conditions, lorsque le site est commercial cela peut être un frein.