HTML5UP Éditorial

Publié le : 27 novembre 2017 – Dernière modification le 21 décembre 2021 – par chankalan – 371 commentaires

1
2
3
4
5
28 votes

Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial

Configuration

La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la page d’accueil et de la colonne gauche.

Sur la page d’accueil, le premier article est le « héro », le second est le « majeur ».

  • L’article héro : le titre, un résumé, le logo + un bouton « Lire la suite »
  • L’article majeur : le titre + l’introduction (ou le champ « Descriptif » s’il est activé dans la partie « Configuration > Contenu du site »).

En colonne gauche, un article « héro » est aussi désigné pour afficher son introduction (#INTRODUCTION), son logo et un lien vers la page de l’article.

Rédaction

Il est préférable d’activer les champs « Chapeau » et « Post-scriptum » pour bénéficier de plusieurs mises en formes : le champ « Chapeau » d’un article s’affiche en public en une colonne pleine largeur, le champ « Texte » s’affiche lui sur deux colonnes, et le champ « Post-scriptum » se déroule sur 3 colonnes.

L’article « majeur »

Pour rédiger le texte de l’article « majeur » (le second sur la page d’accueil), un modèle permet d’afficher comme dans le thème de départ une icône de FontAwesome avec un texte en bloc, deux blocs par ligne. C’est le modèle <iconebloc> qui prend quelques paramètres :

  • |icone=fa-rocket (ou tout autre icone de FontAwesome https://fontawesome.com/v4.7.0/icons/ avant la v1.3 de Editorial, ensuite c’est la version de Fontwesome 5 Free dans les catégories Solid/Regular/Brands -> precisions)
  • |iconetitre=le titre
  • |iconetexte=le texte
  • |left ou |right (positionner le modèle à gauche ou à droite)

<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>

On utilise sur la page d’accueil la balise #INTRODUCTION de l’article, et cette balise se décrit comme ceci : https://www.spip.net/fr_article902.html#INTRODUCTION
Elle va donc chercher d’abord le descriptif de l’article s’il existe, sans le couper, ce qui est très utile si on veut inclure des modèles. Il faut donc aller dans « Configuration > Contenu du site » pour activer le champ descriptif des articles, et faire l’inclusion des modèles à cet endroit pour qu’ils s’affichent sur la page d’accueil correctement.

L’article "héro" de la colonne gauche

Dans l’article "héro" de la colonne gauche, si on utilise le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visibles sur la page de l’article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l’article XX, avec les options suivantes :

  • |affichertitre=non
  • |afficherlien=non

Inclure des icônes dans les textes

Un dernier modèle permet d’insérer n’importe quelle icône de FontAwesome dans le flux d’un texte. Utilisez <icone> avec ces paramètres :

<icone|icone=fa-rocket|taille=50px>

Fontawesome 5 Free
Avec la version 1.3 de Editorial, Fontawesome 5 est utilisé : https://fontawesome.com/icons?d=gallery&p=2&s=brands,regular,solid&m=free
Les icônes s’appellent dès lors dans les modèles en ajoutant la valeur regular (ou rien), solid ou brands au paramètre icone, de cette manière :
<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>
ou
<icone|icone=fa-rocket solid|taille=50px>

Les icônes de réseaux sociaux

En utilisant le plugin "Liens vers les réseaux sociaux" (sociaux), vous aurez les icônes des réseaux que vous aurez choisis.

Formulaire de contact

En utilisant le plugin "Formulaire de contact" (contact), le formulaire sera présent en colonne gauche, automatiquement.
NB : À noter que l’activation des pièces jointes au formulaire cause un problème d’affichage dans la colonne trop étroite pour ce champ.

Conseils

Utiliser Court-Circuit pour éviter la page rubrique s’il n’y a qu’un seul article dans une rubrique.
Avec le plugin Pages, si un article désigné « héro », « majeur » ou « héro en colonne gauche » devient une « page unique », il n’apparaîtra plus dans le menu.

Nota Bene avant mise à jour

Pour suivre la mise à jour du plugin SCSSPHP, il a fallu mettre à jour le thème Éditorial, qui utilise une autre version de la librairie d’icônes Fontawesome.
v1.3.4 : La librairie Fontawesome passe en version 5, ce qui nécessite certainement de renommer les appels, cf les précisions.

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
La liste par ici...

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

102 discussions

  • Philippe ROCA

    Bonjour

    Super squelette, très propre, très clair ; Merci beaucoup ;

    J’ai constaté, que la classe « 4u 12u$(small) » n’avait pas d’effet pour élargir la colonne pour l’affichage sur téléphone.

    Pour résoudre le problème, j’ai modifié la lige 257 du fichier css/libs/_skel.scss
    Il faut passer « $x : ’\ \28’ + $breakpointName + ’\ \29’ ; »
    en « $x : ’\28’ + $breakpointName + ’\29’ ; »
    La compilation en main.css génère 2 \ qui bloquent l’effet voulu.
    Un idée pour la prochaine mise à jour.

    Bonne journée et encore merci
    Philippe

    Répondre à ce message

  • P. HOUPLON

    Merci pour ce squelette, particulièrement bien adapté à nos besoins associatifs.
    J’ai effectué quelques modifications, basiques, permettant d’intégrer les derniers commentaires et le classement des articles sur la colonne de gauche. J’ai également ajouté des informations pour chaque article : auteur, date, lecteurs.
    C’est à voir ici : http://www.aube-durable.fr/

    Répondre à ce message

  • Ysabeau

    Super merci pour ce squelette facile à paramétrer et pas uniquement grâce aux explications. Le coup de la couleur générale du site est une excellente idée.

    J’ai réussi à avoir exactement ce que je voulais (hourra) sauf que (ben oui), il y a bien trop d’espace au-dessus et au-dessous des logos de mes articles sur la page d’accueil et je ne sais pas du tout où corriger ça. Pour tout dire, je trouvais déjà que dans la VO avec l’article héro et l’autre, il y avait vraiment trop de blanc entre le titre et le texte.

    C’est là, au cas où :
    https://numericoach.net/

    Sinon pour infos, j’ai ajouté un fichier perso.css avec la couleur des titres et du texte que je voulais et modifié (évidemment) les pages.

    Répondre à ce message

  • 5
    SoirBleu

    Bonjour,

    Je teste ce très beau squelette (bravo pour ce travail).

    Pour le personnaliser un peu, je souhaite changer la police des liens et des titres (prendre tout simplement celle des textes. Quel fichier faut-il changer ?

    Par ailleurs, je souhaite modifier l’affichage du texte de telle façon que le champ « texte » ne soit plus que sur une seule colonne au lieu de deux. Quel fichier faut-il modifier ? Je suis un peu perdu.

    Je vous remercie pour votre aide

    • chankalan

      Bonjour,
      si vous pouvez créer un fichier squelettes/css/perso.css vous pourrez y indiquer les changements graphiques.
      Pour retrouver le texte sur une seule colonne vous pourrez indiquer par exemple :

      #main .texte { 
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	column-gap: 0;
}

      Et vous pourrez indiquer le changement typographique avec :

      #header .logo, #menu ul, h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans',sans-serif; }
    • SoirBleu

      C’est parfait ! Merci beaucoup.

      Une autre question : je ne trouve pas quel fichier il faut modifier pour que les titres des images intégrées dans les articles ne s’affichent plus...

      Merci

    • chankalan

      C’est peut-être juste l’utilisation du modèle <docN>, alors qu’avec le modèle <imgN> le titre n’apparaît pas... ?

    • SoirBleu

      j’utilise bien imgN et le titre apparait quand même...

    • SoirBleu

      Pardon j’utilise emb et non img afin d’avoir une image plein format.
      Quoi qu’il en soit le titre de l’image. Où faut-il aller pour supprimer l’affichage des titres des documents ?
      Merci

    Répondre à ce message

  • 2
    Pascal

    Bonjour,
    Très joli plugin que j’aimerais utiliser.
    J’ai un problème d’affichage ses images sur les écrans de smartphones.
    Parfois elles s’affichent, puis disparaissent, parfois elles ne s’affichent pas.
    Avez-vous une idée pour résoudre ce problème.
    _Merci

    • chankalan

      Bonjour,
      ça dépend potentiellement de plein de choses, hébergement ou images... dans la « Configuration > Fonctions avancées » vous avez bien choisi une méthode pour les vignettes ?
      Vous avez peut-être une url pour qu’on puisse voir ?

    • Pascal

      Bonjour,
      il semble que le problème ait été réglé par l’effacement avec un client FTP des répertoires TMP et local.
      J’avais installé (et désinstallés) des plugins traitant les images comme Adaptive images.

      Je vais pouvoir continuer.
      Merci de votre réponde.

    Répondre à ce message

  • 8
    Martin

    Bonjour
    et merci pour ce beau travail que je viens de découvrir par la force, l’ancien template n’est plus compatible avec SPIP3.2, puis je dois aussi changer tous mes articles configurés avec des onglets du couteau suisse.
    J’ai une question pour le formulaire contact - ses champs sont plus large que la colonne menu du thème - j’ai regardé un peu dans le plugin mais rien trouvé où régler la largeur des champs
    Une piste ?
    Sinon, est-il possible d’ajouter une bannière dans l’entête - qui serait derrière le nom et le menu langue ?

    Merci et bonne soirée
    Martin

    site : http://www.e-german-up.net

    • chankalan

      Bonjour,
      je pense qu’il faudrait essayer sans la barre d’outils, pour voir si c’est elle qui cause le débordement dans le champ d’édition de texte.
      Sinon il faudrait peut-être voir sans les autres plugins ?

      Pour modifier l’entête il faut modifier le squelette, et pour savoir quel fichier vous pouvez mettre à la fin du nom de domaine / ?var_mode=inclure ...

    • Maïeul

      @Martin : quel est l’ancien squelette. A priori s’il marchait en 3.1 il devrait marcher en 3.2 (même si pas forcément marqué comme compatible)

    • Martin

      @Maëul
      L’ancien a été sarkaspip - donc différent - je vais voir déjà sans la barre d’outil et puis merci aussi pour la réponse @chankalan

    • Maïeul

      La version 4 de SarkaSPIP est compatible 3.2

    • Martin

      Bonjour et encore merci pour vos messages
      je ne pense pas revenir à sarkaspip, et je vais finir par trouver la raison de ce débordement du formulaire contact - d’autant plus bizarre que dès la prévisualisation ça rentre dans l’ordre
      Bonne journée
      Martin

      http://www.e-german-up.net/

    • chankalan

      En regardant de près, c’est le champ « pièces jointes » qui cause ce soucis de débordement.
      Je vais regarder comment résoudre ça...

    • chankalan

      Il me semble que la solution ne peut pas reposer sur le seul plugin Editorial, mais sur le plugin Contact, car c’est lui qui déclenche le champ pour ajouter un document... la largeur est réduite et il n’y a pas de solution simple.
      Pour l’instant je vous conseille de ne pas chercher à utiliser ce champ dans Editorial, ou alors pas dans cette colonne. Vous pourriez déplacer le formulaire de contact dans le contenu d’une page, mais ça suppose de surcharger les fichiers du squelette...

    • Martin

      Attends, je vais enlever cela - ça avait un sens quand les étudiants m’envoyaient leur travaux par ce biais - donc aucune urgence
      Bonne journée

      Martin

    Répondre à ce message

  • 13
    nuages

    Bonjour
    J’obtiens les messages d’erreur ci-dessous.
    Une idée pour les résoudre ?
    Merci d’avance

    1 Aucun squelette head/ n’est disponible... plugins/z-core/structure.html / 14
    2 Aucun squelette head_js/ n’est disponible... plugins/z-core/structure.html / 14
    3 Aucun squelette header/ n’est disponible... plugins/html5up_editorial/body.html / 6
    4 Aucun squelette breadcrumb/ n’est disponible... plugins/html5up_editorial/body.html / 19
    5 Aucun squelette footer/ n’est disponible... plugins/html5up_editorial/inclure/sidebar.html / 2

    • chankalan

      Bonjour,

      il faut peut-être bien vider le cache, et vérifier que tous les plugins soient bien installés. Les téléchargements des plugins se sont bien exécutés ?

    • nuages

      Merci pour cette réponse. Il y a avait en effet un problème avec z-core. C’est maintenant réglé. En revanche, je ne parviens pas à comprendre l’explication sur <iconebloc>. Cela correspond-t-il aux éléments figurant sous l’intitulé « Erat lacinia » dans le site de démo ? J’ai ajouté le texte indiqué dans un article, mais aucune icone ne s’affiche.

    • chankalan

      Oui, c’est bien ça, et cette partie dans SPIP correspond à l’article « majeur » déterminé dans la configuration du squelette.
      On peut choisir les icônes, le titre et le texte de chaque bloc, et on peut en mettre autant qu’on veut.

      Par exemple <iconebloc|icone=fa-rocket> ça mettra l’icône de la petite fusée qui est celle-ci http://fontawesome.io/icon/rocket/
      On peut ajouter le titre et le texte en paramètre comme sur l’exemple plus haut... et puis choisir aussi si on le veut à droite ou à gauche.

      Le système est étendu à n’importe quel texte, partout dans le site, ça devrait s’afficher pareil...

      Est-ce que ça répond à la question ?
      Il est parfois nécessaire de recalculer les css avec les boutons d’admin...

    • nuages

      Merci pour les explications. En fait, il semble que les icones s’affichent bien quand on va sur l’article en question. En revanche, sur la première page, seul le titre de l’article s’affiche et le texte, mais pas l’icone. C’est assez étrange.

    • chankalan

      La page sommaire utilise la balise #INTRODUCTION de l’article, et cette balise se décrit comme ceci : https://www.spip.net/fr_article902.html#INTRODUCTION
      Elle va donc chercher d’abord le descriptif de l’article s’il existe, sans le couper. Il faut donc aller dans « Configuration > Contenu du site » pour activer le champ descriptif des articles, et faire l’inclusion des modèle à cet endroit.

      Sinon effectivement, la balise #INTRODUCTION va prendre dans le chapeau et le texte si besoin, en coupant le texte et en supprimant la mise en forme... ce qui détruit l’inclusion du modèle qu’on veut faire.

    • chankalan

      C’est vrai qu’il manquait cette explication dans l’article ci-dessus, je viens de le compléter...

    • nuages

      Merci pour vos explications et pour la rapidité de vos réponses. Cela marche très bien.

    • nuages

      Je me permets encore quelque questions : 1) Comment activer la barre d’icones vers les réseaux sociaux que l’on voit apparaître en haut de page du site de demo (au dessus de l’article hero) 2) Comment modifier la taille du titre de l’article hero 3) Comment faire pour supprimer le formulaire de contact dans la colonne de gauche (étant précisé que j’ai activé le plugin formulaire, car j’ai ajouté un formulaire dans un article. Merci par avance.

    • chankalan

      Bonjour,
      j’ai ajouté aussi quelques explications dans l’article concernant les réseaux sociaux et le formulaire.

      Pour ne pas afficher quelque chose, le formulaire par exemple, il faudra intervenir sur les squelettes du plugin. En faisant un ?var_mode=inclure à la fin d’une url de votre site, vous verrez quel fichier il faut surcharger...

      Pour modifier des styles et changer la taille d’un titre, vous pouvez utiliser la feuille de style perso.css à mettre dans le dossier /squelettes/css/

      ...

    • nuages

      Bonjour. Quel est le paramétrage qu’il faut modifier, dans perso.css, pour modifier la taille de l’interligne entre (i) le titre et (ii) le trait horizontal qui sépare, d’une part, le titre du site et, d’autre part, le slogan du site. Merci par avance.

    • chankalan

      Bonsoir,
      le plus facile pour le savoir, c’est de cliquer avec le bouton droit de la souris sur l’élément qu’on veut modifier, et de choisir « Examiner l’élément » (avec Firefox, sinon ça peut être une autre mention). Il devrait s’afficher un encart dans le navigateur ciblant l’élément html, et les règles css qui le stylent. Il reste à copier cette règle dans perso.css et la modifier ou ajouter une marge en haut ou en bas.... est-ce que vous connaissez un peu le langage css ?

    • nuages

      Merci bcp pour cette astuce. Je découvre un peu me langage CSS. Ma principale difficulté jusqu’ici était d’identifier les éléments à modifier dans perso.css. Je procédais par tâtonnement... Avec « Examiner l’élément » ce sera plus simple. Plus généralement, j’ai l’impression que sur mon site, les marges de la page principale sont plus espacées que celles du site de démo (par exemple, marge au dessous et en dessous de l’article hero et de l’article majeur). Je voudrais corriger ce point afin que la page d’accueil soit un peu plus condensée (à l’image du site de démo, dont je trouve les proportions très pertinentes.). Encore une fois merci pour votre réactivité

    • chankalan

      Je ne vois pas trop pourquoi il y aurait des différences d’affichage : est-ce possible d’avoir l’adresse du site pour voir ?

    Répondre à ce message

  • 3
    Nebelman

    Bonjour,

    Après avoir mis un article en « hero », je ne peux pas le démettre (seulement en choisir un autre). La seule solution que j’ai trouvée est de laisser un article et de le déplublier... Y-a-t- il une meilleure méthode ?

    D’autre part, j’ai un site avec des sous-rubriques et je souhaite que le menu latéral distingue en gras la sous-rubrique en cours d’affichage et pas seulement le secteur (dans la même logique que lorsqu’on se trouve dans une page article : l’article, sa sous-rubrique et son secteur apparaissent en gras dans le menu). J’ai essayé de bricoler le « inclure/sidemenu-rubrique.html » mais je n’ai pas réussi. Quelqu’un peut-il m’aider ?

    • chankalan

      Bonjour,
      normalement l’article choisi peut être retiré en cliquant sur la petite croix rouge à côté, mais c’est vrai qu’elle n’apparaît que si on vient de choisir un article et avant de valider le formulaire...
      Donc pour l’instant, pour le supprimer, il faut le sélectionner à nouveau pour cliquer la croix et valider enfin le formulaire.

      Pour les sous-rubriques, je regarde ce qu’il serait possible de faire...

    • chankalan

      La version 1.1.6 devrait corriger le problème, il faut attendre un peu pour qu’elle soit zippée...

    • Nebelman

      Merci pour vos réponses. Et pour ce très bon plugin !

    Répondre à ce message

  • 1
    nuages

    Bonjour
    Quelle est la bonne taille pour les photos ? En effet, je ne parviens pas à trouver le bon format : soit les photos sont trop grandes et elles ne s’affichent pas en totalité, soit elles sont trop petites et l’affichage de la photo de l’article héro, sur la page d’accueil, n’est pas proportionné à la taille du titre et au texte. Merci d’avance

    • chankalan

      Bonjour,
      sur le modèle de site d’origine, la photo semble de 736×512px, mais je crois qu’il faut accepter qu’elle soit recoupée dans certaines tailles d’écran... il faut trouver une image qui convienne...

    Répondre à ce message

  • 4
    Pierrot

    Bonjour,

    Après quelques 10aines (100aines ?) de sites spip, pour la première fois de ma vie j’utilise un template, certains de mes automatismes en sont tout chamboulés :-)

    J’ai en particulier fait des ajouts de javascript, je voudrais changer le modèle de base pour les doc, etc ... Pour éviter des pbms lors des mises à jours j’ai sorti le dossier du plugin du sous-dossier « auto » et hier, sans y penser j’ai fait une mise à jour du thème, bien sûr tout d’un coup mes modifs avaient disparues ... Etant donné que j’avais sorti le dossier de « auto », mon esprit a fait un raccourci et à dissocié le fait que j’avais utilisé le bouton « cocher toutes les mises à jour » pour faire la mise à jour ... je ne comprends pas comment mais cela a recréé un dossier html5up_editorial avec un sous-dossier de version dans le dossier « auto » et donc c’est apparemment celui-là qui était de nouveau pris en compte d’ou la disparition de mes modifs ...

    Bref, je ne cherche pas forcément à expliquer ce qui s’est passé même si je suis à peu près sûr que j’avais fait des modifs qui fonctionnaient et qui sont bien toujours dans le dossier qui est en dehors de plugins/auto, mais ma question porte plus sur la philosophie globale de la chose. Wordpress (aïe) propose un système de thèmes enfants, spip avec le dossier squelettes et consorts un système encore plus performant d’héritage ... mais comment doit-on faire dans le cas d’un thème sous forme de plugin pour pouvoir faire des modifs/ajouts qui ne seront pas écrasés lors d’une mise à jour ?

    Pour mon cas pour prendre un exemple précis je voudrai :
    -  des modèles spécifiques comme doc.html
    -  du js que j’ai actuellement dans perso.js

    Je précise que c’est un js qui traite des champs dans un formulaire formidable avec paiement donc c’est un cas particulier qui n’intéresse pas forcément la communauté (je dis ça pour ne pas avoir une réponse du genre « contribue au code comme ça tes modifs serviront à tout le monde » :-)

    Si une bonne âme veut bien m’éclairer sur ce sujet !
    Et merci à celui qui a réalisé ce plugin, super thème et belle adaptation à spip !

    Pierre.

    • ydikoi

      Salut Pierrot,

      Si tu transfères tes fichiers modifiés dans ton dossier « squelettes », ils prendront le pas sur le plugin associé, qu’il soit dans le dossier auto ou pas (et donc, sur ses mises à jour).

    • Pierrot

      Bonjour,

      Merci pour la réponse. Donc c’est valable pour tout ? je dois faire, exemples :

      modele : squelettes/modeles/doc.html
      css : squelettes/css/components/_fonts.scss
      css : squelettes/css/themes.scss
      js : squelettes/javascript/perso.js
      squelette : squelettes/content/article.html

      Ma question est de savoir s’il faut que je reproduise exactement à partir de « squelettes » toute la hierarchie spécifique du plugin genre breadcrumb/mot.html ou css/layout/_wrapper.scss pour que ça prenne le pas ou si je me contente de la hierarchie habituelle
      avec squelettes/css, squelettes/javascript, squelettes/modeles et squelettes tout court ..?

      Merci d’avance.
      Pierre.

    • ydikoi

      Il faut respecter la structure d’origine, à ma connaissance

    • Pierrot

      Ok merci, je vais tester ça :-)

      Pierre.

    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