Html5up Future Imperfect

Published : 2 April 2025 – by jeanmarie

1
2
3
4
5
4 Votes

Adaptation pour SPIP du squelette « Future Imperfect » de html5up.

Le thème est prévu pour des sites de type blog et affiche, sur l’accueil, les derniers articles des rubriques sélectionnées. Mais il permet aussi de garder d’autres rubriques éditorialisées dans lesquelles les articles sont affichés comme dans les rubriques par défaut de SPIP (par ordre alphabétique ou ordonné avec la numérotation).

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, FontAwesome, YAML et ZCore.

Configuration

La configuration du plugin est accessible via le menu Squelettes > HTML5up Future Imperfect.

Rubrique blog

Sélectionner les rubriques qui s’afficheront sous la forme de blog (liste d’articles par ordre inverse chronologique) et dont les derniers articles s’afficheront sur la page d’accueil.

A noter : la page d’accueil affiche une erreur 404 tant qu’aucune rubrique n’est sélectionnée.

Polices du thème

Il est possible de ne pas charger les polices du thèmes (Raleway et Source Sans Pro) si vous souhaiter les personnaliser manuellement (voir paragraphe Personnalisation). Cela permet d’améliorer les performances en ne chargeant pas les fichiers inutilement.

Barre latérale

Le logo, le slogan et le descriptif du site se gèrent via le menu Configuration > Identité du site.

Articles/rubriques mis en avant

Une fois le plugin Sélections éditoriales installé, créer une sélection éditoriale avec l’identifiant miniposts, elle s’affichera en haut de la barre latérale.

Article “à propos”

Une fois le plugin Pages uniques installé, créer une page unique avec l’identifiant apropos dont le texte s’affichera en bas de la barre latérale.

Divers

Le thème prend en charge les commentaires ainsi que les mots clefs.

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.

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 2 menus :
-  menu d’entête, créer un menu avec l’identifiant entete.
-  menu de pied (en bas de la barre latérale), créer un 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.

Ce thème a été initialement développé pour les Ateliers Lirécrire et numérique : www.atd-lirecrire.infini.fr

Discussion

5 years 1 year 3 months Without limit
par date
Filter

No discussion

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