Menu
Navigation rapide

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

Squelette généraliste ViaSPIP 3.1 gratuit

mardi 23 février 2016

Si vous utilisez SPIP 3.2, veuillez vous reporter à la version ViaSPIP 3.2...

Avec la sortie de SPIP 3.1, la façon d’écrire les squelettes change quelque peu. Voici donc la toute nouvelle version de ViaSPIP, compatible SPIP 3.1, et nommée ViaSPIP 3.1.

Le squelette ViaSPIP 3.1, sous forme de plugin, reste dans la lignée des précédentes versions. C’est toujours un squelette généraliste pour SPIP, visant à offrir une alternative au squelette de la distribution officielle. Cette version est destinée à des sites sous SPIP 3.1. Elle n’est pas conçue pour fonctionner sur les versions antérieures de SPIP (1.9.xx, 2.0.xx, 2.1.xx et 3.0.xx).

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

En fait, pas grand chose en apparence, afin de permettre aux utilisateurs de l’ancienne version de passer à SPIP 3.1 sans grandes difficultés.

- Le fichier CSS du plugin principal se nomme désormais "theme.css" et non plus "style.css", conformément au nouveau squelette de la dist officielle. Par contre, les fichiers CSS des plugins de thèmes sont toujours nommés "perso.css".
- Adaptations HTML/CSS pour SPIP 3.1
- Intégration gotop/gobottom dans les css et js principaux
- NOUVEAU : ce qui change vraiment, c’est l’ajout du paramétrage du plugin. Désormais, directement depuis l’administration du site, donc de manière beaucoup plus souple, on peut jouer très simplement sur certains paramètres :

  • Affichage des boutons de partage sur les réseaux sociaux (Facebook, Twitter, Google+) -> non par défaut
  • Largeur maxi de la page en pixels -> 1325 par défaut (doit être supérieure à 1003)
  • Position de la colonne secondaire -> à droite par défaut
  • Largeur de la colonne secondaire en pourcentage -> 29 par défaut (doit être comprise entre 20 et 40)
  • Liens externes ouvrant dans un nouvel onglet -> non par défaut

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.1).
- 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.
- une disposition sur deux colonnes.
- une adaptation automatique de l’affichage sur une seule colonne pour petits écrans ("Responsive Design") pour conserver un bon confort de lecture 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).
- 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.

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.1 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.1 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 et polices principalement. 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.1 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.1.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.1.

- 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 viaspip31_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.1 (attention aux caractères accentués pour cette balise, par exemple : &amp;egrave&#59; pour è, et &amp;eacute&#59; 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.1 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.1 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 :

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

Note :
Contrairement à la version précédente, il est inutile avec ViaSPIP 3.1 de modifier les éléments suivants dans le fichier perso.css, puisqu’on peut maintenant les modifier via le paramétrage du plugin ViaSPIP 3.1 :

  • la largeur maxi de page "utile"
  • la largeur des deux colonnes de contenu
  • l’emplacement de la colonne secondaire par rapport à la principale

Démo des thèmes :

Sur ce site, qui sert également de démo pour le squelette ViaSPIP 3.1, 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.1. 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).
La largeur de page, la largeur des colonnes et l’emplacement de la colonne secondaire restent ceux par défaut, d’un thème à l’autre, mais comme indiqué plus haut, on pourra jouer sur ces éléments dans le paramétrage du plugin principal de ViaSPIP 3.1.

Sélecteur de thèmes ViaSPIP

Téléchargement

ViaSPIP 3.1.0a

A vous de jouer !

Versions :

3.1.0a du 23/02/2016 : 1ère release de ViaSPIP 3.1

Le squelette ViaSPIP 3.1 a été testé avec succès pour les versions récentes des navigateurs modernes suivants : Firefox, Internet Explorer, Edge, Chrome, Opera, Safari.
Il fonctionne également avec les anciennes versions d’Internet Explorer 10, 9, 8 (mode dégradé pour IE 8 : non recommandé).

