Personnaliser la dist de Spip : la préparation

mercredi 22 octobre 2014, par ID

Une bonne préparation nécessite de vérifier que l’on a bien les outils nécessaires pour travailler et de préparer le terrain. En l’occurrence, l’idée, ici, consiste à créer des dossiers biens spécifiques qui accueilleront notre futur squelette.

 Les outils

Comme va devoir un peu mettre le clavier dans le code, il nous faut un éditeur de texte. Personnellement j’utilise Notepad++ et les captures d’écran seront faites à partir de cette application. On peut cela dit en utiliser d’autres, ou encore ajouter à SPIP le plugin SkelEditor qui permet d’éditer le squelette directement à partir de l’interface privée du CMS. Question d’habitude. Si vous optez pour cette dernière solution, les modifications seront à faire dans le menu Squelettes/Editer le squelette.

Éditer le squelette
On peut changer le code directement sans avoir besoin de ftp.

Pour compléter, il faut aussi un outil qui nous permette d’avoir les références hexadécimales des couleurs. Personnellement j’utilise La boîte à couleurs, qui, malheureusement, n’existe que pour Windows. Mais on peut aussi bien utiliser un utilitaire de dessin ou l’extension de Firefox Colorzilla. Cela permettra de visualiser les couleurs originales de la dist et les vôtres.

Le cas échéant, ce que je vous conseille, munissez-vous aussi d’une charte de couleurs avec les codes hexadécimaux, commençant par un dièse donc, par exemple : #543210 (qui donne une nuance maronnasse soit dit en passant). On gagne du temps et cette réflexion préalable a l’avantage aussi de pouvoir vous servir au fil de l’eau par la suite si vous envisagez de dessiner vous-même certains éléments du site, les icônes par exemple. C’est aussi très utile dans le cadre d’un site professionnel puisque, de cette façon, il pourra être aux couleurs des documents de la charte graphique de l’entreprise. Et même une micro-entreprise a intérêt à avoir sa propre charte graphique, question d’image et d’efficacité.

En ce qui me concerne, j’ai ma liste de couleurs sur un fichier traitement de texte avec les références hexadécimales, les valeurs RVB (rouge-vert-bleu). Les caractères sont aux couleurs ainsi définies.

Ma charte de couleurs
Les couleurs et leurs références.

 Création de squelettes

Les éléments que vous allez modifier doivent figurer dans un dossier impérativement appelé « squelettes » que vous mettez à la racine de votre site. En fait au même niveau que le répertoire squelettes-dist.

La structure du squelette
Les éléments des dossiers.

Le contenu de ce dossier doit avoir la même structure que celui de la dist : il faut impérativement donner les mêmes noms aux dossiers, sous-dossiers et fichiers. Il faut, tout aussi impérativement que les éléments soient rangés au même endroit.

Et comme on va commencer par les feuilles de style qui s’occupent spécifiquement de la mise en forme du site, on va a minima glisser une copie (en gardant le même nom) des fichiers suivants :

  • styles.css
  • typographie.css
  • layout.css

Et puisqu’on va être amené à modifier un peu le contenu des pages, on copie aussi les fichiers à la racine du dossier squelette [1] :

  • article.html
  • sommaire.html
  • rubrique.html
  • contact.html
  • recherche.html

Parce que l’on va aussi modifier l’entête (header) et le pied de page (footer) on crée un dossier appelé « inclure » et on y copie, toujours en gardant le même nom, les fichiers :

  • header.html
  • footer.html

Il faut aussi créer un dossier « polices » et un dossier appelé « images ». Le répertoire « lang » ne nous servira pas pour l’instant, pas plus que les répertoires (modèles, icônes, etc.) que je n’ai pas signalés. Néanmoins, sachez que « lang » est utile si vous désirez avoir un site multilingue pour ajouter vos propres fichiers de langue.

De cette façon, on récupère les éléments dont on a besoin et on laisse les autres en place bien à l’abri sans risquer de les massacrer. Lors des mises à jour de SPIP, on ne perd pas son travail.

 Tous les chapitres de ce tutoriel

  1. Présentation de la série de tutoriels
  2. Personnaliser la dist de Spip : la préparation
  3. Personnaliser la dist de SPIP : les caractères
  4. Personnaliser la dist de SPIP : la décoration
  5. Personnaliser la dist de SPIP : les éléments
  6. Personnaliser la dist de SPIP : plugins, remerciements et clap de fin

[1Pas dans un sous-dossier donc.