ViaSPIP 3

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) pour lesquelles vous pouvez utiliser la première mouture de ViaSPIP.

Site de démo : JYG Web

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.

Sélecteur de thèmes ViaSPIP

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 : 1re release de ViaSPIP 3

Discussion

9 discussions

  • 3
    jean-François Hl

    Bonjour et merci pour votre travail.

    J’utilise votre plugin sur un site et je voulais l’activer sur une installation toute neuve de spips 3.1
    Hélas : Le plugin est marqué incompatible :-...

    si on modifie paquet.xml :

    compatibilite=« [3.0.0 ;3.1.0] »

     :-((

    Spip nous répond :

    Squelette ViaSPIP 3 n’est pas compatible avec la version de SPIP que vous utilisez.

    Pensez vous faire évoluer ViaSpip3 en viaspip3.1 ?
    Merci de votre réponse
    Cordialement
    Jean-François Hl

    Répondre à ce message

  • 2

    Bonjour,

    Merci à son auteur pour ce très bon plugin.
    Je voudrais augmenter la taille des images dans un article, mais je n’y arrive pas.
    Dans le fichier article.html, si je modifie « image_reduire600,* » en mettant par exemple 500, l’image est bien réduite à 500 px. Mais si je mets 700, l’image reste à 600px.
    Il doit donc y avoir un paramètre max quelque-part, mais je ne sais pas où.

    Quelqu’un aurait-il une solution ?
    Merci par avance de votre aide.
    Cordialement, Jean François

    • Bonjour,
      Je viens de faire un test en modifiant le filtre « image_reduire » dans le fichier « article.html », comme vous l’avez fait, et je n’ai pas rencontré de problème. Peut-être une histoire de cache ? Avez-vous recalculé la page pour rafraîchir le cache de SPIP, et appuyé sur F5 pour rafraîchir la cache du navigateur (ou ctrl+F5 pour forcer le rechargement de la page) ?
      Etes-vous sûr que l’image d’origine fasse plus de 600 px (le filtre « image_reduire » ne fait que réduire une image si celle-ci est trop grande, elle n’agrandit pas...) ?

      Par ailleurs, avez-vous dans votre répertoire « config » un fichier « mes_options.php » qui contiendrait les lignes suivantes pour définir les tailles maxi autorisées au téléchargement (ici 1024px pour l’exemple) :

      define('_IMG_MAX_WIDTH', 1024);
      define('_IMG_MAX_HEIGHT', 1024);

      Voilà quelques pistes... Bonne continuation.
      Jean-Yves

    • Bonjour et merci de votre réponse très détaillée.

      En fait mon image d’origine faisait 600px, et ne pouvait donc pas apparaître plus grande, même en modifiant le paramètre de « image_reduire » !
      Donc problème résolu grâce à votre aide.

      Cordialement,
      Jean François

    Répondre à ce message

  • 2

    bonjour

    je souhaite modifier le texte présent dans la page d’inscription (pour le forum par exemple).

    Vous inscrire sur ce site
    Vous avez demandé à intervenir sur un forum réservé aux visiteurs enregistrés.
    j’ai essayé de parcourir des fichiers html

    j’ai essayé de parcourir des fichiers html mais je n’ai rien trouvé de ressemblant, pouvez-vous me dire à quel endroit en renseigné le texte

    merci

    • Bonjour,
      Cela se passe dans les fichiers de langue. Il en existe 3 en standard dans SPIP 3 et ils se trouvent dans le répertoire « ecrire/lang » (ecrire_fr.php, public_fr.php et spip_fr.php).

      Ce que vous voulez modifier se trouve dans le fichier « ecrire/lang/spip_fr.php ». Repérez les lignes qui vous intéressent puis recopiez-les dans le fichier « plugins/viaspip_3.0.11a/lang/local_fr.php » pour les personnaliser. Ce qui est dans ce fichier surcharge les valeurs par défaut des fichiers de langue de SPIP.
      Bonne continuation

    • Merci (donc squelette général) ;)

    Répondre à ce message

  • 2

    Bonour et bravo pour ce squelette intéressant.
    Je n’arrive pas, avec ce squelette , à placer un article en éditorial sur la page d’accueil ?
    Comment faut-il faire ?

    • Bonjour,
      ViaSPIP fonctionne globalement comme le squelette de la dist officielle, et en standard, sur la page sommaire, celui-ci affiche une liste des derniers articles publiés. Et c’est tout...
      Si on veut afficher autre chose, il faut le faire soi-même en modifiant le fichier sommaire.html du plugin ViaSPIP. Dommage d’ailleurs qu’il n’y ait pas en standard dans SPIP un endroit où on puisse mettre un contenu à afficher sur la page sommaire (aussi simple à rédiger qu’un article et avec la possibilité d’y mettre des images), un champ Editorial en somme.

      Je ne peux pas vraiment répondre à votre question puisqu’il s’agit d’un développement spécifique à réaliser, mais il y a plusieurs manières de faire ce que vous souhaitez. Je vous donne deux pistes : soit utiliser le champ « Description du site » pour cela, mais ce n’est pas très pratique (pas de téléchargement d’image prévu dans SPIP, champ de saisie trop petit), soit utiliser un mot-clé « spécial » qu’on rattache à l’article qu’on veut voir en page sommaire. On peut aussi utiliser une brève plutôt qu’un article. A voir... Dans tous les cas, il faudra modifier le fichier sommaire.html et intégrer les boucles adéquates.
      Bonne continuation
      Jean-Yves

    • en effet, à titre perso, dans sommaire.html j’ai pu ajouter une image
      et , de tête, dans breves.html aussi

    Répondre à ce message

  • 2

    bonjour

    je découvre ce squelette que je vais essayer de mettre en place.
    je viens de voir le site de Philivert, que je trouve bien fait d’un point de vue ergonomie

    pensez-vous qu’il est possible d’insérer un agenda (comme dans le squelette sarka ou soyez créateur) ou bien de mettre un lien, comme dans le squelette Ahuntsic, un lien vers un agenda gmail ?

    merci pour votre retour

    • Bonjour,
      ViaSPIP est un squelette de base qui offre une alternative au squelette de la dist officielle et qui se veut très simple à mettre en place. Il n’utilise que les fonctionnalités « standard » de SPIP. Je ne suis pas spécialiste des squelettes cités, et je ne peux donc pas répondre directement à vos questions, mais la fonctionnalité d’agenda pourrait sans doute être ajoutée sur un site en utilisant le plugin Agenda pour SPIP ( http://contrib.spip.net/Agenda-2-0 ) et en modifiant légèrement le squelette ViaSPIP pour intégrer cette fonctionnalité sur le site public.
      A creuser...
      Bonne continuation

    • Merci pour cette réponse Jean-Yves
      Je verrai si besoin. En tout cas le squelette est propre et facile à utiliser, merci ;)

    Répondre à ce message

  • 1
    Philivert

    Très belle évolution du squelette SPIP, que je viens de mettre en place sur mon site avec le thème « tache » adapté à mes besoins.

    Merci Jean-Yves :)

    Répondre à ce message

  • Pierre Salmeron

    Bonjour,
    J’ai choisi ce squelette pour remplacer ahuntsic sur deux sites don je suis webmestre (portedenbas.org et alternatifs-paris-sud.org).
    J’ai apprécié la facilité de création d’un « plugin adjoint » pour la modification des css, du bandeau du site...
    J’ai été amené à modifier les pages rubriques et articles dabs le « plugin maître » (ce qui n’est peut-être pas judicieux ?) ,pour faire apparaître les auteurs.
    C’est dommage que le plugin n’ait pas été déposé sur SPIP-Zone-Plugins, ce qui faciliterait sa mise à jour par le couteau suisse.

    Répondre à ce message

  • 1

    Bonjour,

    La description et la démo de cette nouvelle version montrent une impressionnante évolution qui rend maintenant ce squelette très attrayant.

    un grand bravo et bonne continuation.

    FDG

    • Merci, ça fait toujours plaisir...
      Juste une petite précision qui peut être utile à tous : sur mon propre site, j’ai ajouté au squelette des « liens pour réseaux sociaux » présents sur les pages sommaire, article et brève. Ceux-ci ne sont pas intégrés d’office dans le squelette ViaSPIP 3 que je distribue. A chacun de faire ce qu’il souhaite...

    Répondre à ce message

  • 1

    Bonjour

    merci pour la mise à jour du plugin Viaspip, que je suis en train de tester pour une MAJ en spip3.
    Je ne parviens pas à insérer de social tags, alors que le plugin social tags est bien installé et activé, pourriez-vous m’aider, et me dire si je dois modifier quelque chose ?
    J’ai tout essayé : ajout de balise #insert_head entre

    et

    de l’article, et ajout de div social tags, mais rien n’y fait.
    Merci de votre aide
    Cordialement, Laurence

    • Bonjour,
      Le plugin social tags n’a rien à voir avec mon plugin (squelette). Pour en avoir le coeur net, je viens de l’installer en local sur un SPIP 3.0.11 (uniquement le plugin social tags activé). Impossible de le faire fonctionner. D’ailleurs, dans la configuration, l’id #contenu indiqué par défaut correspond à un squelette de type SPIP 2.1. En SPIP 3, il faudrait indiquer l’id #content, mais là non plus, ça ne marche pas...
      Désolé, mais je ne peux pas vous en dire plus, il serait sans doute préférable de poser ces questions sur le forum du plugin social tags.
      Bonne continuation

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom