HTML5UP Massively

Squelette SPIP pour intégrer le modèle Massively de HTML5UP.
https://html5up.net/massively

Installation

A l’activation, le plugin installe aussi les plugins suivants (+ leurs dépendances) :

Pour installer Favicon, il faudra éventuellement ajouter le dépôt “Externals” - https://files.spip.net/externals/archives_externals.xml - sur la page d’administration des dépôts de votre site (/ecrire/?exec=depots).
(cf aussi https://plugins.spip.net/spip.php?page=depots)

Options

La page de configuration propose quelques options de couleurs :

  • la couleur de la typographie
  • la couleur de survol des liens et autres accents colorés
  • la couleur d’arrière plan de la page
  • la couleur de fond sous le contenu
  • la couleur d’arrière plan du pied de page
  • l’image d’arrière-plan est configurable dans les options (v0.7.0)
  • le choix de fixer l’arrière-plan (v0.7.0)
  • la couleur de typographie du pied de page
  • la couleur de typographie sous le pied de page

Dans les options aussi : lorsqu’il y a plusieurs articles dans une rubrique, le sous-menu des articles peut être soit masqué et apparaître au clic d’un bouton, soit être visible et apparaître sous forme d’onglet.

Et encore des options pour la page accueil ou l’entête :

  • Le titre de la page d’accueil peut être précisé, sinon ce sera le titre du site. C’est aussi le premier item du menu,
  • on peut choisir d’afficher le slogan et le descriptif sur la page d’accueil, ou pas,
  • un article peut être choisi pour être mis en avant sur la page d’accueil,
  • le mode d’affichage de la page d’accueil : mode blog avec les derniers articles publiés (par défaut) ou mode site avec les rubriques à la racine du site (secteurs),
  • l’âge maximum des articles sur la page d’accueil.

Des pages uniques

Avec le plugin Pages on peut créer :

  • une page nommée “mentions” qui servira pour les mentions légales et sera liée en pied de page.

L’image de fond de page

Pour les versions antérieures à 0.7.3 uniquement : c’est une image pour laquelle est choisi le rôle “arrière-plan”. Pour mettre un rôle à une image, il faut qu’elle soit liée à un objet de SPIP, un article, une page unique...
(cf Rôle de documents)
Avec la version 0.7.0 du plugin, il est aussi possible de choisir l’image depuis la page de paramétrage du squelette. (C’est l’unique solution qui reste à partir de la version 0.7.3)

Les images en général

Le plugin Centre Image permet de cibler le centre d’intérêt d’une image qui doit être recadrée.
L’image utilisée pour le fond de page est celle pour laquelle on a choisi le rôle d’arrière-plan.

Les liens sociaux

Le plugin Liens Sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.

Le formulaire de contact

Le plugin Formulaire de contact avancé permet d’ajouter facilement un formulaire en pied de page.

Personnalisation

La feuille de style /squelettes/css/perso.css sera prise en compte pour personnaliser l’affichage sans perdre les mises à jour possibles. Idem pour les javascripts avec le fichier squelettes/js/perso.js

Les objets éditoriaux et fonctionnalités de SPIP

Seuls les squelettes article.html et rubrique.html sont intégrés à ce squelette, avec les pages sommaire.html et plan.html
Les mots-clefs seraient certainement bien appréciés.
Les sites syndiqués, les forums ou les pétitions ne sont pas encore prévus.

Comme tout dans l’univers SPIP, il est possible à tout utilisateur de participer en proposant une amélioration.

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP. Voyez la liste des squelettes HTML5Up adaptés pour SPIP.

Bon SPIP !

Discussion

29 discussions

  • 1

    Bonjour,

    Je suis en train de tester le passage de spip 3.2 vers 4.0 pour valider tous les plugins utilisés par un site (avant de faire la même chose vers 4.1....) et j’ai un souci avec le plugin html5_massively (v0.7.5) sous SPIP 4.0.8.

    L’image de fond utilise encore les plugins roles et roles_documents (que je suis obligé de modifier à la main pour que ça fonctionne sous SPIP 4.0 (mais cela ne sera pas résistant aux mises à jours). lorsque je passe par l’espace privé et le formulaire de configuration du plugin, je sélectionne mon image de fond, j’enregistre, mais lorsque je visite la page d’accueil j’ai un fond blanc (pas d’image de fond) derrière ma page. j’ai un message d’erreur qui m’indique :

    «http://localhost/monsite/spip.php?page=styles_config.css net::ERR_ABORTED 404 (Not Found) »

    Peut être une piste ? Mais j’avoue que je ne sais pas où chercher plus loin.

    Merci beaucoup de votre aide.

    • Je me réponds à moi-même, mon problème venait d’une surcharge du plugin qui était mal réalisée. Tout fonctionne bien après correction.

      Merci encore pour ce plugin.

    Reply to this message

  • 5

    bonjour,

    Une question sur l’image d’arrière plan
    il n’accepte pas n’importe quelle image de la médiathèque, mais je ne comprends pas sur quel critère ? taille ? type ?
    et quand il en accepte une, elle ne s’affiche pas après recalcul... de fait, je ne la trouve pas dans le source... merci d’une aide pour vérifier où elle est gérée dans le squelette pour pouvoir débuguer...

    vous avez un conseil sur la taille et le format d’image ?

    merci d’avance

    • Normalement, on peut mettre n’importe quelle image, pourquoi dis-tu “il n’accepte pas n’importe quelle image de la médiathèque”, tu as un message d’erreur ou un problème d’affichage (faut nous donner des infos si tu veux de l’aide :) ).

      L’image est gérée par le fichier /css/styles_config.css.html (L47)

    • le site de test est https://test.lepcf.fr
      j’ai bien mis une image de la médiathèque (jointe), mais il n’apparait qu’un fonds jaunâtre...
      avec l’erreur sur la page sommaire quej ’ai signalé dans un autre post et qui semble liée à un pb d’install du plugin pages...
      1 Critère inconnu = plugins/auto/html5up_massively/v0.7.5/inclure/footer.html _mentions 30

      mais je ne vois pas le rapport entre les deux, à moins que le css background ne soit déclenché par le footer ? je ne maitrise pas assez le css pour le savoir...

    • le footer fonctionne, je n’ai plus l’erreur, ni celle sur le plugin page...
      mais l’image ne fonctionne toujours pas..

    • Il semble y avoir un problème de droits avec le fichier : http://test.lepcf.fr/IMG/jpg/f_leger-les_constructeurs_a_laloes.jpg
      Il faut revoir les droits de SPIP avec la personne qui administre le serveur.

      Aussi, tu as indiqué l’adresse en https dans le forum mais la config de SPIP est en http (donc dans la feuille de style qui appelle l’image de fond), donc quoiqu’il arrive, le navigateur bloquera l’image (cf mixed content).

    • merci beaucoup de cette réponse, ca fonctionne !

      j’ai résolu le pb de droit d’accès (j’avais un .htaccess avec deny from all dont je ne sais pas d’ou il vient... il a été visiblement créé lors de la copie du dossier en ftp...)

      pam

    Reply to this message

  • 6

    bonjour,
    un souci avec la page mentions
    j’ai une erreur squelette

    1 Critère inconnu = plugins/auto/html5up_massively/v0.7.5/inclure/footer.html _mentions 30

    et quand j’édite une page unique, une autre erreur squelette
    Erreur SQL 1054
    Unknown column ’page’ in ’field list’
    SELECT page FROM spip_articles WHERE id_article=5021

    merci d’avance... je désinstalle/réinstalle pour voir

    • Bonjour,

      la v0.7.5 du thème nécessite le plugin Pages, l’erreur semble venir de là. Voir la paragraphe “Des pages uniques
      Est-il bien installé ?

      jeanmarie

    • merci
      oui, pages est bien installé, et j’ai créé une page unique “mentions”, mais quand je l’édite, il y a cette erreur disant que la colonne page n’existe pas dans la table article... et effectivement, elle n’y est pas... je suppose que c’est le plugin pages qui la créé à l’install... mais j’ai désinstallé et réinstallé deux fois sans succès...

      j’ai déja eu ca dans le passé, je ne retrouve plus ce qui peut bloquer la mise à jour de la structure sql à l’install

      cela dit l’erreur sur le footer évoque un critere = inconnu... ?

    • Peut-être que le plugin s’est mal installé. Tente une réparation de la base (menu Maintenance > Maintenance technique), ça devrait recréer entrées manquantes.

      Tu n’as pas modifié/surcharger le pied de page ?

    • non, pas de surcharge...

      j’ai désinstallé et réinstallé pages plusieurs fois, mais à chaque fois, il échoue à mettre à jour la structure de la table article pour ajouter le champ pages...
      il me dit que l’install est OK, mais la table article ne contient pas ce champ...

      j’ai testé de l’ajouter à la main après, mais il n’apparait pas dans le formulaire article...

      Dans le log bases, je ne vois pas d’info spécifique sur ce point
      par contre, j’ai des trucs bizarre du genre “trouver_table: table inconnue ’’ ’spip_plugins_liens’”

      je suis dans le brouillard !

    • As-tu testé la réparation de la base (menu Maintenance > Maintenance technique) ?

      Dans tous les cas, ce n’est à priori pas lié au Thème, le mieux serait de faire un message sur l’espace de discussion général https://discuter.spip.net/ :)

    • Le pb a disparu en ajoutant le champ à la main dans la table... je l’avais déja fait, mais je me suis aperçu que j’avais fait une erreur en ajoutant le champ “pages” au pluriel...
      cette fois c’est bon

      reste mon autre post sur l’image da background de la page sommaire...

    Reply to this message

  • 12

    Bonjour,
    Je viens de voir que la version compatible avec Spip 4 est sortie. Je viens de la tester en local sur Wamp. En haut de la page “gestion des plugins” le message suivant s’affiche en rouge : “Erreurs survenues
    Impossible d’activer le plugin ../plugins/auto/html5up_massively/v0.7.2
    Nécessite le plugin ROLES_DOCUMENTS en version ≥ 1.1.8.”

    Et ce plugin ROLES_DOCUMENTS n’est pas compatible avec Sip 4
    Que faire ?
    Merci

    • Bonjour,
      ah oui c’est vrai, j’oubliais ce problème... pour l’instant il n’y a pas d’autre solution que d’utiliser le plugin en développement, sur la branche master du dépôt, par exemple en ajoutant un plugin depuis son archive (ecrire/?exec=charger_plugin), avec pour url de l’archive : https://git.spip.net/spip-contrib-extensions/roles_documents/archive/master.zip

    • Salut,

      je squatte la discussion car je vais bientôt utiliser ce thème pour un site de type blog :)

      A quoi sert ROLES_DOCUMENTS dans le plugin ?

      Aussi, est-ce qu’on ne gagnerait pas à être plus flexibles sur les dépendances, car je trouve que c’est un peu contraignant : tout le monde n’a pas forcément envie de crayons, favicon, metasplus+, centre image et Pages (même si c’est très pratique, ça pourrait être un choix).

      En regardant rapidement, je ne vois pas où est utilisé champs extras.

      Enluminures typographiques, j’imagine que c’est pour la hiérarchie des intertitres qui a été corrigée en SPIP 4. Ça serait d’ailleurs l’occasion de faire une version SPIP 4+.

      Qu’en dites-vous ?

    • Merci pour cette réponse rapide. L’intégration de ce plugin par l’url n’a pas fonctionné en local, par contre j’ai remplacé la version compatible 3.2 par la version compatible 4 et là ça marche.
      Mais il y a un gros problème, tous mes logos d’articles ont disparu (j’en ai plus de 700) ! Heureusement en désactivant “Massively” et “Roles de documents” et “Spip reset”, ils réapparaissent avec l’habillage de base de Spip. Que faire ? Attendre la version finalisée de “roles de documents”, le problème ne sera t il pas toujours le même ?
      Merci

    • hello,
      Rôles de documents c’est la première solution pour les images en fond de page, mais il y eu une modification ultérieure qui a permit d’utiliser une image choisie sur la page de config : on pourrait retirer Rôles de documents pour ne laisser que la solution en page configuration. Pour Enluminures typographiques, j’ai bien peur que ça casse des choses dans la rédaction.
      Champs Extras ne me semble pas utilisé ni nécessité.
      On a déjà parlé des plugins nécessités tels que tous ceux-ci : pour les utilisateurs débutants c’est très pratique et ils découvrent un SPIP un peu amélioré, ils n’ont pas à chercher autre chose pour une utilisation courante, Cette contribution leur est destinée. Les plus chevronnés n’auront pas de difficulté pour corriger ce qu’ils veulent.

    • hello Didier,
      donc j’ai fait une nouvelle version 0.7.3 sans le plugin Rôles de documents, ça devrait aller mieux sur SPIP4. Merci de tester et de nous dire si ça va.

    • Merci bien de cette réponse et action très rapides. Avec la version 0.7.3 et la désinstallation du plugin “roles de documents” les logos d’articles apparaissent bien à nouveau, super ! Idem avec l’image de fond de la page d’accueil que l’on va installer à partir de la page de gestion du squelette.
      Par contre dans le corps de certains articles j’ai des images intégrées avec un code de type “” ou emb et là toutes ces images n’apparaissent plus en front alors quelles apparaissent bien en back office, Pourtant j’ai bien le plugin “Modeles de documents Spip 3.2” qui est installé (pour éviter d’avoir mes photos en double à la fois dans ma galerie Galleria et dans le portfolio).

    • Comme j’ai mis le code on ne voit pas la syntaxe il s’agit d’images intégrées avec doc, img ou emb suivi du numéro de l’image puis droite, gauche ou centre.
      Ce qui est étonnant c’est que certaines images s’affichent et pas d’autres quelque soit le moyen employé.

    • Désolé je viens de vider le cache des “images calculées automatiquement” et tous les logos d’articles ont disparu en front, par contre ils sont bien présents en front. Et les images des articles qui n’apparaissent pas on un chemin de type "local/ adapt-imag/ suivi d’un répertoire qui n’existe pas ...

    • Encore désolé, TOUT fonctionne bien en fait, je ne sais pas pourquoi dans le plugin “Adaptative images” la case était cochée sur “Produire les variantes d’images uniquement quand elles sont nécessaires”, j’ai décoché et tout est revenu dans l’ordre. Donc c’est bon pour la 0.7.3

    • C’est rien, parfait si ça fonctionne bien maintenant :o)

    • @chankalan : je vais l’utiliser pour un projet, je regarderai à ce moment là pour Rôles de documents / Enluminures typographiques / Champs Extras.

      Pour Pages uniques, il sert juste pour la page Mentions légales on dirait. On pourrait utiliser Menus à la place (voir Escape velocity par ex), ça serait plus flexible. Qu’en penses-tu ?

      Ok pour les autres, je vois l’idée mais mais si c’est via des <necessite>, les plus chevronnés ne peuvent rien faire alors que l’inverse oui (expliquer aux débutants comment les installer). Bref, une question de point de vue :)

    • Là comme cela, en étant externe, je dirais qu’au contraire il vaut mieux indiquer les dépendances. En effet, précisement, pour les gens qui débutent, s’ils utilisent la méthode standard d’installation des plugins de SPIP, cela va leur installer automatiquement les dépendances, ce qui est quand même bien plus simple que de les faire à la main en pensant à lire les détails de la doc.

    Reply to this message

  • 4
    Jean-Philippe

    Bonjour,

    Quelques soucis d’affichage.

    • L’image de fond a tendance à glisser légèrement à mesure que l’on descend sur la page.
    • L’intitulé des rubriques (sous forme d’onglet) n’apparait plus en entier. Seulement le déterminant. Exemple au lieu de nos vidéos, n’apparait que nos.

    Le lien: https://www.vent-sucre.com/

    Merci pour ce travail.

    • Bonjour,
      l’image d’arrière-plan est un peu animée (effet parallax) dans le modèle de site d’origine, mais elle peut être fixée par un paramètre dans la configuration. L’effet saccadé n’est pas très heureux, peut-être qu’une prochaine mise à jour résoudra le soucis.
      Pour les titres coupés, c’est juste parce qu’il y a trop d’item dans le menu, ou alors il faut retirer le déterminant et ne garder qu’un seul mot.
      Pour la liste des articles, quand on est sur la page d’un article, il y a un paramètre dans la page de configuration qui place la liste dans un menu masqué avec un bouton pour le dérouler, ce serait peut-être bien sur votre site...

    • Jean-Philippe

      Bonjour pour les intitulés des rubriques, c’est bon. Par contre si je décoche l’effet parallax, il n’y a plus du tout d’image. Mais ce n’est pas grave.
      J’attends la compatibilité pour Spip 4.

      Merci

    • Bonjour,
      j’ai bien vérifié pour l’image, et l’effet parallax est bien enlevé mais pas l’image, elle reste fixe.
      Avez-vous bien recalculé la page, l’image est-elle bien présente ?
      Pour la compatibilité SPIP4, elle arrive bientôt...

    • Jean-Philippe

      Chez moi sur Chrome et Chromium (Brave) l’image n’est pas vraiment fixe, par contre sur le téléphone (Samsung internet) elle l’est. Mais ce n’est pas grave.
      Merci encore.

    Reply to this message

  • 2

    Bonjour,

    quand je rédige dans le champ texte d’une rubrique, le contenu apparaît deux fois ... ?
    Site
    Merci de votre aide

    Reply to this message

  • 4

    Bonjour, Une version de Massively pour Spip 4 est elle prévues ? Merci

    • Bonjour,
      ce sera la même, bien sûr. Malgré tout il faut peut-être tester SPIP4 en forçant la compatibilité des plugins SPIP3.2, en ajoutant cette ligne dans config/mes_options.php
      define('_DEV_VERSION_SPIP_COMPAT',"3.2.99");

    • Bonjour, Je n’ai pas trouvé le fichier “mes_options.php” par contre j’ai fait la modification indiquée dans “connect.php” et tout semble fonctionner normalement en local.

    • Le fichier mes_options.php n’existe pas par défaut puisque ce sont “mes options” (= vos options à vous pour personnaliser SPIP), il faut donc le créer.

    • Merci bien, effectivement ça fonctionne avec cette syntaxe au début <?php, si non c’est la cata. Explications sur le fichier mes_options.php https://www.spip.net/fr_article4654.html

    Reply to this message

  • 1

    Bonjour,

    Je vous remercie pour ce thème, très fonctionnel et extrêmement pratique, je voudrais modifier quelques éléments, j’ai pal cherché sur des tuto’s et des forums, malheureusement, je n’y arrive pas. J’avoue tout de suite être très mauvais en termes de développement web.

    -  Je n’arrive pas mettre la page “mentions” en pied de page, toutes mes excuses je dois être vraiment nul ; j’ignore comment faire...

    -  Je souhaiterai adjoindre un numéro issn sur la page, j’ai tenté de l’inclure tout en bas de la page ; à côté du “plan du site”...etc. J’ai modifié le fichier footer.html dans /squelettes/inclure mais ça n’a pas fonctionné... j’ai dû mal m’y prendre.

    -  troisième et dernier point ; est-ce possible de mettre en place une newsletter ?

    Encore merci pour votre attention,

    • Bonjour,
      -  pour la page “mentions”, if faut que ce soit une page unique (vérifiez peut-être que le plugin de ce nom est bien activé) : cf dans Édition > Pages uniques, et le nom de la page doit juste être “mentions”, pour le titre c’est comme vous voulez.
      -  Pour ajouter du contenu dans la page, avez-vous quelques notions de comment fonctionne le code dans un squelette SPIP ? Vous pouvez peut-être trouver ce qui vous manque par ici : https://www.spip.net/fr_article899.html#Filtrer-les-resultats
      -  Pour la lettre d’information rien n’empêche d’activer le plugin Newsletters, c’est tout à fait indépendant du squelette Massively.

    Reply to this message

  • 3

    Bonjour,
    Je viens de mettre à jour la dernière version de Massively, j’ai “recalculé les CSS” et les icônes des réseaux sociaux en bas de page on disparues, le lien sous l’icone (absente) fonctionne bien par contre. Il y a eu une MAJ il n’y a pas très longtemps du plugin “Réseaux sociaux” ça vient peut être de là ?

    Reply to this message

  • 1

    au départ je pensais que ça dysfonctionnait ainsi par rapport au fait que j’étais “connecté” à mon espace, ensuite j’ai eu deux retours (aujourd’hui et il y a deux jours) de lecteurs qui arrivaient pas accéder à tel ou tel article et ce qui a fini de me persuade c’est ce partage sur FB : https://www.facebook.com/ethalides/posts/2861490014115587
    c’est le logo du site qui s’affiche et non celui de l’article... comme si le lien posté était celui de la homepage...

    j’avoue ne pas comprendre... mais s’il n’y a aucun dys’ de votre côté j’en suis bien content :)

    encore merci pour votre attention !

    • Désolé, je ne vois pas.
      Je ne sais pas si ça a un effet, le site est bien accessible en “https” mais aussi en “http” sans “s”, et ça peut poser des soucis dans certains cas. Vous pourriez peut-être placer ces lignes dans le .htaccess pour diriger tout le trafic sur le “https” :

      RewriteCond %{HTTPS} !=on
      RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

      Et aussi, pour une question ergonomique, vous pouvez peut-être prendre l’option “Menu > Masquer la navigation des articles” dans le paramétrage du squelette... ?

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom