Éditorial (HTML5UP)

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/)
  • |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>

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.

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

updated on 5 November 2019

Discussion

54 discussions

  • 1

    J’ai essayé de définir dans la configuration du squelette un “article majeur”... Pour voir.

    Mais je n’arrive pas à vider ou annuler ce choix; Comment faire ?

    Merci

    Robert

    • Bonjour,
      oui, c’est pas très très ergonomique mais c’est signalé et ce sera prochainement amélioré, et donc pour retirer un article il faut en choisir un à nouveau pour voir la petite croix rouge qui permet de le retirer de la sélection...

    Reply to this message

  • 3
    Frédérique

    Bonjour,

    depuis aujourd’hui , derrière l’icône “bars” appelant le sidemenu, le terme “toggle” apparaît sous chrome (pas les autres navigateurs...) Je ne vois pas quoi faire. Auriez vous une idée?

    cette erreur apparaît aussi sur d’autres sites que le mien aviron-melun.com utilisant ce squelette.

    Merci de votre éclairage!

    • Frédérique

      Je me réponds, Je viens de trouver, j’ai modifié le js. En espérant que ça tienne la route. Merci!

    • Et comment avez-vous fait ?

      Merci

      Robert

    • Frédérique

      dans le plugin
      plugins/auto/html5up_editorial/v1.1.14/javascript/main.js

      j’ai remplacé la ligne 107 par :

      1. $('<a href="#sidebar" class="toggle"></a>')

    Reply to this message

  • 1

    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

    Reply to this message

  • 1

    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

    • 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

    Reply to this message

  • 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 ?

    Reply to this message

  • 3

    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

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

    • 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:>

    Reply to this 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

    Reply to this message

  • 5

    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 !

    • 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 ?

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

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

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

    • 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

    Reply to this 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

    Reply to this message

  • 8

    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

    • Pas de solution à mon problème ?

      Merci

      Robert

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

    • Merci pour votre réponse...

      Mais je ne vois pas où et quoi modifier.

      Vous pouvez m’en dire plus ?

      Merci

      Robert

    • 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

    • 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

    • 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

    • 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

    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