Créer le répertoire
Pour commencer un nouveau thème, créer d’abord un sous-dossier themes/ dans le dossier squelettes/.
Dans ce dossier squelettes/themes/ créer un dossier mon-theme/ avec l’arborescence ci-dessous :
squelettes/
themes/
mon-theme/
plugin.xml
css/
img/
plugin.xml
Dans le dossier mon-theme/ ajouter le fichier plugin.xml contenant :
Créer aussi un fichier vignette.jpg qui peut être une image blanche pour le moment, mais qui est nécessaire.
Layout
Créer le fichier qui body.html qui pose le layout. Ici on choisit d’utiliser LayoutGala :
Pour la présentation, on va utiliser 3 layouts différents :
- en grand ecran le Layout Gala 9 en 3 colonnes ;
- en écran intermédiaire, le Layout Gala 33 en 2 colonnes, mais en faisant varier la grille autour de 979px ;
- en moins de 768px, le Layout Gala 27 avec contenu en pleine largeur et 2 colonnes en dessous ;
- en dessous de 450px, les 2 colonnes passent l’une en dessous de l’autre
C’est un layout complet et robuste et complet qui constitue un bon point de départ personalisable.
Créer le fichier css/layouts.less pour y définir ce mode de fonctionnement :
Prévisualiser
A ce stade, il est déjà possible de prévisualiser le thème. Pour cela aller dans le menu Squelettes > Thèmes de l’espace privé. Le thème « Mon premier thème » doit apparaitre dans la galerie des thèmes disponibles. Cliquez sur « Apercevoir » pour prévisualiser le thème.
Vous pouvez naviguer dans le site public en conservant l’affichage en mode aperçu avec ce thème. Seul vous le voyez, vos visiteurs continuent à voir le site avec le thème actif.
Dès que vous retournez dans l’espace privé le mode aperçu et désactivé et vous pouvez revoir le site avec son thème actif.
A tout moment de vos modifications vous pouvez passer en mode aperçu pour voir l’apparence de votre thème. Si vous avez modifié une feuille de BootStrap il faut probablement forcer la recompilation de la feuille CSS de BootStrap, ce que vous pouvez faire en ajoutant &var_mode=recalcul
dans l’url de la page.
Couleurs et Polices de caractères
Pour donner une touche personnelle au thème, il suffit de copier le fichier bootstrap2spip/css/variables.less du plugin BootStrap (ou téléchargez le fichier variables.less depuis SPIP-Zone).
Poser le fichier variables.less dans le dossier mon-theme/css/.
Ce fichier contient toutes les variables de définition utilisées dans les feuilles de style de BootStrap.
Y modifier les couleurs, les polices de caractère, les tailles... permet déjà, sans aucune autre modification complexe, de personnaliser l’apparence de votre site de façon unifiée (les modifications seront prises en compte dans tout le site, pour tous les éléments de la page concernés etc...).
Vous pouvez utiliser un des outils en ligne pour modifier ce fichier.
Plus de personnalisation
Dans un second temps, vous pouvez modifier les apparences de BootStrap en ajoutant un fichier css/boot-theme.less dans votre thème. Certains des outils en ligne de personnalisation de BootStrap vous génèrent un fichier tout prêt qu’il suffit de renommer.
Vous pouvez également personnaliser les feuilles complémentaires pour SPIP existantes dans le plugin BootStrap pour SPIP :
- css/spip.css vous permet de modifier les quelques styles spécifiques à SPIP
- css/spip.list.less vous permet de modifier l’apparence des résumés et listes d’objets
- css/spip.comment.less vous permet de modifier l’apparence des forums et commentaires de SPIP
Enfin, indépendamment de BootStrap et des feuilles existantes, vous pouvez ajouter votre feuille de style css/theme.less ou css/theme.css si vous êtes plus à l’aise avec CSS, et y mettre toutes vos personnalisation.