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

Dernière modification de cette page le 13 février 2019

Discussion

49 discussions

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

    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

    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

    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

    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

    Répondre à ce message

  • 1

    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

    • 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

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

    • 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

  • 2
    Frédérique

    Bonjour,

    merci pour ce squelette.
    Je cherche à harmoniser la page de connexion à l’espace privé avec le reste, mais ai du mal. quelqu’un a-t-il une piste ?
    Merci de votre aide.

    Répondre à ce message

  • 6

    Je ne comprends pas...

    Pourquoi à l’adresse http://actes-de-lecture.org/spip.php?article33 le menu de gauche n’est pas totalement visible ?

    Merci

    Répondre à ce message

  • 4

    Salut,

    merci pour le portage de ce thème, c’est important qu’on puisse avoir des thèmes prêt-à-l’emploi !

    On dirait que la police utilisée pour la titraille est Roboto (sans sérif) alors que celle du thème original (et le nom font-face dans le _font.scss) est Roboto Slab (sérif).
    C’est voulu ?

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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