SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 212 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > SPIPr > Thèmes SPIPr

Thèmes SPIPr

23 mars 2015 – par Cerdic – commentaires

6 votes

Documentation source : http://spipr.nursit.com/themes

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 :

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 de theme.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.

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.

Dernière modification de cette page le 23 mars 2015

Retour en haut de la page

Vos commentaires

  • Le 5 mars à 18:21, par Fennec72 En réponse à : Thèmes SPIPr

    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

    1. <utilise id="spipr" version="[;]" />

    , le numéro de version est-il obligatoire et si oui, où le trouve-ton ?

    Merci d’avance,

    Hervé

    • Le 25 octobre à 12:59, par pierrox En réponse à : Thèmes SPIPr

      Bonjour,

      normalement

      1. <utilise id="spipr" />

      devrait suffire

    Répondre à ce message

  • Le 24 décembre 2015 à 11:05, par chantoine En réponse à : Thèmes SPIPr

    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

    • Le 28 décembre 2015 à 09:34, par Mist. GraphX En réponse à : Thèmes SPIPr

      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é...

    • Le 28 décembre 2015 à 10:10, par chantoine En réponse à : Thèmes SPIPr

      Merci pour ces explications :-)

    Répondre à ce message

  • Le 26 mai 2015 à 19:41, par DD En réponse à : Thèmes SPIPr

    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

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Acces Restreint 3.0

    11 décembre 2008 – 784 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Champs Extras 3

    16 janvier 2012 – 538 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 190 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

Ça spipe par là