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 6 April 2020

Discussion

17 discussions

  • Didier

    Bonjour,
    J’ai un petit souci avec la combinaison des plugin « Massively » et « Galleria », uniquement avec Firefox sous Windows 10.
    Quand j’arrive sur le site, que j’ouvre un article avec une galerie « Galleria » les photos défilent dans la galerie sans problème avec la flèche de droite, exemple à partir de la page d’accueil en cliquant sur :https://www.gualeni.com/La-cite-Fruges-Le-Corbusier-a-Pessac.html . Si je passe à un autre article avec galerie en passant par la touche back du navigateur par exemple sur :https://www.gualeni.com/Promenade-dans-Bordeaux-et-ses-environs.html , là les images ne peuvent plus défiler, c’est coincé sur la première image. Si j’utilise l’option “pleine page” de « Galleria », là, ça fonctionne en pleine page et si je ferme la pleine page les images défilent bien dans la galerie. Après sur une ou deux galeries ça marche puis ça ne fonctionne plus pour les suivantes…
    J’ai vidé le cache du site, le cache du navigateur mais le problème subsiste.
    J’utilisais avant le plugin HTML5UP Editorial, je suis revenu sur ce plugin et là aucun souci avec Firefox sous Windown10. Idem avec l’habillage de base de Spip.

    Reply to this message

  • 2
    MarcB

    Bonjour,
    Une fois que l’on a sélectionné un article à mettre en évidence sur la page d’accueil, je ne vois pas comment le retirer et revenir à l’affichage initial sans article mis en évidence.
    Merci
    Cordialement

    • Didier

      Pour retirer cet article mis en avant, il faut faire : / modifier/ choisir le même article/ là une petite croix rouge apparait à droite du titre de l’article/ cliquer dessus /enregistrer.
      Ça serait plus simple si la croix apparaissait après l’enregistrement de l’article mais ce n’est pas le cas, il faut le rechoisir pour le supprimer.

    • Bonjour,
      oui, c’est un défaut ergonomique qui est en cours de correction...

    Reply to this message

  • Jean Philippe

    Bonjour,

    Comment paramétrer l’âge récent des articles de telle sorte qu’ils soient toujours affichés ? En dehors de mettre un nombre de jours énorme.
    Merci.

    Reply to this message

  • Didier

    Je pensais avoir trouvé comment afficher des images de fond de façon aléatoire.
    Dans le fichier styles_config.css, à la ligne 47 il est écrit :
    <BOUCLE_bg(DOCUMENTS){role=arriereplan}{0,1}{!par date}{tout}>
    j’ai remplacé {!par date} par {par hasard}

    Le problème est que moi, en tant qu’administrateur connecté, si je clique sur la fonction “Recalculer la page”, l’image change de façon aléatoire mais le visiteur lambda ne voit que ma dernière manip car pour lui le changement aléatoire ne fonctionne pas.
    Comme si l’image était bloquée en cache. Quelqu’un verrait-il une solution ?
    Merci

    Reply to this message

  • nuages

    Bonjour
    J’essaye sans succès d’installer ce squelette. L’erreur semble venir du plugin “rôle de documents” qui est nécessaire à son fonctionnement.

    J’obtiens le message d’erreur suivant :

    Message :

    Erreur SQL 1054
    Unknown column ’l.role’ in ’where clause’
    SELECT fichier, extension FROM spip_documents as d inner join spip_documents_liens as l on d.id_document = l.id_document WHERE l.objet = ’site’ AND l.id_objet = 0 AND ((extension IN (’png’,’jpg’,’gif’))) AND l.role=’logo’ ORDER BY 0+titre, titre

    Boucle :
    /roles_documents/roles_documents_pipelines.php roles_documents_quete_logo_objet() sql_fetsel();

    Ligne :
    199

    Pourriez vous m’aider svp ?

    Reply to this message

  • Didier

    Bonjour, Je suis passé de Html5 Editorial à Html5up Massively et le résultat est sympa à voir sur www.gualeni.com . Un grand merci à Chankalan et Jeanmarie.
    J’ai fait quelques adaptations, comme le nombre de posts affichés par sommaire (en passant de 6 à 14), la taille des titres qui était trop importante pour moi. J’ai ajouté un fond blanc sous la bande copyright car sur un mobile ou une tablette, le fond est transparent et on ne peut pas voir ces infos.
    J’ai retiré l’accès à la liste d’articles (menu burger) car j’ai parfois plus de 80 articles et cela n’a pas de sens, par ailleurs cela charge toute la liste et ralenti le temps de chargement des pages « article ».
    Quelques bugs :
    -   Quand on remplit le formulaire de contact, le texte a valider n’est pas bien mis en forme, on en comprend pas forcément qu’il faut le valider.
    -   Sous IOS le rond qui entoure la flèche pour aller plus bas est incomplet, il y a 4 quarts de rond et pas un rond complet.
    -   J’ai voulu mettre une fenêtre de recherche en intégrant la balise #FORMULAIRE_RECHERCHE mais quand on lance une recherche le résultat arrive sur une page 404.
    -   J’ai voulu afficher dans les articles les mots clés déjà renseignés avec la « BOUCLE_mots(MOTS) », et là idem, page 404.

    Une question :
    J’ai ajouté la balise #FORMULAIRE_NEWSLETTER_SUBSCRIBE , juste au-dessus de la fenêtre de saisie de son mail il est écrit .EMAIL, je voudrai changer ce texte mais ne trouve pas où.

    Un souhait :
    Il serait pratique de pouvoir faire tourner la grande image d’accueil en mode fond de document. Soit en pouvant en mettre plusieurs qui tournent de façon aléatoire soit en pouvant intégrer plusieurs images et programmer leur apparition. J’ai essayé d’utiliser le plugin « Depublié » mais impossible de créer plusieurs pages « accueil » et donc de les programmer. Quelqu’un aurait il un “truc”, un bout de code à coller pour faire tourner plusieurs images de fond ?

    Reply to this message

  • 1
    Didier

    Bonjour, dans la feuille de style il y a dans “Main” ceci
    #main > .posts > *
    width: 50%;

    #main > .posts > *
    padding: 4rem;
    width: 50%;

    La répétition au niveau de la largeur est elle normale ? Par ailleurs j’essaye désespérément de “jouer” sur le padding ou la lageur et ça ne donne rien, J’ai vidé le cache Spip, le cache du navigateur, rien n’y fait. Merci si vous avez une piste.

    • Didier

      Je me réponds, c’est dans spip.css qu’il faut modifier ces paramètres.

    Reply to this message

  • 3

    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

    • Merci pour le signalement.
      Il y a une discussion en cours sur la liste spip-zone : https://www.mail-archive.com/spip-zone@rezo.net/msg48860.html

    • Salut,
      j’ai précisé ça dans le paragraphe “Installation”, merci !

    • Vincent

      Merci pour ce squelette que je trouve très élégant et très moderne. Sur le site que j’administre, la version est à jour (v0.6.7), et pourtant la page d’accueil, qui affiche les derniers articles publiés, ne se met pas sur une seule colonne lorsqu’on consulte avec un smartphone.
      J’ai modifié un peu le squelette pour mon site, à partir de la version v.0.6.4. Et donc peut-être le fichier qui permet de régler ce problème d’affichage dans la v0.6.7. Mais je ne trouve pas lequel. Pouvez-vous me dire dans quel fichier se trouve le code qui règle le problème d’affichage sur les petits écrans ?

    Reply to this message

  • MarcB

    Bonjour,
    Merci pour votre correctif.
    Une question : quel est l’usage de la partie “— Featured post” dans le squelette des rubriques ?
    Sur mon site en développement cela a pour effet d’afficher une seconde fois le texte de la rubrique ainsi que la date de rédac. J’ai dû louper un truc !
    Bien cordialement

    Reply to this message

  • 1

    Bonjour,
    Merci pour ce plugin.
    Il me semble avoir repéré un bug : la configuration de “age article récent” est sans effet.
    En remplaçant “massively” par “html5up” dans le fichier articles.html le problème est résolu.
    Bien cordialement

    Reply to this message

Ajouter un commentaire

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