Messages

  • Merci cette version de ce squelette/plugin simple à prendre en main et à adapter et très efficace. J’attendais la version pour spip 3.1 et hop c’est arrivé ... Je l’utilise pour trois associations dont la dernière pour laquelle J’ai adapté le thème végètal pour un festival de l’argile ... http://terredargile.bavent.fr/
    et vive spip !
    JF

  • Bonjour, je me sers de ViaSpip 3.1 pour un site .
    Sur le site d’exemple il y a un article sur la page d’accueil, comment peut on le rédiger.
    En ce qui me concerne j’ai mis une image dans sommaire.html grâce à FileZilla, pour un article plus étoffé cela me parait un peu lourd.
    Merci pour ce squelette responsive, il n’y en a pas beaucoup pour SPIP

    • Bonjour,
      Sur la page d’accueil de mon site, ce n’est pas un article, c’est le "descriptif rapide" du site (section configuration, identité du site) qu’on voit en haut de page. Pour y mettre une image, il faut ruser un peu. On télécharge une image dans un autre article, on note son n° SPIP et on tape la balise à la main dans le descriptif du site, par exemple :
      <imgxxx|center>

      Ce n’est pas idéal, mais ça permet de mettre un contenu fixe pour la page d’accueil (texte de bienvenue, etc...). C’est tout ce que permet ce squelette qui se veut relativement standard par rapport à SPIP.

      Au dessous, c’est la liste des articles récents, comme d’habitude.

      Bonne continuation
      Jean-Yves

    • Merci pour la réponse rapide, mais cela ne résout pas mon problème
      Je précise mon problème :
      comment rédige-t-on l’article de la page sommaire ?
      dans quelle rubrique ?
      y a-t-il une rubrique spéciale pour le sommaire ?

      Cordialement

    • Bonjour,

      En standard dans SPIP, tout comme avec mon squelette, il n’y a pas d’article pour la page sommaire. C’est pourquoi je vous donnais, à défaut, l’astuce du descriptif du site. Mais je sais, ce n’est pas idéal.

      Si vous souhaitez vraiment avoir un article particulier sur la page sommaire, ce n’est pas impossible, mais il vous faudra alors modifier le squelette, en particulier le fichier sommaire.html.
      Par exemple, vous pouvez lier un article à un mot-clé particulier, "accueil" ou autre, et dans le fichier sommaire.html, faire une boucle pour afficher les articles liés à ce mot-clé. Dans les autres boucles (listes des articles récents, etc...), il ne faut pas oublier d’exclure les articles liés à ce mot-clé, pas seulement dans le fichier sommaire.html, mais dans tous les fichiers du squelette qui ont des boucles sur les articles.

      C’est une piste, mais libre à vous d’en chercher d’autres...

      Cordialement
      Jean-Yves

  • Un grand merci.
    Cette fois ci j’ai compris.

  • bonjour,
    comment modifier le destinataire des messages "contact" pour les envoyer sur une autre adresse de mon choix autre que celle du webmestre ?
    merci

    • Bonjour,
      Avec mon squelette, ce n’est pas possible tel quel...
      En standard, sur la page contact (fichier contact.html), le squelette de la dist envoie le message au premier auteur qui a une adresse email, ce qui fait qu’on ne choisit pas vraiment à qui on envoie le message.
      Pour ma part, dans mon squelette ViaSPIP, j’ai fait le choix dans le fichier contact.html de faire l’envoi vers l’adresse du webmestre, ce qui me semblait plus judicieux.
      Pour répondre à votre question, ce n’est donc pas possible sans modifier le squelette. Peut-être en revenant au fonctionnement de la dist et en rusant un peu : réserver le premier auteur du site (le n°1) pour les réceptions d’email (il n’a pas besoin d’être webmestre, c’est juste son adresse email qui nous intéresse), et créer un autre auteur qui lui sera le véritable webmestre du site.
      ATTENTION dans ce cas ! Si vous utilisez spip_loader.php pour faire vos migrations de site, par défaut, seul l’auteur n°1 est autorisé à faire la migration. Comme ici, le véritable webmestre ne serait plus l’auteur n°1, il faut gérer. Il suffit de faire une petite modification dans le fichier spip_loader.php avant de l’utiliser (voir les commentaires explicatifs en début du fichier), mais il faut le savoir...

      Voilà, c’est une piste... Bonne continuation
      Jean-Yves

    • Merci pour votre information et pour votre travail.
      J’ai fait la migration de spip 3.0.20 vers 3.1.4 sur serveur free en suivant la procédure décrite ici http://www.spip.net/fr_article5693.html avec la nouvelle version de viaspip sans problème en mettant bien dans .htaccess php56 1 attention il a l’air d’être impératif d’enregistrer ce fichier en utf-8

  • Bonjour,

    Mrci pour ce squelette que j’utilise depuis qq années pour le Site du COPACAMU http://www.copacamu.org/
    Pourriez-vous me dire si il existe une version pour SPIP 3.2 ?
    J’ai fait une màj et tout est dégradé :-(
    Cordialement

    • Bonjour,
      Désolé mais il n’y a pas de version de mon squelette pour SPIP 3.2 actuellement, et de toute façon, il n’y en aura pas tant que SPIP 3.2 ne sera pas sorti officiellement.
      Bonne continuation
      Jean-Yves

    • Bonjour Jean-Yves,
      De mon côté, ce squelette est compatible 3.2 sans aucune modification.
      Cela fait quelques jours que je l’adapte à mes besoins perso, sans aucun souci. Bien entendu, je n’ai pas testé toutes les fonctions, mais ça vaut le coup de tester.
      Au passage, chapeau pour la qualité de ce squelette.
      Devant la difficulté de faire des évolutions sur un site SPIPr (multiples surcharges de css, squelette Sarkaspip reloaded complexe à la base...), devant l’ampleur de la tâche en partant de la dist, j’ai décidé de partir d’une base saine avec ViaSPIP et un thème, c’est très intéressant et formateur.
      J’ai d’ailleurs relevé un souci au niveau de theme.css pour le responsive, c’est dommage qu’il ne soit pas sur la zone, j’aurais proposé la modification directement. Plus l’indication de la compatibilité 3.2 au passage.
      Je reviendrai avec ma proposition de modif pour theme.css.
      A+ Christophe

    • Bonjour,
      Désolé pour mon manque de réaction par rapport la sortie de SPIP 3.2 et la compatibilité de ViaSPIP, mais je manque de temps en ce moment. Je vais sortir une nouvelle version de ViaSPIP pour SPIP 3.2 très prochainement (décembre), mais en attendant, d’après mes premiers tests, mon plugin semble compatible avec SPIP 3.2. Il suffit de modifier le fichier paquet.xml. D’après moi, il faudrait mettre :

      compatibilite="[3.1.0;3.2.*]"

      Parfois, SPIP ne prend pas bien en compte ces changements dans le fichier paquet.xml dans la gestion des plugins. Pour ma part, j’ai trouvé comme astuce de renommer temporairement le répertoire du plugin, de retourner dans la gestion des plugins pour rafraîchir, puis de renommer à nouveau le répertoire du plugin pour le remettre comme il était à l’origine. Et là, tout rentre dans l’ordre.

      De même, si vous utilisez un plugin de thème, vous devez faire la même modification dans le fichier paquet.xml de celui-ci.

      Encore désolé pour mon manque de réactivité. Encore un peu de patience pour une nouvelle version ViaSPIP...
      Cordialement
      Jean-Yves

  • Voici donc le souci de « responsive ». La largeur est fixée par défaut à une valeur importante. Pas de souci, j’aime aussi quand c’est large quand on a un écran de grande définition. Mais quand on réduit la largeur à une taille intermédiaire (vers 1020 pixels), les blocs ne s’ajustent plus et un ascenseur horizontal apparaît, et ne disparaît que quand on arrive vers des tailles de 640px et moins.

    Voici donc la correction que je propose pour theme.css.
    Au lieu d’avoir, dans les blocs principaux :

    .page width : 90% !important ; width : 1003px ; max-width : 1325px ; min-width : 1003px ; margin : 0 auto 10px auto ; padding : 38px 10px 0px 10px ;
    background : #FFF2C2 ; overflow : hidden ;

    se contenter de la même chose sans les paramètres liés à la largeur :

    .page width : 90% !important ; margin : 0 auto 10px auto ; padding : 38px 10px 0px 10px ; background : #FFF2C2 ; overflow : hidden ;

    et plus loin, définir des précisions dédiées aux grands écrans :

    /* --------------------------------------------
    /* Affichage sur grands ecrans
    /* -------------------------------------------- */
    @media (min-width : 1024px)
    /* Bloc principal de page */
    .page width : 1003px ; max-width : 1325px ; min-width : 1003px ;

    Ainsi, plus d’ascenseur, et le but initial, c’est à dire un affichage large pour les grands écrans, est atteint.
    A+
    Christophe

  • bonjour,
    Assez débutante en SPIP, j’ai installé Via V3.1 sur SPIP 3.1.7
    Sans problème pour le choix des thèmes, la construction du site.
    Mais il y a des points où je bloque :
    - je ne trouve pas comment paramétrer le thème comme annoncer (inclure les réseaux sociaux, ajuster la largeur en lecture sur mobile), ni dans configuration, ni maintenance ?
    - je pensais trouver la boite de changement de thème comme sur jygiraud.free.fr ?
    - j’aimerais enlever les dates de parution (article, brèves .. ?
    merci de votre aide.
    MP

    • Bonjour,
      Pour la première question, vous avez trouvé la réponse.

      Pour le combo de changement de thème, ce n’est pas dans la version diffusée de ViaSPIP, c’est juste pour mon site. J’ai créé une version adaptée de ViaSPIP permettant de faire une démo des thèmes disponibles, que l’internaute peut changer à volonté, pour voir ce que ça peut donner. Mais le but dans ViaSPIP n’est pas de permettre à l’internaute de changer le thème, mais de pouvoir installer facilement avec le plugin de base un thème de son choix. On peut aussi en créer un personnalisé assez facilement.

      Pour la dernière question, il faut modifier le squelette, et là c’est une autre histoire. Je ne peux pas ici répondre à toutes les demandes de personnalisation du squelette. Une petite piste, ce sont les fichiers article.html et breve.html qui sont concernés. Vous verrez, ce n’est pas si compliqué. Un conseil, si vous optez pour l’utilisation d’un plugin de thème (à activer en plus du plugin principal), il vaudrait mieux recopier les deux fichiers dans le répertoire du plugin de thème et de les modifier à cet endroit. Ils viendront en surcharge des fichiers du plugin de base, et ainsi, vous laisserez ce dernier intact. C’est mieux pour de possibles évolutions (nouvelles versions).

      Bonne continuation
      Jean-Yves

  • bonjour Jean Yves,
    faisant suite à mon précédent mail.
    J’ai compris comment paramétrer le plugins (dans "squelettes" , logique ! ).
    mais n’ai pas su traiter les autres questions
    avec mes remerciements anticipés
    MP

  • Un énorme bravo pour votre travail remarquable, et sa mise à disposition...
    Cela fait chaud au cœur dans ce monde égoïste !!

    Belle route à vous...

  • Bonjour !

    Tout baigne pour ce squelette très bien conçu, par contre les icones des réseaux sociaux n’apparaissent pas, (la case "oui" est bien cochée) tout comme par exemple dans la page d’accueil l’intitulé "derniers articles"

    Ai bien cherché, mais n’ai pas trouvé la cause...

    Merci pour votre aide !

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.

    • Informatique

    Dans la même rubrique

    2007 - 2024 JYG Web - Auteur : Jean-Yves Giraud - Tous droits réservés
    Accueil | Plan du site | Contact | RSS 2.0

    SPIP ViaSPIP 3.2