HTML5up Prologue

Published : 5 January 2024 – updated on 7 October 2025 – by jeanmarie – 4 commentaires

1
2
3
4
5
2 Votes

Adaptation pour SPIP du squelette «Prologue» de html5up https://html5up.net/prologue

Le thème est prévu pour des sites simples, soit avec un seul niveau de rubrique (mode site), soit avec une seule rubrique (mode blog), soit avec uniquement une galerie d’images (mode portfolio).

Installation

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

Il nécessite les plugins Adaptive Images, Ancres douces, Saisies, FontAwesome, YAML et ZCore.

Configuration

La configuration du plugin est accessible via le menu Squelettes > HTML5up Escape Prologue.

Barre latérale

Le logo du site (menu Configuration > Identité du site) s’affiche sous la forme d’un carré en haut de la barre latérale.

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 possible de choisir le mode d’affichage et le titre de la grille :

  • mode site avec les rubriques à la racine du site (secteurs)
  • mode blog avec les derniers articles publiés
  • mode portfolio avec une galerie des images du site

Il est également possible d’afficher un article sous la grille, juste au dessus du pied de page.

Pour un site type Portfolio, il est conseillé d’utiliser le plugin Pages uniques pour éviter que l’article du pied de page ne soit référencé via le plan du site. Idem en modes Blog et Site si vous ne souhaitez pas que l’article soit accessible via la grille ou le menu.

Personnalisation

Vous pouvez personnaliser le thème en créant votre propre feuille de styles CSS css/perso.css.

Les couleurs sont personnalisables via des variables CSS. La liste complète est disponible dans le fichier css/main.css (voir ici)

Modèles

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

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

Paramètres :

  • |icone=fa-rocket (ou tout autre icone de FontAwesome)
  • |primary=oui/non
  • |iconetexte=le texte
  • |lien=https://www.domaine.net

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

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

Paramètres :

  • |icone=fa-rocket (ou tout autre icone de FontAwesome)
  • |iconetexte=le texte
  • |lien=https://www.domaine.net
  • |taille=64px ou 50%
  • |couleur=#ffffff

Plugins facultatifs

Une fois activés et configurés, ils apparaissent automatiquement.

Formulaire de contact

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

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.

Le plugin Menus permet d’ajouter un menu de pied de page : créer un nouveau menu avec l’identifiant pied.

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.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

2 discussions

  • 1
    JLuc

    La démo m’a séduit, j’ai choisi ce plugin.

    Je relève un point étonnant : le #LOGO_ARTICLE n’est pas utilisé sur la page d’un article !

    Petite gêne aussi : les fonds des différents blocs ne sont pas tous configurables semble t il.

    • jeanmarie

      Pour le #LOGO_ARTICLE, c’est dû au fait que l’affichage se fait en CSS dans le thème original (voir ici), donc on le gère via le squelette css html5up_prologue.spip.css.html (voir ici). Le gérer pour chaque page demanderait de surcharger l’image dans chaque head. Ça rajoute de la complexité mais c’est pas infaisable.

      Pour les fonds par contre, c’est voulu : je préfère garder les plugins le plus simple possible (KISS is the way :) ) d’autant qu’avec ces thèmes, ça devient vite un chantier de jouer avec les couleurs qui sont utilisées à différents endroits dans différentes combinaisons et on se retrouve à faire du CSS. Donc mon parti pris est de faciliter la surcharge CSS comme indiqué dans la doc pour faciliter la maintenabilité des plugins.

    Reply to this message

  • 1
    ivandps

    Bonjour Jean Marie, merci pour ce template que je m’empresse de tester.
    Mon spip est logé dans un répertoire amidesk.com/maquette
    En mode blog, quand je vais dans un article, le lien du menu vertical

    https://amidesk.com/#suite

    m’affiche une page blanche
    Une idée ?
    Par ailleurs, les images ne s’affichent pas...
    Merci !

    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
  • 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 apparaît.

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