Navigation rapide

Accueil > Informatique > Mes adaptations pour SPIP > Squelette généraliste ViaSPIP 3 gratuit

Squelette généraliste ViaSPIP 3 gratuit

dimanche 3 août 2014

ATTENTION, la version 3.0.11a du plugin ViaSPIP 3 n’est pas compatible avec SPIP 3.1 !

23 février 2016 : La nouvelle version est arrivée !

Si vous utilisez SPIP 3.1, veuillez vous reporter vers ViaSPIP 3.1...

Suite à la sortie de SPIP 3, le squelette ViaSPIP a été entièrement refondu et cette nouvelle branche prend donc le nom de ViaSPIP 3, afin d’éviter les confusions avec l’ancienne génération.

ViaSPIP 3 reste dans la lignée de son prédécesseur ViaSPIP, il est comme lui un squelette généraliste pour SPIP, visant à offrir une alternative au squelette de la distribution officielle. Mais cette version est destinée à des sites sous SPIP 3. Elle n’est pas conçue pour fonctionner sur les versions antérieures de SPIP (1.9.xx, 2.0.xx, 2.1.xx).

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 ("responsive design") 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.

ViaSPIP sur ordinateur
ViaSPIP sur tablette
ViaSPIP sur smartphone

- 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, avec la possibilité d’utiliser par exemple des polices de Google fonts.
- 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 (par exemple "notepad++" qui est un éditeur gratuit avec coloration syntaxique) 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, comme par exemple "paint.net" (ou autre). Celui-ci pourra aussi être utile pour travailler sur les codes couleurs (à voir plus loin avec la personnalisation des couleurs du thème).

- 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 ce site, qui sert également de démo pour le squelette ViaSPIP 3, j’ai intégré une fonctionnalité qui permet d’appliquer à la volée un thème de son choix 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 (par défaut, c’est "jygweb", celui qui est personnalisé pour mon site).

Sélecteur de thèmes ViaSPIP

Téléchargement

Squelette ViaSPIP 3.0.11a

A vous de jouer !

Versions :

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

Le squelette ViaSPIP 3 a été testé avec succès pour les versions récentes des navigateurs modernes suivants : Firefox, Internet Explorer, Chrome, Opera, Safari.
Il fonctionne également avec les anciennes versions d’Internet Explorer 9, 8, 7 et 6 (IE6 non recommandé : le squelette fonctionne en mode dégradé, fixe en 1024px de large).

Messages

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.