Introduction
La version 3 de Sarka-SPIP permet aujourd’hui d’utiliser des thèmes pour simplifier la personnalisation. Il est en outre aisé de créer des thèmes en utilisant la puissance de l’interface de configuration du squelette, sans écrire une ligne de code - ou presque - et en se consacrant uniquement au design.
Il est cependant recommandé de connaître a minima les propriétés CSS relatives aux images d’arrière plan dont vous trouverez un résumé dans l’article Config Sarka/styles - case propriétés des arrières-plan sur le site de Shizuka.
Préliminaires
Même si vous êtes impatient de commencer, nous vous recommandons de suivre les étapes suivantes :
- Lire l’article Un thème Sarka-SPIP : c’est quoi ? pour comprendre la structure d’un thème.
- Réfléchir au style que vous souhaitez donner à votre site en fonction de vos goûts, du sujet et du public visé ? Très graphique, dépouillé, fantaisiste ou plus formel ... ?
- Définir votre jeu de couleurs : pastel, chaudes, froides, contrastées, sombres ... ?
- Définir votre layout, fluide ou fixe ?
- Etablir un petit croquis sur papier libre et/ou faire une maquette sur un logiciel comme Gimp, Fireworks, Photoshop...
Il est utile parfois de s’inspirer de sites dont vous appréciez le graphisme (en respectant bien sûr les droits d’auteurs et les licences d’utilisation). Il existe aussi des sites qui propose des thèmes libres tels :
Il faudra bien entendu les adapter au squelette mais il est aisé de réutiliser la même palette de couleurs voire les images de fond. Concernant les couleurs une liste d’outils en ligne est disponible sur le site de Shizuka dans la rubrique Palette graphique
Installation du kit de démarrage
Le but de ce kit est d’installer une ossature de base, répertoires et fichiers, constituant un thème vide mais fonctionnel, au sens de Zen Garden, et prêt à être personnalisé. Ce kit est à installer dans le dossier themes/.
Pour ce faire, copier l’archive jointe sarkaspip_nomdutheme.zip dans le répertoire themes/ et la dézipper. Le résultat obtenu est le suivant :
Ensuite, renommer le dossier sarkaspip_nomdutheme/ en remplaçant « nomdutheme » par le nom de votre choix mais en laissant le préfixe « sarkaspip » pour bien identifier ces thèmes de ceux de ZPIP, par exemple.
Activation du thème de démarrage
Pour admirer les futures personnalisations graphiques du thème à développer, il est nécessaire d’activer le thème correspondant au kit de démarrage dans l’interface privée de Zen Garden.
A ce stade, tout est prêt pour commencer à développer le thème en visualisant à chaque étape les modifications effectuées.
Description du thème
La première chose est d’améliorer la description du thème visible dans l’interface de Zen Garden. Le nom, le descriptif, l’auteur, la licence sont autant de champs qu’il faut remplir de façon précise pour informer au mieux les futurs utilisateurs.
Pour ce faire, éditer le fichier plugin.xml en prenant garde de respecter la syntaxe XML et l’écriture des caractères accentués et spéciaux avec des entités HTML. L’image ci-dessous illustre le fichier plugin.xml tel que fourni dans le kit.
Il est important, par contre, de ne pas toucher aux balises définissant le préfixe, la catégorie et l’utilisation limitée au squelette Sarka-SPIP et dans une moindre mesure au nom de la vignette sauf si vous souhaitez utiliser un autre format. Pour les autres champs, vous pouvez rectifier à tout moment les informations saisies si celles-ci se révèlent erronées ou incomplètes.
Définition des éléments graphiques du thème
La configuration du squelette
La première étape dans la construction graphique du thème consiste à utiliser l’outil de configuration du squelette. En effet, la base d’un thème Sarka-SPIP est constituée par le paramétrage des pages de configuration :
- « Layout », « Bandeau » et « Pied de page », qui définissent l’agencement des zones du squelette ainsi que les blocs visibles dans chacune de ces zones
- « Styles », qui définit couleurs, décorations et images de fond
- « Coins arrondis », qui permet d’arrondir certains blocs sans utiliser les CSS. Néanmoins, il est recommandé de ne pas utiliser cette fonction sachant que la méthode choisie pose des problèmes sur certains navigateurs.
Seuls les éléments structurant ont un intérêt à être défini, comme le layout, l’affichage du bloc bandeau haut ou bandeau bas, l’affichage du pied de page...
Par contre, fixer le titre du site, l’affichage du menu des pages spéciales dans le bandeau, les informations du pied de page n’a aucun intérêt car les utilisateurs doivent avoir le choix de ces paramètres : il est donc conseillé de laisser les valeurs par défaut pour ces paramètres.
Ensuite, le plus gros du travail consiste à configurer les couleurs, les décorations et autres images de fond via la page de configuration « Styles ». Pour être prises en compte, les images de fond doivent être placées dans themes/nom_du_theme/images/.
Attention, n’oubliez pas de sauvegarder régulièrement vos modifications des pages de configuration - via la page de « Maintenance » - pour éviter de recommencer votre travail en cas de manipulation erronée.
Le jeu d’icônes
La deuxième étape consiste à adapter l’iconographie du squelette au thème : favicon, puces, boutons... Sarka-SPIP propose en standard un jeu d’icônes décliné dans 11 couleurs différentes : mais rien ne vous interdit d’en créer d’autres, voire de les proposer pour enrichir la collection actuelle.
Bien entendu, ces icônes doivent être déposés dans le dossier themes/nom_du_theme/images/.
Transfert de la configuration dans le thème
Sauvegarde de la configuration
Une fois que le configuration du thème est figée, il est nécessaire de l’importer dans le dossier du thème en cours de construction. En effet, à chaque fois que l’on enregistre une page de configuration, les valeurs sont stockées en base de données. Pour un thème, la configuration est stockée dans des fichiers.
Pour ce faire, il faut tout d’abord se rendre dans la page « Maintenance » et faire une sauvegarde complète ou du moins des pages de configuration « Layout », « Bandeau », « Pied de page », « Styles » et « Coins arrondis ». Vous obtenez des fichiers texte qui contiennent toutes vos valeurs de configuration, stockés dans des dossiers tmp/cfg/sarkaspip_nomdepage/ et nommés sarkaspip_nomdepage_date_heure.txt.
Copie et renommage
Ensuite, il suffit de copier la dernière sauvegarde des cinq fichiers cités ci-dessus dans le dossier idoine du thème, à a savoir, themes/sarkaspip_nomdutheme/cfg/ en renommant les fichiers de façon à supprimer la date et heure comme illustrés dans l’image ci-après.
Définition du copyleft
Pour conclure la création du thème, il ne reste plus qu’à choisir la licence du thème et les éventuels crédits que vous souhaitez afficher dans le pied de page. Le kit de démarrage inclus le fichier noisettes/pied/inc_pied_habillage.html avec un affichage par défaut. Pour apposer votre signature d’artiste et la mention souhaitée éditez et modifiez ce fichier en respectant la syntaxe HTML.
Publication du thème
Si vous souhaitez partager votre thème et en faire profiter toute la communauté vous pouvez, soit le déposer sur la Zone avec l’outil SVN, soit envoyer votre zip complet à l’un des membres de l’équipe afin que nous le fassions pour vous. Le thème sera alors intégré à la liste des thèmes Sarka-SPIP publiée sur ce site et sur SPIP-Contrib.
