HTML5up Prologue

Publié le : 5 janvier 2024 – Dernière modification le 17 mars 2024 – par jeanmarie – 2 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 ans 1 an 3 mois Sans limite
par date
Filtrer

Une discussion

Ajouter un commentaire

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom