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

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)

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 !

updated on 7 December 2019

Discussion

7 discussions

  • 2

    Salut,

    Attention Favicon est dans un dépôt external, ce qui provoque une erreur à l’installation.
    Sur une installation neuve, ça surprend. Peut-être faire un lien vers cette page ?
    https://plugins.spip.net/spip.php?page=depots

    Reply to this message

  • 3

    Bonjour,
    je travaille avec la 0.6.4, le site est presque prêt. Mais... pas grave, la liste des articles d’une rubrique est bien sur 2 colonnes avec un grand écran. Et ce type d’affichage perdure sur les écrans étroits, alors que le template original passe la liste en une seule colonne. Et comme je connais pas bien le css, j’arrive pas à voir ce qui pourrait bugger. J’ai pas eu le temps de comparer main.css et le css de html5up. Mais si vous avez une idée.... ce serait plus joli.
    Merci pour la réponse.

    • Bonsoir,
      merci du signalement, j’ai corrigé le bug dans la version 0.6.5 qui sera bientôt zippée.
      C’est dû au chargement ajax des listes qui modifie un peu la structure html, ça complique un peu mais c’est faisable...

    • Bonsoir,
      en provisoire pas très satisfaisant, j’ai fait du collage de ce qui m’allait bien dans perso.css (le style de spip.css prévalait sur celui de main.css....). Mais je passe à la version 0.6.5 dès qu’elle sort. Merci pour tout ce boulot !

    • Bonjour, ca y est grâce à vos efforts le site sur lequel j’ai travaillé est en ligne, il y encore du travail, mais le relookage du “vieux” site en sarkaspip a été apprécié par l’assoc. Je me suis permis quelques emprunts au squelette “phanton” dans une rubrique.... Je vais bien sur suivre les évolutions du plugin s’il y en a ! Merci encore !!

    Reply to this message

  • 4

    Dans la version que j’utilise (0.6.1), il ne s’affiche aucune image de fond, et les quelques réglages de couleurs que l’on fait dans l’espace privé ne prennent pas effet. J’ai essayé de changer l’image de fond dans le répertoire images (bg.jpg), pas d’effet.... Je connais pas assez l’empilement des fichiers de configuration, mais on dirait qu’il y a des priorités mal réglées... yen a t il qui ont résolu ce souci ?

    • J’ai provisoirement «résolu» le problèmedl’affichage de l’image en arrière-plan en remplaçant le fichier overlay.png par l’image voulue... Pas certain que ce soit la bonne méthode, mais ça fonctionne chez moi.

    • Trouvé pour l’affiches de l’arrière plan (grâce à une réponse de DD sur le même pb avec le style phantom : dans
      plugins/auto/html5up_phantom/v0.2.6/inclure/head.html
      remplacer

      <link rel="stylesheet" href="/spip.php?page=styles_config.css" type="text/css" />

      par

      <link rel="stylesheet" href="spip.php?page=styles_config.css" type="text/css" />

      Il faut enlever un “/” devant spip et cela marche.... 2 semaines de recherches.

    • Merci beaucoup pour le partage de cet info !

    • Bonjour,
      je ne vois pas de différence de mon côté entre les deux solutions, mais peut-être que dans certains cas d’hébergement il y en a une, donc j’ai retiré le “/” et on verra les retours...
      voir la version 0.6.4

    Reply to this message

  • 3

    Bonjour, je continue avec le plugin. Je n’ai toujours pas résolu mon souci d’arrière plan. Mais je suis intéressé par un autre souci : quand j’affiche un article avec des photos (portfolio), les photos apparaissent :
    -  affichées la première à droite, puis vers la gauche,
    -  décalées vers le bas de en gros 1/2 photo chacune (celle de gauche est un peu plus bas que sa voisine de droite).
    Le portfolio est affiché par le fichier “documents.html” du squelette-dist. Quand je désative le plugin “massively”, le portfolio s’affiche bien. Une idée de la cause ?

    • Si une solution à ce problème a été trouvée, je suis également preneur. Merci !

    • Pour résoudre ce point, j’ai recopié les styles de la dist et je les ai collés sans trop de précautions dans le fichier “documents.html” (il serait plus joli et dans les régles de mettre ces indications dans “perso.css” pour passer devant les styles de “massively”, mais j’ai fait au plus vite en fonction de mes connaissances). Il faut donc “styler” le “ul” et “li” : Pour le “ul” :

      <ul style="list-style: none; vertical-align: baseline; box-sizing: border-box; margin-bottom: 1.5em; margin-left: 1.5em; float: left ">

      et pour le “li” :

      <li style ="display:inline; float:left; padding: 10px; margin: 5px; border: 1px solid; color: #EEE; background: #FFF; box-shadow: 5px 7px 5px 2px rgba(85,85,85,0.3);">

      J’ai pas fait de tri de ce qui est utile ou pas, j’ai tout recopié.

      Le fichier “documents.html” modifié est placé dans le répertoire “squelettes/inclure”.

    • Bonjour,
      désolé de cet oubli, j’ai inclu les styles du portfolio de la dist dans la version 0.6.3 qui sera zippée sous peu...

    Reply to this message

  • 4
    Vianney

    Bonjour,

    Je souhaiterais utiliser ce thème sur mon site http://www.aikido-tours.fr, mais j’ai quelques questions :
    -  dans le back office, je ne comprends pas où mettre l’image qui est censée apparaître en arrière plan en haut de la page d’accueil ;
    -  mes articles sont rangés dans des rubriques (il y a un article dans chaque rubrique, pour le moment), et les rubriques apparaissent bien comme menu du site. Mais quand je clique sur une des rubriques dans la partie publique du site, l’article qui est associé ne s’affiche pas.

    Merci d’avance pour votre aide.
    Cordialement,
    Vianney

    • Bonjour,
      c’est un oubli dans la doc, corrigé maintenant, merci !

      L’image de fond de page
      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)

    • Vianney

      Merci, c’est réglé pour l’image d’arrière-plan.
      Je vais continuer à creuser pour l’affichage de la navigation du site.

    • Bonjour,
      je ne vois pas le rôle “arrière-plan” dans les options
      comment le faire apparaître ?
      Merci

    • Bonjour,

      J’ai des rubriques et des sous-rubriques. Le thème crée un menu pour ces rubrique mais quand je clique sur un élément du menu il y a que le footer qui s’affiche. J’ai vue que Vianney a eu le même problème. Quelqu’un peu nous aider svp ? Merci.

    Reply to this message

  • Le rôle “arrière-plan” se trouve dans les rôles associés aux documents liés aux articles. Les photos par exemple.

    Reply to this message

  • 6

    Bonjour,

    Merci pour ce portage.
    Je suis “coincé”, j’ai beau attribuer le rôle “arrière-plan” à une image, elle même liée à un article, mais celle-ci n’apparaît pas en fond de page... L’image doit-elle avoir un format spécifique (taille...) ? Faut-il supprimer les autres rôles (document) ?
    Merci pour vos réponses.

    Polémil

    • Bonjour,
      je viens de faire le test, ça marche pas mal pour moi... il faut bien var_mode=recalcul dans l’url pour être sûr.
      Sinon je ne vois aucune limite en taille ou format, ni de raison que ça ne marche pas...

    • Merci pour la réponse rapide !
      J’avais la version 0.6.0 du plugin. Je l’ai désactivé et supprimé, désactivé tous les plugins associés et installé la version 0.6.1. Lorsque je souhaite l’activer, alors que tous les plugins nécessaires sont à nouveau activés, j’ai le message suivant : «• Le plugin Html5up Massively dépend du plugin .» sans indication sur le plugin manquant... Une idée ?

    • À mon avis c’est un petit problème de cache, à voir si réactualiser la page est suffisant.

    • Page réactualisée, cache vidé, cache supprimé via ftp... Changement de navigateur... Le même message «• Le plugin Html5up Massively dépend du plugin . » persiste...

    • Bonjour,
      Même problème de plugin:
      il y a une différence entre ce qui est énuméré plus haut :

      crayons,
      favicon,
      metasplus+,
      champs extras,
      SPIP reset
      centre image,
      Enluminures typographiques,
      Rôle de documents,
      Pages.

      et le paquet.xml

              <necessite nom="saisies" compatibilite="[3.23.2]" />
              <necessite nom="crayons" compatibilite="[1.26.15;]" />
              <necessite nom="spip_reset" compatibilite="[3.0.2;]" />
              <necessite nom="favicon" compatibilite="[1.1.2;]" />
              <necessite nom="metasplus" compatibilite="[2.0.0;]" />
              <necessite nom="centre_image" compatibilite="[0.10.3;]" />
              <necessite nom="pages" compatibilite="[1.3.7;]" />
              <necessite nom="typoenluminee" compatibilite="[3.5.12;]" />
              <necessite nom="roles_documents" compatibilite="[1.1.8;[" />
              <utilise nom="contact" compatibilite="[0.16.0;]" />
              <utilise nom="sociaux" compatibilite="[2.1.0;]" />

      J’ai donc installé tous le plugins du paquet.xml
      sans résultat... dans un premier temps...

      Puis en modifiant paquet.xml ’suppression des utilise et envidant les caches... ça a marché Mais est-ce que le plugin est bien installé ?

      Cordialement

    • Jean-Michel

      J’ai eu le problème avec la version 0.6.1, résolu en allant dans le fichier plugins/auto/html5up_massively/paquet.xml, ouvert avec un éditeur texte, dans les lignes qui commencent par “<necessite” et qui indiquent les dépendances, remplacer les “]” en fin de ligne par des “)” : je pense que cela rend le plugin plus relax sur les versions de plugins dépendant.
      J’ai aussi le souci de non affichage de l’image de fond....

    Reply to this message

Comment on this article

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