ViaSPIP 3

Ce qui change principalement par rapport à la branche 2.1 du squelette ViaSPIP

-  la disposition sur deux colonnes au lieu de trois.
-  une adaptation automatique de l’affichage sur une seule colonne pour petits écrans (« web design responsive ») pour conserver un confort de lecture sur smartphone. Le squelette de la dist officielle de SPIP 3 le fait en standard, et ViaSPIP 3 suit donc cette importante orientation avec quelques adaptations.
-  l’affichage d’un menu horizontal des secteurs (rubriques principales à la racine du site) comme le squelette de la dist officielle.
-  l’affichage d’un sous-menu de navigation en colonne secondaire comme le squelette de la dist officielle.
-  l’affichage des derniers commentaires en colonne secondaire sur la page d’accueil.
-  l’ajout d’un menu fixe d’outils en haut d’écran.
-  des paginations de type « page précédente » - « page suivante ».
-  l’affichage du slogan du site sous le titre du site (nouveauté pour SPIP 3).
-  l’affichage à droite en priorité du logo téléchargé pour le site (par défaut, affichage du logo du squelette).
-  la suppression de l’usage du fichier « pie.htc » pour coins arrondis et ombrages, pour les anciens navigateurs mauvais élèves (Internet Explorer 8, 7, 6).
-  l’affichage des logos d’articles, rubriques et brèves sous forme carrée (80px X 80px) pour uniformisation, avec recadrage si nécessaire.
-  des thèmes entièrement revus et davantage personnalisables.
-  la présentation des réponses aux messages de forums qui se fait sur un seul niveau, comme le squelette de la dist officielle.

Ce qui ne change pas

-  un squelette sous forme de plugin pour faciliter sa mise en place.
-  un squelette fluide qui adapte sa largeur à la résolution du navigateur (avec un minimum fixé pour une résolution de 1024px de large).
-  un bandeau image d’entête.
-  une page contact utilisant l’adresse email du webmestre.
-  une page plan de site simplifiée.
-  un mini-sommaire pour les pages d’articles ayant des intertitres.
-  des flèches de « scrolling » rapide (nouveauté de la version 2.1.23).
-  des plugins additionnels de thèmes (actualisés pour ViaSPIP 3).
-  le tri des rubriques et articles par n° en priorité (ensuite par date inverse). Il est à noter que pour cela, les rubriques et articles doivent avoir un titre sous la forme 1. Titre (attention : n°, point, espace -> ne rien oublier, le point et l’espace ont toute leur importance). Sur le site public, les numéros n’apparaissent pas, mais ces numéros « cachés » servent pour les tris. Le gros avantage de cette façon de procéder est de pouvoir maîtriser l’ordre des rubriques et articles sur le site public.

Comment créer un thème personnalisé ?

Pour personnaliser, afin d’assurer un maximum de compatibilité en cas de mise à jour du plugin principal, il est fortement recommandé de se créer un thème personnalisé.

Le squelette ViaSPIP 3 est conçu pour rester le plus standard possible, afin de minimiser les impacts lors de mises à jour de SPIP. Il utilise le principe de la surcharge, il est lui-même basé sur le squelette de la dist officielle. Il surcharge les fichiers utiles (article.html, rubrique.html, etc...), et uniquement ceux-ci. Pour les autres, par défaut, ce sont ceux de la dist officielle qui sont pris en compte (répertoire « squelettes-dist ») pour l’affichage des pages sur le site public.

Le plugin principal de ViaSPIP 3 doit toujours être activé, dans tous les cas.

En activant en supplément un plugin de thème, on continue avec ce principe de la surcharge. Pour ces plugins de thème, en principe, on se contente de jouer sur les styles avec le fichier « css/perso.css » pour personnaliser l’apparence du site (couleurs, polices, disposition des blocs, etc...). Mais on pourrait très bien imaginer d’y déposer des fichiers de squelette personnalisés qui viendraient surcharger ceux du plugin ViaSPIP 3 de base.
Ainsi, il est fortement recommandé de ne rien modifier au squelette de base et de reporter ses personnalisations dans le répertoire d’un plugin de thème. Si on veut par exemple modifier le fichier « sommaire.html », il est préférable de recopier celui du plugin principal dans le répertoire de son plugin de thème personnalisé, et de personnaliser ce dernier. Ainsi, si le plugin de base change de version, on pourra conserver son plugin de thème personnalisé sans le modifier, sauf exception pour petites adaptations nécessaires.
Lors de telles manipulations sur les fichiers de squelette (fichiers HTML), ne pas hésiter à lancer un recalcul de page, voire vider le cache de SPIP, pour bien s’assurer que SPIP prenne en compte les modifications de squelette.

Pour créer un thème personnalisé :

-  Recopier un répertoire de thème (le standard ou un autre) et le renommer, par ex. « viaspip_3.x.xx_theme_mon_site » (attention : pas d’espaces et de préférence, pas de caractères accentués ou spéciaux). Il faut noter que le thème « standard » a les mêmes styles que le plugin principal, il fait apparaître plus nettement les différents blocs que les autres thèmes et il peut servir de base pour la conception d’un nouveau thème, mais on peut en préférer un autre parmi ceux proposés avec le squelette ViaSPIP 3.

