HTML5UP Forty

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

Accueil
Rubrique
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.
Si vous ne souhaitez pas que cet article soit visible dans l’arborescence de votre site, vous pouvez utiliser 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=heart|primary=oui|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

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).

Évolutions

A partir de la version 0.4.12 il est possible de surcharger les couleurs de fond en recopiant la partie de définition des couleurs depuis css/main.css vers perso.css .

Par exemple :

:root{
	--Ebony-Clay:orange;
	--Viking: orange;
	--Blue-Bell:orange;
	--Apricot: orange;
	--Gold-Sand:orange;
	--Portage: orange;
	--DeYork: orange;
	--Martinique:orange;
	--Martinique2:orange;
	--Martinique3:orange;	
}

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

4 discussions

  • 2

    Bonjour,
    j’ai un soucis avec la pagination des secteurs sur la page sommaire,
    les logos des secteurs ne s’affichent plus à partir de la seconde pagination (problème ajax ? image adaptative ?).
    Pour charger les logos il faut recalculer la page entière : http://msforty/?debut_sommaire=2#pagination_sommaire&var_mode=recalcul
    spip 4.2.10
    Adaptive Images 3.2.0
    Font Awesome 1.0.5
    Html5up FORTY 1.0.0
    Saisies pour formulaires 5.4.0
    Z-core 3.0.7
    PHP 7.4.26 ou 8.1
    MySQL 5.7.36
    Apache 2.4.51
    Environement local wampserver x64 win7x64 FF 115.8esr x64
    logos en .webp de 1200x927(142ko) à 2592x1944(5,41mo)
    sinon c’est un super plugin, bien ficelé.
    Cordialement

    • Une alternative en attendant mieux :
      noisette : /inclure/accueil-rubrique.html

      <BOUCLE_sommaire(RUBRIQUES)
                  {racine}
                  {par titre, num titre}
                  {pagination #ENV{pagination,20}}>
      [(#SET{imgfloor,[(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}|supprimer_timestamp)]})]
       <article>
           <div class="link primary floor" style="background-image:url('#GET{urlfloor}');"></div>
      
        [(#REM) 
                  <span class="image">
                      [(#LOGO_RUBRIQUE|sinon{#CHEMIN{images/visuel_defaut.jpg}}
                                      |image_recadre{2:1, -, focus}
                                      |adaptive_images{1200})]
                 </span>
      ]
          <header class="major">
                 <h2><a href="#URL_RUBRIQUE" class="link">[(#TITRE|couper{30})]</a></h2>
                     #INTRODUCTION{100}
            </header>
      </article>
      </BOUCLE_sommaire>

      dans perso.css :

      #main article .floor{
      	opacity:0.6;
      	z-index:0;
      	background-position:center center;
      	background-size:cover;
      	background-repeat:no-repeat;
      }
    • Bonjour,
      Correction de cette alternative de dépannage qui casse le lien vers la page de la rubrique et provoque une 404.
      Pour le html :

      <BOUCLE_sommaire(RUBRIQUES)
                  {racine}
                  {par titre, num titre}
                  {pagination #ENV{pagination,20}}>
      [(#SET{urlfloor,[(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src}|supprimer_timestamp)]})]
       <article style="background-image:url('#GET{urlfloor}');">
        [(#REM) 
                  <span class="image">
                      [(#LOGO_RUBRIQUE|sinon{#CHEMIN{images/visuel_defaut.jpg}}
                                      |image_recadre{2:1, -, focus}
                                      |adaptive_images{1200})]
                 </span>
      ]
          <header class="major">
                 <h2><a href="#URL_RUBRIQUE" class="link">[(#TITRE|couper{30})]</a></h2>
                     #INTRODUCTION{100}
            </header>
      </article>
      </BOUCLE_sommaire>

      Pour le css : abandonner la classe floor.
      Pour le js, dans /javascript/main.js débrayer l’insertion du background aux ligne 132 et 225.

      // Set image.
      	//$this.css('background-image', 'url(' + $img.attr('src') + ')'); 

      Cordialement

    Répondre à ce message

  • Why my photos are opening as JPG ? How to apply some .js with box view ?
    https://radoslawsobik.pl/Fotografia-mebli-kuchennych-na-potrzeby-portfolio.html
    How to fix it ?

    Répondre à ce message

  • 1
    Nepthys Zwer

    Bonjour Jean-Marie,
    c’est pour te dire que mon site imago mundi utilise ton Forty et que c’est formidable !
    Nepthys

    Répondre à ce message

  • 4
    f Mattei

    Merci pour ces squelettes

    Comment faire pour afficher les sous rubriques dans le menu et dans la page rubriques..
    Quelle partie de squelette modifier ? je ne trouve pas

    Merci

    • Salut,

      le thème est prévu pour n’afficher qu’un seul niveau de rubrique (accueil > rubrique > article).

      Pour trouver dans quels fichiers faire tes modifs, il faut ajouter ?var_mode=inclure à l’adresse de la page en question (ou &var_mode=inclure selon le type d’url configurée). Voir https://www.spip.net/fr_article4453.html

      Ca donne :
      -  menu /inclure/nav-secteurs.html
      -  rubrique /content/rubrique-grille.html ou /content/rubrique.html

      jeanmarie

    • f Mattei

      Merci !
      je vais faire les modifs !

    • Bonjour

      Ayant également un site avec des secteurs et des sous-rubriques, j’avais fait les modifs suivantes :

      J’ai fait quelques adaptations pour que les pages des secteurs (sans articles, mais avec des sous-rubriques qui en ont) ne restent pas vides.

      -  Dans inclure/liste/articles_rub.html j’ai changé dans BOUCLE_articles
      id_rubrique par branche
      Cela affiche les articles des sous-rubriques.

      -  Je les ai fait précéder d’un sommaire (liste ) des sous-rubriques en ajoutant dans le fichier /content/rubrique.html
      la boucle suivante :

      <B_sous_rubriques>
       
      <div class="inner" >
      <h3>Au sommaire :</h3>
                <ul class="plan">
                   <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre}>
                            <li><a href="#URL_RUBRIQUE">#TITRE</a></li>
                   </BOUCLE_sous_rubriques>
                  </ul>
      </div>
      </B_sous_rubriques>

      -  J’ai également ajouté aux rubriques et aux articles un fil d’Ariane sur le modèle des squelettes de la « dist ».

      -> Rubrique

      <p><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_rubrique}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ &gt; <strong class="on">(#TITRE|couper{80})</strong>]</p>

      -> Article
      et dans
      /html5up_forty-c2ada-v0.4.5/content/article.html
      Après

      <div class="inner">
       <p class="info_publi">     [(#REM) Fil d'Ariane ]
                  <div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accueil_site:></a>
                            <BOUCLE_ariane(HIERARCHIE){id_article}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>
                            [ &gt; <strong class="on">(#TITRE|couper{80})</strong>]
                </div>
      </p>
    • Merci !
      C’est plus simple ainsi !

    Répondre à ce message

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