Personnaliser la « dist » de SPIP : un tutoriel en série

mercredi 22 octobre 2014, par ID

Avant aprèsLe squelette de SPIP par défaut, ou « dist » pour distribution, a pas mal d’atouts. Il est plutôt fonctionnel pour un site pas trop complexe, voire pour un site de type blog. Il est presque, mais pas tout à fait, complètement adaptatif, il est, évidemment [1], multilingue et enfin il est parfait respectueux de la typographie. Ceux qui sont agacés de voir des ponctuations solitaires en début de ligne ou des coupures de mots idiotes [2] apprécieront.

Le problème c’est qu’il a un aspect pas tout à fait, pas vraiment, enfin bref dans l’ensemble, esthétiquement disons qu’on peut faire mieux et, de toute façon, c’est bien aussi d’avoir sa patte personnelle.

L’autre problème c’est qu’il n’est pas parfaitement adaptatif et le module de recherche disparaît des petits écrans de téléphone [3].

Bref, il faut personnaliser ce squelette. Finalement c’est assez facile quand on sait ce que l’on veut.

L’idée est de passer de cela :

JPEG - 35 ko
L’aspect en version dist 3
Un site SPIP brut de fonderie !

À ceci, c’est-à-dire une version personnalisée avec un bandeau et un menu tout en bas et tout en haut :

JPEG - 58.6 ko
Après personnalisation
Ici le site numericoach.net.

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

[1Évidemment car c’est « l’ADN » de SPIP.

[2Oui, sur ce blog en version Wordpress, ça m’agace aussi !

[3C’est le seul bémol responsive que j’ai trouvé en fait.