-  Dans ce nouveau répertoire, ouvrir le fichier paquet.xml avec un éditeur de texte brut et modifier les valeurs suivantes :

• obligatoirement l’attribut « prefix » (ligne 2) -> par exemple viaspip3_theme_mon_site (attention : pas d’espaces, pas de caractères accentués ou spéciaux)
• obligatoirement le contenu de la balise <nom> (ligne 11) -> par exemple Thème « Mon site » pour ViaSPIP 3 (attention aux caractères accentués pour cette balise, par exemple : &egrave; pour è, et &eacute; pour é).
• éventuellement le contenu de la balise <auteur> (ligne 12)

-  Dans le répertoire « css/img » du plugin de thème personnalisé, remplacer si on le souhaite l’image du bandeau (fichier banner.jpg) en respectant la taille originale (1200px X 120px). Le squelette ViaSPIP 3 de base est fluide, c’est à dire qu’il adapte sa largeur d’affichage à la résolution de l’écran de l’internaute. Sa largeur peut donc varier, avec une valeur minimum de 1003px (pour un écran ayant une résolution de 1024px, en tenant compte de la largeur de l’ascenseur sur le bord droit du navigateur). De ce fait, il est souhaitable de créer une image de bandeau ayant du contenu sur la gauche et qui « s’évanouit » sur la droite, pour réserver de la place libre à droite pour l’affichage du logo. On peut faire cela avec un logiciel simple de traitement d’image.

-  Concernant le logo par défaut, inutile de remplacer celui du plugin. Le squelette ViaSPIP 3 utilise en priorité le logo du site qu’il suffit de télécharger (option configuration, identité du site dans l’administration). Si aucun logo n’a été téléchargé pour le site, c’est celui du plugin de thème qui est utilisé par défaut.

-  Si on souhaite personnaliser les styles pour le nouveau thème, tout va se jouer ensuite dans le fichier perso.css présent dans le répertoire « css » du plugin. L’ouvrir avec un éditeur de texte pour effectuer des modifications. On peut jouer sur les éléments suivants :

• la largeur maxi de page « utile » : dans la partie « Blocs principaux », on a en standard la ligne :
  .page, #menu-principal { max-width: 1325px; }
  C’est cette valeur de 1325px que l’on va pouvoir modifier, entre 1003px pour une largeur fixe (la largeur mini utilisée par le squelette étant elle aussi de 1003px), et 1920px pour un écran de type HD (non recommandé : un maximum de 1600px semble préférable pour ne pas trop altérer le confort de lecture des pages : les yeux ont du mal à faire un large balayage).
• la largeur des deux colonnes de contenu, la principale et la secondaire (menus annexes) : dans la partie « Blocs principaux », section « Blocs de contenu », on a les classes « wrapper » et « aside » avec des valeurs en pourcentages pour l’attribut « width ». Par défaut, c’est 70% pour « wrapper » (principal) et 29% pour « aside » (secondaire). On peut modifier ces valeurs en respectant un total de 99% (1% étant réservé pour laisser un espace libre entre les deux colonnes).
• l’emplacement de la colonne secondaire par rapport à la principale : dans la même partie pour les deux classes « wrapper » et « aside », on a l’attribut « float » avec comme valeurs « right » ou « left ». Par défaut, en standard, la colonne principale est à gauche et la colonne secondaire est à droite. On peut inverser ces valeurs pour faire le contraire.
• les polices : dans le haut du fichier, on a des lignes en commentaires pour les « web safe fonts » qui sont les polices reconnues par tous les navigateurs sur tous les systèmes, donc recommandées. Si on souhaite modifier la police principale du thème, il suffit donc de « dé-commenter » l’une des lignes (enlever /* en début et */ en fin de ligne). On peut aussi utiliser des polices open source de « Google fonts », qui peuvent alourdir un peu le chargement des pages, mais qui ont un intérêt esthétique indéniable. Mon conseil est d’utiliser une police standard pour l’ensemble, et de réserver l’usage d’une police plus « exotique » pour les titres, menus et le pied de page). Voir des exemples dans les thèmes proposés qui en utilisent. On peut aussi se rendre sur le site « Google fonts » pour en choisir d’autres. Attention, elles ne sont pas toujours confortables pour la lecture de textes longs, il faut faire des essais...
• les couleurs : le reste des styles du fichier perso.css concerne les couleurs exprimées sous forme de codes. C’est là qu’on retrouve notre petit logiciel de traitement d’image pour nous aider à déterminer les codes des couleurs que l’on souhaite. C’est dans cette phase que l’on peut passer un peu plus de temps à créer une belle harmonie de couleurs pour le site... selon ses goûts...

Démo des thèmes :

Sur le site JYG Web, qui sert également de démo pour le squelette ViaSPIP 3, il existe un sélecteur de thèmes qui permet de changer de thème à la volée parmi ceux proposés en standard avec ViaSPIP 3. N’hésitez pas à utiliser en haut d’écran, dans la barre d’outils, la liste déroulante « Thèmes » pour sélectionner celui de votre choix.

A vous de jouer !

Voir l’article sur le squelette ViaSPIP 3 sur le site de l’auteur.

Versions :

3.0.11a du 19/10/2013 : 1^re release de ViaSPIP 3