Menu
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 à l’article sur 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

  • Bonjour,
    Bravo pour cette nouvelle version. Tout comme nous avions adopté la version pour Spip 2.1, nous avons choisi cette nouvelle version pour notre site http://www.esadanse.fr

  • Je viens de passer le site http://suneidojo.free.fr/ :
    de Spip 2.1.10 à 3.0.13
    et de ViaSPIP 2.1.10b à 3.0.11a
    Aucun problème à signaler.
    Merci de mettre à disposition ce squelette (et les thèmes associés) de grande qualité.

  • Bonjour,
    En consultant un site utilisant ViaSpip3 sur smartphone Android 4.4.2 avec Chrome, le menu fixe d’outil en haut de l’écran ne s’affiche pas et du coup, je ne pas me connecter à l’espace privé.
    De plus, en cliquant sur le lien en bas RSS 2.0, j’obtiens un message "This XML files does not appear to have any style information associated with it. The document tree is show below. Et on voit affiché le code XML du site.
    D’autres personnes ont-elles ces problèmes ?
    jeanluc

    • Bonjour,
      Concernant la barre d’outils fixée, c’est normal, j’ai fait ce choix parce que la barre serait trop large (sur une seule ligne) pour un affichage sur smartphone, mais aussi parce que le style position:fixed utilisé n’est pas toujours bien supporté par les OS et/ou navigateurs des smartphones. Je me pencherai peut-être sur la question pour une nouvelle version de ViaSPIP, mais pour celle-ci (3.0.11a), c’est le fonctionnement normal. On peut toujours accéder à l’administration du site si on le souhaite en rajoutant /ecrire à l’adresse du site. Ceci dit, accéder à l’administration du site sur un smartphone n’est sans doute pas la manière la plus confortable de le faire...

      Pour la 2ème remarque sur le lien RSS, le squelette ViaSPIP utilise le fonctionnement standard du squelette de la dist officielle de SPIP 3. Peut-être vaudrait-il mieux soumettre la question sur le site de SPIP ?

      Jean-Yves

  • Merci pour le travail effectué. J’ai donc modifié le squelette à ma sauce sur le site de notre Lycée.

    Voir : www.http://lyc89-janot.ac-dijon.fr

    bonne journée

  • j’ai un souci, avec le squelette, l’affichage reste sur une seule colonne

    http://sciences-indus-cpge.papanicola.info/Cours-TD-MP

    Y-a-il des plugins incompatibles et ou nécessaires pour installer ce squelette

    Merci

    • Bonjour,
      Aucun plugin n’est nécessaire pour utiliser ViaSPIP. Quant aux incompatibilités, je ne peux pas le savoir à priori (en tout cas, je n’ai pas connaissance de plugins qui ne feraient pas bon ménage avec ViaSPIP, mais ça reste possible bien sûr...). Il faut tester au cas par cas, par exemple en désactivant tous les autres plugins et en ne laissant que ViaSPIP, puis en les réactivant un par un pour voir lequel pourrait poser problème (bien vider le cache à chaque fois pour tester).
      J’ai vu dans le source d’une de vos pages que vous utilisiez le plugin "menu déroulant". A ma connaissance, celui-ci nécessite de modifier le squelette principal du site. Si c’est bien votre intention, il vous faudra donc modifier ViaSPIP en connaissance de cause (voir mes conseils plus loin).
      Autre piste, je pense que vous avez peut-être un dossier "squelettes". Si c’est le cas, tout ce qui y est déposé a priorité sur les plugins, donc sur ViaSPIP et cela pourrait entraîner des interférences. ViaSPIP fonctionne sous forme de plugin, qui, comme tous les plugins peut être activé ou désactivé très facilement. En principe donc, lorsqu’on l’utilise et puisque c’est le squelette principal du site, il n’est pas utile et pas souhaitable d’avoir un dossier "squelettes". S’il existe, il devrait être vide.
      Si on a des modifications à apporter, il faudra les faire dans le dossier du plugin ViaSPIP, ou mieux dans le dossier d’un thème de ViaSPIP que l’on utilise (créer un thème personnalisé pour cela). Tout ce qui se trouve dans le répertoire du plugin du thème ViaSPIP personnalisé "surcharge" ce qui se trouve dans le répertoire du plugin principal ViaSPIP. Par exemple, si on souhaite modifier la page d’accueil, on n’aura qu’à recopier le fichier "sommaire.html" du plugin principal ViaSPIP vers le répertoire du thème personnalisé et de modifier ce dernier. Ainsi, on ne touche pas au plugin principal, on le garde standard.
      Espérant que ces pistes puissent vous être utiles.
      Jean-Yves

  • Salut et merci de la réponse

    j’ai viré le dossier squelette et deux plugins (menu derouant et skl editeur) et surtout le plugin menu, c’est lui qui posait problème

    http://sciences-indus-cpge.papanicola.info/Cours-TD-MP

  • bonsoir,

    j’ai un message d’erreur en installant les thèmes en tant que plugin,
    y a t’il moyen des les installer via ftp sur le site ?
    cordialement Thierry PLACE

  • bonjour

    je suis intéresser par le squelette de votre site, pourriez vous me dire si il y a possibilité de créer un "edito", article permanent en tête de la partie comprenant les derniers articles ?
    Merci d’avance

    • Bonjour,
      Le squelette ViaSPIP fonctionne de manière standard, et tout comme la dist officielle, il ne propose pas cette fonctionnalité.
      Mais bien sûr, si on est prêt à modifier le squelette, on peut le faire. Pour ma part, dans de tels cas, pour garder une plus grande souplesse, je travaille souvent avec des mots-clés "réservés", mais il faut que le squelette les prenne en compte. C’est une piste...
      Bonne journée

  • Bonjour et merci pour cette version n°3 de ViaSIP.
    Je l’utilise pour le site de l’Ensemble Vocal Cantabile (http://cantabilelagnieu.free.fr/ )
    Je souhaite modifier différentes choses, entre autres :
    afficher un autre texte que le nom du site sur l’image bannière
    ne pas afficher le texte descriptif rapide
    ...et peut être d’autres choses à préciser.

    est ce que ces modification (prévus ou a venir) sont a réaliser dans le fichier perso.css du thème ou dans le fichier style.css de viaspip ?
    Cordialement

    • Bonjour,
      Pour répondre à vos questions, tout d’abord, sur le principe, toutes les modifications à apporter devraient se faire dans le répertoire de votre thème personnalisé, pas dans celui du plugin principal de ViaSPIP.

      - Texte sur l’image bannière :
      Le plus simple est de rajouter dans le fichier "perso.css" de votre thème une ligne pour ne pas afficher le titre du site :
      .header #nom_site_spip { display: none; }
      Il ne reste plus qu’à modifier votre image bannière en y mettant le texte que vous voulez (ce sera donc sous forme image).

      - Ne pas afficher le texte "descriptif rapide" :
      Que ce soit celui du site ou pour un article, il suffit de ne pas renseigner ces champs. S’il s’agit uniquement de la page sommaire et que vous voulez quand même que ce texte descriptif apparaisse dans la meta description de la page (pour les robots des moteurs de recherche), vous pouvez rajouter la ligne suivante dans le fichier "perso.css" :
      .page_sommaire .chapo { display: none; }

      Pour le reste, si vous voulez faire des modifications plus profondes, et que vous avez quelques connaissances sur la création des squelettes SPIP, libre à vous de modifier les fichiers du squelette. Si c’est votre souhait, recopiez le fichier que vous voulez modifier (par exemple "sommaire.html" pour la page d’accueil) depuis le répertoire du plugin principal de ViaSPIP vers le répertoire de votre thème personnalisé, et modifiez ce dernier. Il surchargera alors celui du plugin principal et donc, en personnalisera le fonctionnement. Attention, quand on modifie un fichier du squelette, il faut savoir ce que l’on fait...

      Bonne continuation

  • Bonjour
    merci beaucoup pour ce plugin. Pouvez vous m’aider SVP : rien ne s’affiche dans la colonne de droite. Normalement ce sont les commentaires ? ou des articles ?...désolée je me doute que la question est bêta...Dans mon ancien site il s’agissait de brèves...merci infiniment

    • Oui, normalement, ce sont les brèves...
      Vérifiez que vous n’avez pas de dossier "squelettes" à la racine de votre site (peut-être pour votre ancien squelette de site ?). Si ce dossier existe, normalement, il faut qu’il soit vide ou mieux, supprimé. En effet, comme ViaSPIP est un plugin, s’il existe des fichiers dans le dossier "squelettes", ce sont eux qui ont la priorité, d’où la possibilité d’interférences sur le fonctionnement du plugin ViaSPIP.

      Bonne journée

  • que dois je modifier pour utiliser le plugin "les crayons" dans votre squelette viaspip3

    • Bonjour,
      A priori, j’aurais été tenté de vous dire d’aller d’abord consulter la documentation du plugin... Mais, par curiosité, je suis allé y jeter un oeil.
      La réponse à votre question est donc "rien"... ViaSPIP utilise des syntaxes standard, similaires au squelette de la dist, et notamment il utilise la classe #EDIT{}, par exemple pour le titre d’un article :
      <h1 class="#EDIT{titre} surlignable">...#TITRE</h1>

      et pour le texte d’un article :
      <div class="#EDIT{texte} texte surlignable">(#TEXTE*|...)</div>

      Tous les éléments qui ont cette classe #EDIT sont donc éditables sur la partie publique (on voit apparaître le petit crayon lorsqu’on survole un élément éditable, sur lequel il faut cliquer). N’oubliez pas de vider le cache après activation du plugin.

      Pour le reste et si vous souhaitez davantage de détails, veuillez consulter la documentation du plugin "les crayons", je ne le connais pas assez pour vous renseigner.

      Bonne continuation
      Jean-Yves

  • Merci pour votre squelette viaspip3 que j’utilise pour mon site consacré à l’archéologie :
    http://arvernie.free.fr

  • Bonjour et merci pour votre réalisation,
    n’étant pas expert et bien que j’ai réussi à personnalisé notre site, je ne trouve pas dans quel fichier modifier la couleur et la taille (caractères gras) de la police des menus horizontaux
    merci

    • Bonjour,
      Désolé pour le délai. Tout se passe dans le fichier perso.css du thème que vous aurez choisi (voir dans la doc comment créer un thème personnalisé). De quel menu horizontal parlez-vous ? Le menu fixe tout en haut, ou bien le menu des rubriques, sous le bandeau ?
      Pour le premier, c’est l’ID #menu-principal qui est concerné. Pour le 2ème, c’est la classe .nav.

      Mais c’est du CSS, et il faut le connaître un peu, je ne peux pas détailler les manipulations à faire selon les souhaits de chacun. Merci de votre compréhension.

  • Bonjour
    Je viens de mettre à jour mon site en Spip 3.1
    Et les plugins du squelette Viaspip 3 sont devenus incompatibles !
    quels manip pour avoir de nouveau ce squelette très intéressant.
    Merci d’avance.
    http://www.cyclo-randonneurs.fr/

  • salut
    le squelette via Spip 3 est déclaré incompatible avec spip 3.1
    est-il prévu une évolution ?

  • Nous attendons cette nouvelle version avec impatience et nous vous remercions à l’avance de nous la mettre à disposition. Évidemment, j’ai mis à jour vers SPIP 3.1 sans réfléchir et notre site www.esadanse.fr semble bien fade en ce moment !

  • Bonjour, ViaSPIP 3.1 est arrivé, avec en nouveauté un paramétrage du squelette principal !!!

    A vous de jouer !

    Jean-Yves

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