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

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. Si c’est elle est choisie là, l’image avec le rôle arrière-plan ne sera pas prise en compte.

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

23 discussions

  • 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

  • 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

  • 1
    Jean-Philippe

    Bonjour,

    Belle adaptation, merci.
    Je souhaite juste signaler un bug je pense au niveau du rafraîchissement du cache.
    Le site était auparavant sous ScolaSpip 4. Je l’ai désactivé (avec ses dépendances) pour installer à la place Massively.
    dans un premier lieu il m’a fallut vider le dossier /tmp pour que l’image s’affiche. Ensuite les articles n’apparaissaient pas en page publique. Je les ai tous rebasculé en “proposé à la publication” vidé de nouveau le dossier tmp et republié ceux-ci à des dates différentes afin de conserver l’ordre de publication.
    Par ailleurs lors de l’affichage des images du Portfolio le fond d’écran n’est plus voilé par une opacité même si celle-ci est réglé sur 0.8 dans le menu Multimédia.
    L’objet de ce message n’est pas d’émettre un quelconque reproche mais d’apporter des informations afin de pouvoir poursuivre l’amélioration du thème.

    Merci encore.

    • Bonjour,
      je pense que c’était un problème de cache passagé en changeant de modèle de site, qui semble résolu...

    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 ?

    • Polémil

      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.

    • Polémil

      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 ?

    • Polémil

      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

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