Solid State (HTML5up)

Squelette adapté du thème Solid State de HTML5 UP https://html5up.net/solid-state

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, ScssPhp et Zcore.

Fonctionnement

Accueil

La page d’accueil affiche en entête le nom, le slogan et le descriptif du site puis :

  • les rubriques racines
  • la rubrique héro (configurable)
  • le formulaire et les informations de contacts (voir Plugin supplémentaires)

Rubrique

La rubrique affiche le logo, le titre, le descriptif et le texte puis la liste des articles qu’elle contient sous forme de grille.

Article

L’article affiche le logo, le titre, le sous-titre, le descriptif rapide, le chapeau, le texte et le post-scriptum.

Pied de page

Le pied de page commun à toutes les pages affiche :

  • la citation de pied de page
  • la description en pied de page
  • le menu (voir Plugin supplémentaires)

Multilinguisme

Le squelette est prévu pour fonctionner avec multilinguisme par secteur.
Si vous activer le multilinguisme, la rubrique héro ne sera plus prise en compte.

Personnalisation

La page de configuration du plugin est accessible via le menu Squelettes et permet de choisir :

  • l’image de fond (via le menu Édition, ajouter l’image à la médiathèque puis indiquer le numéro du document)
  • les couleurs principales (sombre et vive) et du texte
  • la rubrique héro qui apparaîtra sous forme de grille sur l’accueil
  • la pagination de la grille rubrique héro (nombre d’articles à afficher dans la grille)
  • les informations de contact
  • les citation et description de pied de page
  • la longueur des introductions (250 caractères par défaut)
  • l’activation du multilinguisme par secteur

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

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-glass
       |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

Centre image

Le plugin Centre image permet de cibler le centre d’intérêt d’une image qui doit être recadrée.

Compositions

Le plugin Compositions 2 et 3 permet d’afficher certains articles avec colonne centrale étroite.

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.

Formulaire de contact

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

Menus

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.

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 4 October 2019

Discussion

3 discussions

  • 1

    Bonjour,

    Un problème sur le zip : c’est celui de Spectral

    <paquet
    	prefix="html5up_spectral"
    	categorie="squelette"
    	version="1.0.18"
    	etat="test"
    	compatibilite="[3.1.0;3.2.*]"
    	logo="prive/themes/spip/images/html5up_spectral-64.png"
    	documentation="https://contrib.spip.net/5166"
    	schema="1.0.0" 
    >
    	<!--Paquet généré le 2019-06-09 10:36:33-->
     
    	<nom>Html5Up Spectral</nom>
    	<!-- Squelette responsive «Spectral» de HTML5UP -->
     
    	<auteur lien='https://contrib.spip.net/cent20'>cent20</auteur>
    	<credit lien="https://html5up.net/spectral">HTML5UP (thème graphique)</credit>
     
     
    	<licence>GNU/GPL</licence>
     
    	<necessite nom="saisies" compatibilite="[3.23.2;]" />
     
    	<menu nom="configurer_html5up_spectral" titre="Configurer Spectral" parent="menu_squelette" icone="images/html5up_spectral-16.png" />
     
     
    </paquet>

    Reply to this message

  • 4

    Mon message n’est pas passé hier soir, bizarre. Je repasse sans les liens
    J’ai installé le plugin banque&paiement en complément de formidable.
    J’ai commencé par créer un type de page bank_retour_attente en ajoutant /squelettes/components/bank_retour_attente.html. Néanmoins cette page ne s’affiche pas corectement : la section du milieu ne contient pas son wrapper normal.
    Exemple de page normale + la page en question :
    Que dois-je faire de plus pour afficher d’une part le “recouvrement” du wrapper et d’autre part l’alignement correct du texte ?
    D’avance merci

    Reply to this message

  • Merci pour cette page de documentation. J’ai du explorer par moi même pour les 3 sites que j’ai fait avec ce plugin. Je commence à le connaître :)
    Pour le menu, j’ai essayé plein de choses, dont le plugin menus, mais j’ai du déclarer les éléments manuellement dans inclure\topmenu.html
    Je vais essayer de trouver un peu de temps pour suggérer des améliorations.

    Reply to this message

Comment on this article

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