HTML5UP Forty

This contribution or plugin is actually being tested. Issues may occur, don’t hesitate to report those in following post’s comments.

Adaptation pour SPIP du squelette «FORTY» de html5up https://html5up.net/forty

Accueil
Accueil
Rubrique
Rubrique
Article
Article

Installation

Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html

Il nécessite les plugins Adaptive Images, Saisies et ZCore.

Note : pour fonctionner, il faut que le plugin Adaptive images soit configuré pour utiliser la méthode srcset + (HTML5).

Configuration

La configuration du plugin est accessible via le menu Squelettes > HTML5up Forty

Page d’accueil

Il est possible de choisir l’image d’entête : via la médiathèque (menu Édition > Documents), ajouter un nouveau document puis, dans la page de configuration, indiquer le numéro de ce document.

Il est également possible de choisir le mode d’affichage :

  • mode site avec les rubriques à la racine du site (secteurs)
  • mode blog avec les derniers articles publiés.

Contenu

Il est possible de choisir l’article affiché en pied de page.
Ça peut être un article dans l’arborescence ou un article créé avec le plugin Pages uniques

Personnalisation

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

Modèles

Les modèles bouton et icone permettent d’afficher, dans le contenu, des boutons et icônes avec Font Awesome (liste des icônes disponibles).

Bouton (icône et texte avec lien dans un bloc encadré)

<bouton|icone=fa-heart|primary=oui|iconetexte=le texte|lien=https://www.domaine.net>

Icône (icône avec lien et texte alternatif)

<icone|icone=fa-heart|iconetexte=le texte|lien=https://www.domaine.net>

Plugins facultatifs

Identité Extra

L’activation d’Identité Extra affichera, en bas de la page, les informations de contacts.

Liens sociaux

Le plugin Liens vers les réseaux sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.
Note : Il faut “Activer l’habillage graphique de la barre de liens avec la feuille de style basée sur la police socicon”.

Formulaire de contact

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

Mailsubscribers / Newsletter

Si Mailsubscribers est installé, on affiche le formulaire d’inscription à la newsletter. A votre charge de créer la liste newsletter (voir la doc de Newsletters).

Le Plugin Menus permet d’ajouter un menu dans le pied de page : créer un nouveau menu avec l’identifiant pied et il apparaîtra automatiquement.

Agenda

Si Agenda est installé, le premier bloc de la page d’accueil affiche l’agenda (3 prochains rendez-vous et lien vers l’agenda complet).

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.

updated on 29 April 2020

Discussion

3 discussions

  • 1

    Bonjour,
    J’ai utilisé un peu plus html5up_forty.
    Juste un petit truc que je n’ai pas trouvé: j’ai mis un article comme contenu de pied de page, mais j’ai voulu le supprimer du paramétrage (pas supprimer l’article).
    Je n’ai pas trouvé.
    Cordialement.

    • Bonjour,

      oui, c’est un défaut ergonomique de saisie.

      Pour retirer cet article mis en avant, il faut faire : Modifier puis choisir le même article. Là une croix rouge apparait à droite du titre de l’article pour le supprimer.

    Reply to this message

  • 2

    Bonjour
    J’ai configurer le site pour être en mode site, donc affichage à l’accueil des rubriques secteur.
    mais lorsque je clique sur une rubrique il m’affiche le titre de la rubrique mais pas son contenu que ce soit des sous rubriques ou des articles.
    Quel réglages dois je faire ? dois je modifier du code dans les pages ?
    Est il possible d’avoir sur la même page des rubriques et des articles ?
    Quelle est la page d’accueil qui intègre les morceaux de code car la page index n’existe pas ?

    désolé de poser toutes ces question mais j’ai un trou de 8ans dans l’évolution du langage spip et je dois me remettre à jour.

    merci

    Reply to this message

  • 3

    Bonjour;

    Je viens d’installer sur mon site, html5up-forty.

    C’est pas mal du tout, bravo!

    Je n’ai pas vu de dysfonctionnement apparent.
    Si je peux me risquer une suggestion:
    - il serait (peut être) intéressant de placer dans la partie configuration , un choix de couleur pour les fonds de “case” (je n’ai pas d’autre terme, désolé).

    Amicalement.
    Rémi.

    • Merci pour ton retour.

      C’était effectivement une des pistes à la création du plugin mais l’idée étant de rester simple, mode “click & play” et les styles étant surchargeable par css, j’ai préféré ne pas commencer à charger la config pour éviter de créer un formulaire de config d’avion de chasse :)

    • Bonjour,
      Voyez ma réponse comme une réflexion, n’en prenez pas ombrage.
      Personnellement, je suis en train de reprendre html5up-lens, je comprends ce que vous voulez dire, mais je vois aussi le côté utilisateur (lens est pour le site de ma fille qui ne manipule pas le css ; bon, ok, même le formulaire de config, parfois, c’est juste...)
      Côté utilisateur, c’est peut être plus “pratique” un formulaire de paramétrage que de commencer à revoir le css? (je n’aime pas le ccs, cela se sent?)

    • C’est tout à fait comme ça que je l’ai prise :)

      Pour ce qui est de la praticité côté utilisateur, le piège dans lequel on tombe très vite, c’est de rajouter une fonctionnalité, puis une autre, parce que c’est vrai que c’est pratique, puis encore une autre, parce que bon, ce n’est qu’un champ de plus et c’est tout aussi utile que celui ajouté la semaine dernière et ainsi de suite, jusqu’à ce que... le formulaire devienne inutilisable par l’utilisateur qui était pourtant le cible à l’origine et que le plugin soit compliqué à maintenir.

      Bref, c’est un parti pris de garder les choses simple, vu qu’on peut surcharger les couleurs en CSS (même si on n’aime pas ça :) ), pour en faciliter la maintenance et en assurer la pérennité dans le temps.
      Lire là dessus le très instructif Principe KISS https://fr.wikipedia.org/wiki/Principe_KISS

    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