Des thèmes prêts à l’emploi
Grâce à sa structure, SPIPr est utilisable directement avec une galerie de thèmes interchangeables.
L’écriture de nouveaux thèmes pour SPIPr se fonde sur les conventions de BootStrap, enrichies de LayoutGala et du système de résumés et listes d’objets.
Les thèmes qui respectent ces conventions pourront être utilisés indifféremment avec les différents squelettes SPIPr.
Menu de navigation principale
SPIPr permet de gérer votre navigation principale directement dans l’espace privé à l’aide du plugin Menus. Il suffit de créer un menu avec l’identifiant barrenav
pour qu’il soit automatiquement inséré à la place de la navigation principale, sans modifications de fichiers.
Compositions
SPIPr est naturellement conçu pour fonctionner avec le plugin Compositions qui permet d’utiliser plusieurs types de composition par objet, et de décliner les cœurs de page en fonction des besoins.
Ecrire un thème
Les squelettes SPIPr reposent sur plusieurs conventions de balisage :
- toutes les conventions de balisage HTML de BootStrap (voir notamment http://twitter.github.com/bootstrap/base-css.html et http://twitter.github.com/bootstrap/components.html)
- la convention de balisage des formulaires de SPIP
- la convention de balisage pour le contenu des pages
- la convention de balisage des Résumés et listes d’objet
Ces conventions ainsi que la possibilité de fixer le Layout de la page indépendamment du squelette permettent l’écriture de thèmes unifiés utilisables par tous les squelettes de la famille SPIPr
Organisation des fichiers
Le thème est constitué d’un répertoire, contenant un fichier plugin.xml et un dossier css/ pour les feuilles de style.
Les feuilles de style
Le thème peut inclure dans son dossier css/ n’importe quelle feuille de style du plugin BootStrap personalisée.
Dans la plupart des cas, le thème se limitera à proposer l’une ou l’autre de ces feuilles :
-
css/variables.less
qui permet de personnaliser toutes les couleurs et polices de caractère -
css/boot-theme.less
qui permet d’ajouter des styles à ceux de BootStrap pour le personaliser (cette feuille est compilée avec celles de BootStrap et peut donc utiliser les mixins de BootStrap) -
css/theme.less
pour ajouter des styles indépendamment de BootStrap (cette feuille est plus indiquée pour l’ajout de styles avec des images de décoration) -
css/layouts.less
pour définir le positionnement des blocs dans la page en fonction des tailles d’écran
Le thème peut aussi proposer une feuille css/font.less
ou css/print.css
dédiée au chargement des directives font-face
Le thème peut éventuellement proposer une feuille css/print.less
ou css/print.css
pour les variantes de style à l’impression, mais il est préférable de les intégrer directement dans les autres feuilles avec une directive @media print { }
.
Ajouter des composant au <head>
Si le thème nécessite l’ajout de composants dynamiques dans le head , il peut fournir au choix :
-
inc-theme-head.html
qui sera inclus à la suite detheme.less
, et reçoit les variables d’environnement (bien indiqué pour une CSS dynamique) -
inc-insert-head-css.html
qui sera ajoutée à la fin de la balise#INSERT_HEAD_CSS
, mais ne reçoit pas les variables d’environnement. Cette inclusion est plutôt indiquée pour ajouter des feuilles de style de base -
inc-insert-head.html
qui sera ajoutée à la fin de la balise#INSERT_HEAD
, mais ne reçoit pas les variables d’environnement. Cette inclusion est plutôt indiquée pour les scripts qui utilisent jQuery ou pour ajouter un composant javascript de BootStrap
Les images de décoration
Toutes les images de décoration référencées par les feuilles de style du thème seront rangées dans le sous dossier css/img/ du thème.
Logo
Le thème doit contenir une image, au premier niveau, utilisée pour représenter le thème dans l’interface de sélection. Elle sera de préférence dans un format 200px x 150px, ou plus grand et proportionnel.
Layout
Le thème doit fournir un layout, ou structure HTML de la page. Il comprend toute la structure du HTML du <body>...</body>
.
Ce layout doit inclure les 6 blocs fonctionnels génériques au moyen des lignes suivantes :
-
<INCLURE{fond=header/#ENV{type-page},env} />
pour le bloc fonctionnel qui constitue l’en-tête visuelle du site ; -
<INCLURE{fond=inclure/nav,env} />
pour la navigation principale du site, qui ne dépend pas du type de page ; -
<INCLURE{fond=content/#ENV{type-page},env} />
pour le bloc principal de contenu ; -
<INCLURE{fond=aside/#ENV{type-page},env} />
pour le bloc de contenu secondaire en relation avec le contenu principal ; -
<INCLURE{fond=extra/#ENV{type-page},env} />
pour le bloc d’informations complémentaires de la page ; -
<INCLURE{fond=footer/#ENV{type-page},env} />
pour le pied de la page.
Ce layout peut inclure un 7e bloc qu’il fournira lui même, nommé inc-theme-copyleft.html sous la forme <INCLURE{fond=inc-theme-copyleft,env} />
. Ce bloc permet d’afficher les éventuelles informations de droits d’auteur et de crédits, y compris éventuellement un lien vers le site de l’auteur. Ce bloc ne doit pas être utilisé pour embarquer d’autres informations.
Ce layout sera renseigné dans le fichier body.html.
Ce fichier ne doit contenir que des éléments de structure de la page, et ne doit intégrer aucun contenu, sauf à entrainer une incompatibilité avec des squelettes.
plugin.xml
Le thème doit inclure un fichier de description plugin.xml. Ce fichier de description permet de renseigner les informations visibles dans le sélecteur de thème de l’espace privé.
Il permet aussi d’installer directement le thème dans le dossier plugins/ et de l’activer depuis le gestionnaire de plugins dans le cas où le webmestre ne veut pas mettre de galerie de thèmes à disposition des administrateurs.
Le fichier plugin.xml doit comporter au minimum les informations ci-dessous :
Par convention, la balise <prefix>
commencera toujours la valeur theme_.
Variantes de thèmes
Lorsqu’un thème visuel comporte plusieurs variantes possibles, il est vivement conseillé de créer un thème indépendant pour chaque variante importante.
L’utilisation de panneau de configuration pour personnaliser les thèmes est tout à fait déconseillée car peu compréhensible par les débutants. L’expérience de l’utilisateur doit être privilégiée par rapport à la facilité pour le développeur.
Pratiquement, il est conseillé de faire un dossier thème portant le nom de la famille de thème, qui comportera un sous dossier pour chaque thème activable. Chacun de ces thèmes sera indépendant et comportera son fichier de déclaration plugin.xml
.
Les variantes mineures pourront faire l’objet d’un fichier texte dans le thème qui explique quoi changer pour personaliser un peu le thème.
Un thème n’est pas un squelette
Il est important de comprendre avant toute chose qu’un thème doit se limiter à la décoration visuelle, à l’habillage graphique.
Un thème ne peut pas et ne doit pas se mêler de quel type d’information est affiché, de comment les informations sont sélectionnées etc ... Autrement dit :
- un thème ne doit pas surcharger des éléments du squelette autre que ceux explicitement définis dans cette documentation.
- un thème ne doit pas fournir de contenu autre que celui spécifié ci-dessous.
Écrire un thème qui ne suivrait pas cette règle le limiterait à fonctionner avec un squelette donné, ou dans un cas donné, alors que le but est ici de proposer une méthode qui permette d’écrire des thèmes interchangeables avec plusieurs squelettes.
Un thème n’est pas un plugin
L’utilisation de scripts php dans un thème est fortement déconseillée. Pour des raisons de sécurité, et pour permettre le téléchargement et l’installation automatisée, un thème ne doit pas contenir de scripts PHP, ni de code PHP inline dans l’un des squelettes fournis par le thème.
Pour les mêmes raisons, les mécanismes génériques des plugins éventuellement spécifiés dans plugin.xml
(tels que l’utilisation des pipelines) resteront inactifs lorsque un thème sera sélectionné par le gestionnaire de thèmes.
Un thème pas à pas
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.
Discussions par date d’activité
7 discussions
Bonjour,
j’avais déjà posté dans ce forum mais je reviens avec de nouvelles interrogations pour écrire un thème.
Cette documentation actuelle pour écrire un thème concernant l’organisation des fichiers et les feuilles de style n’est plus à jour, car SPIPr nécessite désormais Bootstrap4, et on trouve principalement les feuilles de style suivantes :
_variables.scss
,_bootswatch.scss
ettheme.scss
. J’ai l’impression que theme.scss permet d’ ajouter des styles indépendamment de BootStrap mais aussi d’ajouter des styles à ceux de BootStrap pour le personnaliser, donc un regroupement deboot-theme.less
ettheme.less
dans la version précédente. Est-ce exact ?J’ai une question complémentaire sur le plugin Bootstrap 4 (ce n’est peut-être pas le bon forum, mais la documentation sur ce plugin renvoie à SPIPr !). Impossible d’activer certains composants bootstrap qui nécessitent JS (par exemple Tooltips ou popovers). Meme en suivant les recommendations de la documentation officielle pour appeler correctement les fichiers javascript (ceux du plugin) dans le head (à savoir « jQuery first, then Popper.js, then Bootstrap JS »), ces composants bootstrap ne sont pas activés (pas de tooltip ou de popover par exemple). Est-ce que les JS du plugin ( comme
bootstrap-popover.js
oubootstrap-tooltip.js
) sont à jour ?Mit spiplichen Grüßen,
Répondre à ce message
Hallo, bonjour !
Une simple question sur la mise à jour.
Les thèmes SPIPr prêts à l’emploi ( dénomination spipr_v2_XXX avec XXX= slate, sketch, simplex etc…) disponibles pour spip 3.2 sur plugins.spip.net et placés dans le dossier squelettes/themes/ ne font pas apparaitre le menu Thèmes dans l’onglet Squelettes de l’espace privé sous SPIP 3.2.7 [24473].
Est-ce un problème de mise à jour des thèmes, de SPIPr-v2, de Z-core, de spip ? Puis-je y remédier ?
Ma configuration :
Z-core 2.8.7+SPIPr-dist 2.2.6+SCSS PHP 2.2.3+Bootstrap 4 4.4.1.1
Mit spiplichen Grüßen aus Deutschland,
Pour info : avec BS4, pour tous les thèmes prêt à l’emploi, le fichier css/theme.scss bug.
J’ai débugé ma situation... Autant en faire profiter la communauté !
Avec ces modifs, ça baigne !
Bien spipement,
Bonjour,
Je suis dans une situation similaire à la tienne.
Avec le point 1, j’ai le menu permettant de passer d’un thème à l’autre.
Pour le point 2 pourrais-tu expliciter ce que tu as fait ?
> il est indispensable de mettre à jour le fichiers css/theme.scss.
comment procédes-tu ?
J’ai pris la dernière version des thèmes su github. Est-ce qu’il y autre chose à faire ?
> neutraliser la fonction make-navbar-button-float()
Je l’ai commenté sur le fichier themes scss. Est-ce qu’il faut faire autre chose ?
Pour info j’obtiens cette erreur
SCSS : Echec compilation fichier bootstrap.scss
Incompatible units px and vw. : plugins/auto/bootstrap4/v4.4.1.7/bootstrap/css/_grid.scss on line 33, at column 9 Call Stack : #0 mixin media-breakpoint-up plugins/auto/bootstrap4/v4.4.1.7/bootstrap/css/_grid.scss on line 35 #1 import plugins/auto/bootstrap4/v4.4.1.7/bootstrap/css/_grid.scss plugins/auto/bootstrap4/v4.4.1.7/bootstrap2spip/css/_grid.scss on line 1 #2 import plugins/auto/bootstrap4/v4.4.1.7/bootstrap2spip/css/_grid.scss plugins/auto/bootstrap4/v4.4.1.7/bootstrap/css/bootstrap.scss on line 16
Pour
Hello, peux-tu indiquer quels plugins tu utilise pour reproduire cette erreur ?
Chez moi tout est à jour et je n’ai pas l’erreur :(
Merci pour cette réponse rapide !
J’ai fait une mise à jour d’un vieux site SPIP 2 sans copier plugin ou squelettes. Je suis donc parti avec la version de base de SPIP.
J’ai installé puis désinstallé SarkaSPIP v4
J’ai ensuite installé SPIPr Dist
avec la thème de défaut de SPIPr Dist je ne rencontre pas de problèmes
>quelle version de SPIPr-dist ?
2.2.6
> quel thème ?
beige, cerluean, flatly
téléchargés aujourd’hui sur githun
>quelle version du plugin BootStrap 4 ?
4.4.1.7
> quelle version du plugin ScssPHP ?
2.7.0
>quelle version du plugin z-core ?
2.8.7
Oulala, ça date un peu... C’est un projet que j’ai un peu laissé en plan. Selon mes souvenirs, dans chaque répertoire spipr_v2 se trouve un dossier css, dans lequel se trouve un fichier theme.scss. Ce fichier appelle les options de Grid de Bootstrap 3, par les variables xs, sm, md. Exemple :
Ces options ne sont plus valables avec BS4. Il faut juste réécrire ces variables comme suit : xs->sm, sm->md, md->lg. Il faut aussi regarder les nouvelles options de Grid BS4 pour voir si ces corrections sont toujours justes.
Parfois, ce meme fichier fait appel à des fonctions comme :
Ce sont des fonctions qui n’existent plus sous BS4 : elles doivent être neutralisées/effacées.
Bon courage.
J’ai trouvé, le bug était dans les thèmes, et comme je les ai tous adapté en même temps j’ai reproduis le même bug (et le compilateur ScssPHP ne détectait pas le bug à l’époque).
Je viens de corriger et envoyer la modif sur tous les thèmes concerné, désolé pour l’erreur
Maintenant les thèmes sont adaptés à BS4 ?
Oui la plupart des thèmes ont été portés pour BS4
https://git.spip.net/spip-contrib-themes
avec quelques nouveaux thèmes comme
* https://git.spip.net/spip-contrib-themes/spipr_v2_balloons
* https://git.spip.net/spip-contrib-themes/spipr_v2_patisson
Merci-Thank-you-Vielen-Dank-谢-谢 !
J’ai téléchargé les versions mises à jour des thèmes sur GITHUB le la semaine dernière et je en rencontre plus aucun problème. Un grand merci à Cerdic !!!
Répondre à ce message
Bonjour
SPIPr ne semble pas fonctionner correctement sur SPIP 3.2 :
BUG présent sur deux serveurs séparés, avec un minimum d’autres plugins activés. J’ai essayé plusieurs versions de Zcore (une ancienne, et la toute dernière).
Pour la version de SPIPr, je ne suis pas sur la dernière version. Je suis obligé de rester en 0.4.16. Car la dernière version oblige à passer en BOOTSTRAP 4 que je ne peux pas utiliser avec mes autres plugins persos.
Est-ce un bug connu ? MERCI pour votre aide.
- SPIP 3.2.8
- Z-core 2.8.7
- SPIPR 0.4.16
- BOOTSTRAP 3.0.10
Bonjour,
SPIPr 0.4.16 fonctionne sur des sites en SPIP 3.2.8 pour moi avec 1 différence de version :
J’ai Bootstrap 2.1.10 - stable
Sinon j’ai la même chose que toi
dans les fichiers du plugin il n’y a pas
breadcrumb/sommaire
ni
aside/sommaire
Donc tu as des squelettes perso qui utilisent ces 2 fichiers ?
dd
Non, justement, je n’ai pas de squelette qui utilise explicitement breadcrumb/sommaire.
Dans ce cas, c’est breadcrumb/dist.html qui doit être pris par défaut. Il est bien présent, mais il n’est pas pris par défaut.
Répondre à ce message
Bonjour,
Je ne sais pas si c’est le bon endroit pour poster ici ou sous zengarden.
Je suis intéressé par les thèmes pour la version v2 de spipr. Ils sont disponibles ici : https://git.spip.net/spip-contrib-themes?tab=&sort=recentupdate&q=spipr_v2_
Pour l’instant, cela me semble fastidieux de les télécharger un à un avec un git clone ou checkout puis de les transférer par FTP dans le répertoire thèmes.
Il y a aussi l’inconvénient que Zen Garden ne mentionne pas les mises à jour des thèmes.
Comment puis-je faire pour importer tous les thèmes spipr_v2_* dans mon site et être averti quand il y a des mises à jour ? y a t’il moyen d’ajouter un dépôt ?
D’avance merci pour votre réponse
Répondre à ce message
Bonjour,
Le « tuto » de création de thème « Un thème pas à pas » est-il toujours entièrement valable en Spip 3.1 ?
Si oui, j’ai dû louper une étable car en suivant toutes les étapes jusqu’à la fin du paragraphe « Prévisualiser », je n’ai rien qui s’affiche dans le menu Squelettes > Thèmes de l’espace privé.
d’où une première questions :
- dans le plugin.xml, à la ligne
, le numéro de version est-il obligatoire et si oui, où le trouve-ton ?
Merci d’avance,
Hervé
Bonjour,
normalement
devrait suffire
Répondre à ce message
Bonjour,
Désolé pour la question de béotien, mais je viens de passer 2h sur l’interrogation métaphysique suivante : comment utiliser le thème Readable et obtenir que la barre de menus / navigation, à partir d’une certaine taille d’écran, "collapse" bien et soit remplacée par le petit bouton à 3 barres horizontales, de façon à ne pas encombrer l’écran.
Après avoir farfouillé un peu partout et notamment dans les CSS, j’en suis arrivé à la conclusion que tous les thèmes SPIPr qui "collapsaient" bien partageaient le fait de ne pas disposer d’un body.html, alors que pour Readable (également marguerite, cerulean, beige et amelia), qui disposent d’un "body.html", on se coltinait la barre de menus même sur un affichage mobile...
Si je fais disparaître le body.html, ô miracle je parviens bien à utiliser Readable avec la barre de menus / navigation remplacée par le bouton / menu déroulant et c’est la fête. Surtout que je ne parviens pas à détecter le moindre bug (ou différence d’affichage) (avec ou sans body.html), même après avoir écrabouillé tous les caches SPIP et navigateur.
Mais du coup, j’ai une deuxième interrogation méthaphysique (jamais content, le gars !) : est-ce que le fait de ne pas fournir un layout (j’ai noté plus haut : « doit ») est ... mal ? Dois-je m’attendre à des représailles à moyen terme ? :-)
Merci
Christophe
Bonjour,
En fait en y regardant, le squelette body du theme dont tu parle n’est pas a jour par rapport a ce qui est inclus dans le body de spip-r, c’est donc bien de la que vient ton problème et c’est aussi pour ça que généralement on dit de faire attention aux surcharges ;-) Donc tu as fait ce qu’il y avait a faire ;-)
quand on as un doute avec les skelettes Z le premier reflexe pour ma part est de faire un &var_mode=inclure et savoir ce qui est réellement inclus lors de la compilation du template.
Et pour rassurer donc : vu que tu as supprimé le fichier body.html du thème, c’est celui de spip-r qui est chargé, et si il ne l’était pas ce serait celui de zcore ... donc tu as de la marge, il y’a bien un layout ! Mais ça permet d’entrevoir la problématique de la surcharge (ce pourquoi on aime spip bien souvent) : zcore fourni un template, qui est surchargé par spip-r, que ton thème viens surcharger ensuite, et si tu personnalise en copiant dans ton dossier squelette tu surcharge le thème ... bref 4 surcharges pour 1 fichier body.html, et au final si un correctif est proposé depuis les autres on en bénéficie pas vu que l’on a surchargé...
Merci pour ces explications :-)
Répondre à ce message
Bonjour,
J’essaie de comprendre le mécanisme de SPIPr et des thèmes.
Il est indiqué sur cette page que l’arborescnee des thèmes est :
squelettes/
themes/
or d’après mes essais (j’ai installé SPIPr-dist et z-core) il faut que les thèmes soient dans plugins/auto/spiprx/themes/montheme/
pour que le site s’affiche avec le thème choisi.
Les thèmes spipr qui sont ici : http://zone.spip.org/trac/spip-zone/browser/_themes_/spipr/v1
sont-ils compatibles / maintenus ?
Si oui ce serait peut-être plus pratique de les avoir en zip par exemple ici http://contrib.spip.net/Themes
car les thèmes sur spip-contrib sont un peu vieillissants.
Ou bien alors il y a plusieurs types de thèmes ???
dd
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |