HTML5UP Éditorial

Publié le : 27 novembre 2017 – Dernière modification le 21 décembre 2021 – par chankalan – 373 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

  • 1
    rcaron

    Bonjour,

    Je cherche, je cherche et... je patine !

    Bravo pour ce superbe squelette ! Et un grand merci.

    Je travaille sur le site d’une revue : actes-de-lecture.org

    Ce que je cherche à faire :

    1) Dans le menu à gauche que l’affichage s fasse du plus récent au plus ancien. Quelle modification ? J’ai essayé dans sidemenu.html avec le code inverse à la ligne 15 sans résultat.

    2) Je souhaite que la page d’accueil affiche les rubriques (qui correspondent aux numéros de la revue) comme par exemple http://actes-de-lecture.org/spip.php?rubrique19

    3) Comment dans ce même exemple (http://actes-de-lecture.org/spip.php?rubrique19) ne pas avoir 2 filets après « En 2015 »

    Un grand merci pour votre aide.

    Robert

    Répondre à ce message

  • 1
    vga

    Bonjour,
    merci pour ce bel outil,
    1) je ne trouve pas sur quel fichier agir pour supprimer l’arborescence, nav.arbo
    2) je cherche à faire des modifs d’habillage...
    Je suis en local avec mamp, j’installe le fichier perso.css dans squelettes/css/perso.css
    mais aucune modif n’est prise en compte ?
    et si je copie les fichiers css du plugin pour les installer dans squelettes, quelqu’un peut-il me dire le chemin exacte pour que les modifs soient prises en compte ? car je n’y arrive pas non plus...
    un grand merci
    vga

    • Didier

      Bonjour,
      Pour le point :
      -  1 il faut intervenir sur tonsite/www/plugins/auto/html5up_editorial/v1.1.14/inclure/sidemenu.html
      -  2 c’est bien le bon chemin, il faut vider la cache de Spip (ou travailler sans le cache) et le cache de ton navigateur

    Répondre à ce message

  • capecarlate

    Bonjour et merci pour ce beau plugin

    J’ai installé récemment Editorial HTML5UP sur un site hébergé chez lautre.net, et j’ai des petits problèmes avec Font Awesome qui saute régulièrement. Tout redevient normale quand je recalcule la page ou les css, elle réapparaît (bizarrement une fois j’avais essayé de en vidant la cache mais sans succès).

    Lors de mes tests et de la personnalisation du plugin sur mon pc je n’avais pas remarqué ce problème alors que Editorial HTML5UP était installé avec les mêmes plugins activés que la version en ligne sur un SPIP 3.1.11.

    Je précise que je n’est pas installé le plugin article PDF qui j’ai lu perturbe la font.

    Par contre j’avais eu quelques problèmes à l’installation car un des sous domaine de mon compte chez lautre.net pointait sur une veille version de spip j’avais dû désactiver SCSS PHP puis supprimer un des fichiers de la cache avant de régler le problème puis de réinstaller certains plugins.

    Est de là que viendrait la source du problème ? La cache qui bug ? D’un autre plugin ?

    Répondre à ce message

  • 3
    Didier

    Bonjour,
    Merci pour ce plugin. Je souhaite le personnaliser et je ne trouve pas comment faire pour :
    1) sur la home du site et les pages sommaire des rubriques, enlever les bords ronds des images et des boutons « lire la suite ».
    2) sur la home du site et les pages sommaire des rubriques, enlever le terme « Articles ».
    3) sur la pagination des sommaires des rubriques, je n’arrive pas afficher les 220 articles d’une rubrique, la pagination en place présente juste 6 articles sur 6 pages.
    Merci

    • chankalan

      Bonjour,
      pour les petites modifications visuelles, le plus simple est d’utiliser des règles css dans une feuille de style squelettes/css/perso.css
      Sinon les squelettes du site peuvent être personnalisés, on peut les modifier en les enregistrant dans le dossier squelettes à la racine de son site : https://www.spip.net/fr_article3347.html#Votre-dossier-squelettes

      Ça nécessite d’avoir déjà quelques connaissances ou bien d’apprendre quelques petites choses sur le fonctionnement d’un site web...

      Pour Éditorial, le squelette est comme ceci : https://zone.spip.net/trac/spip-zone/browser/_squelettes_/html5up_editorial
      Vous pouvez copier l’un de ces fichiers pour l’enregistrer dans votre dossier squelettes à la racine du site, en respectant l’arborescence des sous-dossiers, et les modifications seront prises en compte dans votre site...

    • Didier

      Bonjour,
      Merci pour cette réponse. j’ai un site Spip depuis 2004, https://www.gualeni.com/, je ne suis pas développeur mais j’ai passé des nuits à bidouiller des feuilles de style d’au moins 4 « squelettes » pour changer une couleur, une largeur ou une hauteur, retirer des élément dont je n’avais pas besoin, en ajouter un autre. Chaque plugin est traité de façon différente et les noms des fichier à modifier ne sont pas toujours évidents. Ici par exemple, pour modifier le « footer » il faut aller dans footer/dist.html alors qu’il existe un fichier footer.html, bref quand on sait sur quel fichier intervenir c’est 100 fois plus rapide. Avant de poster cette demande, j’ai lu toutes les questions et réponses de ce forum. J’ai bien sur, dans « Squelettes » un perso.css, un spip.css, dans inclure un sidebar.html un sidemenu.html.
      J’ai mis dans perso.css
      .image img
      border-radius : 0.0em ;
      display : block ;

      Pour avoir des images avec des angles droits et
      .button border-radius : 0.0em ;
      background-color : #42977d ;
      color : #ffff !important ;

      Pour avoir des boutons à ma couleur avec une écriture blanche. Car en modifiant ces paramètres à partir de firefox avec « examiner l’élément », j’obtenais le résultat voulu. Mais visiblement cette syntaxe ou son emplacement n’est pas la bonne car cela n’a aucun effet sur les images et sur les boutons.
      Question 2 ) quels sont les fichiers à modifier pour la pagination des pages sommaires des rubriques car le comportement de la pagination de la home qui se règle en Bo n’est pas le même.
      question 3 ) quelle syntaxe dans quel fichier je dois supprimer pour ne plus faire apparaitre « Articles » en haut de la home et en haut de chaque rubrique sous le nom de la rubrique.
      Merci

    • Frédérique

      question 3 ) quelle syntaxe dans quel fichier je dois supprimer pour ne plus faire apparaitre « Articles » en haut de la home et en haut de chaque rubrique sous le nom de la rubrique.

      Dans inclure/articles.html
      supprimer <:articles :>

    Répondre à ce message

  • fredauger

    Bonjour,
    En souhaitant que vous vous portiez tous pour le mieux.
    Merci pour ce plug.
    Malgré maintes essais, impossible de faire fonctionner (sans conflit trouvé en admin) le plugin Composition ou même Variante de Squelette (article-ou=x.html)...
    Problème déjà rencontré ? Résolu ?
    En vous remerciant par avance et en croisant les doigts ;o)
    Sincèrement

    Répondre à ce message

  • 5
    Ras Rubenxela

    Bonjour
    J’avais jusque là un problème de comportement des icônes Font Awesome (loupe search, menu et celles intégrées) sur la version mobile d’un site. C’était systématique et à chaque fois cela générait un cache sans les icones. Par contre aucun soucis en version normale.
    Au cas où certain remarque la même chose, j’ai résolu le problème en surchargeant le fichier squelettes/css/perso.css avec le code suivant :

    #sidebar .toggle::before {

    font-weight: 900;

}

    En espérant que ça puise aider du monde.
    Bravo pour la pluginisation des thèmes html5up, c’est du très beau boulot.

    Ah si il y a un autre comportement css sur lequel je bloque et que je n’arrive pas encore à résoudre. L’article major sur la Homepage, donc le 1er, affiche une image mais pas le border-radius. Ce n’est pas grand chose mais c’est la seule image pour laquelle c’est ainsi. j’ai beau examiner et tenter de changer le comportement, je bloque !

    • chankalan

      Bonjour,
      je ne vois pas de soucis de border-radius sur l’image de l’article « majeur » sur la page d’accueil...
      Est-ce une image incluse dans le descriptif de l’article avec la balise img ?

    • Ras Rubenxela

      Non c’est le logo. je ne comprends pas non plus car le code semble okay et surtout que la radius fonctionne sur toutes les autres images de la page.

    • chankalan

      Je ne suis pas sûr.. normalement non, c’est le descriptif avec une balise img dedans qui fait l’image, enfin c’est ce qui est écrit ici https://contrib.spip.net/Editorial-HTML5UP-4947#s-Configuration
      et que j’ai testé tout à l’heure...

    • Ras Rubenxela

      Arf je me suis surement trompé sur la dénomination, je voulais en fait parler du premier article donc l’article Hero. Je suis d’accord cela fonctionne via la description avec l’article Major. Sur l’article Héro c’est bien le logo que j’utilise.

    • Ras Rubenxela

      J’ai résolu le problème. En fait c’était le redimensionnement de l’image qui empêchait (h & w à 100%) l’application du css border-radius. En faisant un redimensionnement préalable du logo à une taille convenable, je retrouve le border. Merci pour le temps que tu as pris. Amicalement

    Répondre à ce message

  • 1
    Pierre Jaillet

    Bonjour,

    Merci pour ce plugin vraiment bien fait.
    Je souhaiterais agrandir un peu le titre du site dans le haut de page. Où puis-je modifier son style ?
    J’aimerais aussi augmenter un peu le contraste du texte, dans quel fichier css agir ?
    Je n’ai pas encore bien compris toute l’arborescence des css.

    Et merci encore pour ce portage !

    Pierre Jaillet

    Répondre à ce message

  • 8
    rcaron

    J’avance, j’avance... Grâce à votre aide...

    Nouveau petit souci : Dans la page http://actes-de-lecture.org/spip.php?article8 par exemple, je renvoie à des fichiers pdf par des liens du type page X

    ça marche mais les pdf apparaissent à la fin de l’article dans la partie « Documents joints »
    Comment supprimer cet affichage qui fait doublon ?

    Un grand merci

    Robert

    • rcaron

      Pas de solution à mon problème ?

      Merci

      Robert

    • pamillet

      sauf erreur, en spip3 c’est un paramètre du plugin... article_pdf
      « Enregistrer et lier le pdf en tant que document »
      pam

    • rcaron

      Merci pour votre réponse...

      Mais je ne vois pas où et quoi modifier.

      Vous pouvez m’en dire plus ?

      Merci

      Robert

    • pamillet

      si vous avez bien le plugin « article-pdf », il faut aller dans la configuration/gestion des plugins, trouver la ligne article_pdf, cliquer sur l’cione des outils sur la droite, et il y a une seule ligne de configuration, qui doit être cochée chez vous et qu’il faut décocher...
      « Enregistrer et lier le pdf en tant que document »

      pam

    • rcaron

      Merci, merci...
      Cela ne règle pas mon problème. Je n’ai pas le plugin article_pdf installé.
      Mes pdf apparaissent en fin d’article alors qu’ils sont en lien dans l’article lui-même. Et je ne vois pas comment éviter ce doublon.

      Robert

    • pamillet

      donc en fait, c’est simplement ton squelette qui affiche (comme beaucoup de squelettes) les documents associés à un article en fin d’article... il faut donc le modifier... en gros, dans le fichier article.html de ton squelette, il doit y avoir une boucle « DOCUMENTS » à la fin...

      par exemple dans un squelette spipr blog, il y a dans article.html

      <aside>
		[(#REM) Gestion du portfolio et des documents ]
		[(#INCLURE{fond=inclure/documents,id_article})]
	...

      si tu enlèves ces deux lignes, les documents ne s’affichent plus... (dans aucun article !)

      pam

    • chankalan

      Ou il faut peut-être vérifier si inclure/documents.html a été modifié auparavant. Le squelette par défaut n’affiche pas les documents en double, celui de la dist comme celui de Éditorial...

    • Frédérique

      J’avais le même casse-tête. Afin qu’il n’y ait pas d’affichage de doc PDF en bas de page et que cela fasse doublon, j’upload les pdf dans IMG/pdf et je fais un lien dans l’article vers ce pdf et j’intègre une icone font awesome pour que ça fasse joli ;-)
      ex : <icone|icone=fa fa-file-pdf-o|taille=30px>Article du Parisien en PDF
      https://aviron-melun.fr/?Lu-dans-le-Parisien-du-17-mai-2019

    Répondre à ce message

  • 1
    rcaron

    Bonjour,

    Comment faire en sorte que les articles de la rubrique : http://actes-de-lecture.org/spip.php?rubrique6 s’affiche par date inverse ?

    Merci

    Robert

    • chankalan

      Bonjour,
      c’est à cause des numéros au début des titres. S’il n’y a pas de numéro au début des titres, ce sera un classement par date inversée, sinon c’est le numéro. Dans SPIP, le fait de mettre un point et un espace après le numéro va masquer le numéro, mais si on ne met pas de « . » le numéro est quand même présent.
      Dans cette rubrique ça fonctionne car les titres commencent bien par du texte : http://actes-de-lecture.org/spip.php?rubrique7

    Répondre à ce message

  • 6
    metaldark

    Bonjour,
    J’ai une erreur 404 (cad la page 404 qui s’affiche) lorsque je clique sur le logo du site ou dans la barre d’outil à gauche sur accueil.
    Je pense qu’il manque un fichier dans le plugin comme par exemple sommaire.html.
    Ou bien alors j’ai mal configuré ce qui peut être le cas.
    Merci d’avance pour aide.
    Je suis en spip 3.2

    • chankalan

      Bonjour,
      il faut peut-être vérifier que le plugin est entier et correctement téléchargé ?
      https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/sommaire.html
      Sinon, est-ce identique avec et sans plugins ?

    • metaldark

      Bonjour,
      Merci pour votre réponse.
      J’ai réinstaller mon spip de test, et tout est rentré dans l’ordre.
      Ce plugin est très intéressant, et j’aimerai le personnalisé pour l’adapter à nos besoins.
      Je souhaiterais par exemple agrandir l’affichage du logo spip et ajouter après le nom du site une image pour faire une bannière.
      Dans quelle partie du squelette, je dois procéder à ces modifications.
      Merci d’avance.

    • Metaldark

      Bonjour,
      merci pour toutes ces informations, j’avance dans ma personnalisation.
      Il me manque une information : dans quel fichier est géré la taille du logo de mon site ? Il est toujours réduit par rapport à l’original. Je souhaiterais pouvoir personnaliser cette réduction de taille.
      merci pour votre aide.

    • Fred

      Bonjour, l’affichage du logo du site est dans le header_dist.html

      Il faut modifier les infos de la ligne 2 en jouant sur les chiffres

      Quelqu’un a t’il réussi à intégrer un agenda dans ce plug-in ?

    • Frédérique

      J’ai intégré l’agenda avec son lien depuis inclure/sidemenu
      aviron.melun.fr

    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