SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 81 visiteurs en ce moment

Accueil > Squelettes > Squelettes spéciaux > ÉDITORIAL (HTML5UP) > Éditorial (HTML5UP)

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – 59 commentaires

15 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 http://fontawesome.io/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.

Voir en ligne : https://plugins.spip.net/html5up_ed...

Dernière modification de cette page le 26 janvier 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 27 mars à 09:56, par Philippe ROCA En réponse à : Éditorial (HTML5UP)

    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

  • Le 21 mars à 17:50, par P. HOUPLON En réponse à : Éditorial (HTML5UP)

    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

  • Le 16 mars à 16:38, par SoirBleu En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Je souhaite effectuer quelques modifications de présentation mais après quelques essais infructueux (rien ne change), je fais appel à votre aide.

    Quels fichiers faut-il modifier pour :

    -  sur la home page supprimer les « Lire la suite » et le mot « Article » ?
    -  sur la page rubrique : idem que la question précédente + réduire le nom de la rubrique voir le supprimer car c’est redondant avec le fil d’ariane ?
    -  changer le footer ?
    -  sur la page article, faire apparaître le nom de l’auteur et la date ?

    Je vous remercie pour votre aide.

    Dan

    Répondre à ce message

  • Le 6 mars à 17:38, par Ysabeau En réponse à : Éditorial (HTML5UP)

    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

  • Le 17 février à 18:00, par gus En réponse à : Éditorial (HTML5UP)

    Bonjour,
    Merci pour ce plugin. J’ai 2 questions pour lesquelles je n’ai pas trouvé de réponse.
    Est-il possible de ne pas faire apparaître le titre des articles dans le menu latéral gauche, mais uniquement les rubriques et sous-rubriques ?
    Où peut-on définir le nombre d’articles visibles sur la page d’accueil ?
    D’avance merci.

    Répondre à ce message

  • Le 14 février à 16:28, par SoirBleu En réponse à : Éditorial (HTML5UP)

    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

    • Le 14 février à 16:45, par chankalan En réponse à : Éditorial (HTML5UP)

      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; }
    • Le 14 février à 17:17, par SoirBleu En réponse à : Éditorial (HTML5UP)

      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

    • Le 14 février à 17:38, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 14 février à 17:44, par SoirBleu En réponse à : Éditorial (HTML5UP)

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

    • Le 14 février à 21:55, par SoirBleu En réponse à : Éditorial (HTML5UP)

      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

  • Le 8 février à 03:36, par Pascal En réponse à : Éditorial (HTML5UP)

    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

    • Le 8 février à 10:00, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ?

    • Le 8 février à 10:14, par Pascal En réponse à : Éditorial (HTML5UP)

      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

  • Le 20 janvier à 21:50, par Martin En réponse à : Éditorial (HTML5UP)

    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

    • Le 20 janvier à 22:24, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 20 janvier à 22:43, par Maïeul En réponse à : Éditorial (HTML5UP)

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

    • Le 21 janvier à 07:05, par Martin En réponse à : Éditorial (HTML5UP)

      @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

    • Le 21 janvier à 09:14, par Maïeul En réponse à : Éditorial (HTML5UP)

      La version 4 de SarkaSPIP est compatible 3.2

    • Le 25 janvier à 09:05, par Martin En réponse à : Éditorial (HTML5UP)

      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/

    • Le 25 janvier à 09:55, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 25 janvier à 12:02, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 25 janvier à 14:24, par Martin En réponse à : Éditorial (HTML5UP)

      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

  • Le 17 décembre 2017 à 15:01, par nuages En réponse à : Éditorial (HTML5UP)

    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

    • Le 17 décembre 2017 à 16:04, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ?

    • Le 17 décembre 2017 à 22:12, par nuages En réponse à : Éditorial (HTML5UP)

      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.

    • Le 17 décembre 2017 à 22:23, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 17 décembre 2017 à 23:30, par nuages En réponse à : Éditorial (HTML5UP)

      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.

    • Le 18 décembre 2017 à 08:51, par chankalan En réponse à : Éditorial (HTML5UP)

      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.

    • Le 18 décembre 2017 à 09:07, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 18 décembre 2017 à 13:13, par nuages En réponse à : Éditorial (HTML5UP)

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

    • Le 18 décembre 2017 à 23:15, par nuages En réponse à : Éditorial (HTML5UP)

      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.

    • Le 19 décembre 2017 à 08:39, par chankalan En réponse à : Éditorial (HTML5UP)

      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/

      ...

    • Le 9 janvier à 23:39, par nuages En réponse à : Éditorial (HTML5UP)

      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.

    • Le 9 janvier à 23:47, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ?

    • Le 10 janvier à 10:29, par nuages En réponse à : Éditorial (HTML5UP)

      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é

    • Le 10 janvier à 10:42, par chankalan En réponse à : Éditorial (HTML5UP)

      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

  • Le 2 janvier à 17:43, par Nebelman En réponse à : Éditorial (HTML5UP)

    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 ?

    • Le 2 janvier à 19:23, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 2 janvier à 23:11, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 3 janvier à 13:11, par Nebelman En réponse à : Éditorial (HTML5UP)

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

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Réservation d’événements

    16 mars 2015 – 389 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification Facteur (...)

  • En travaux 2.0

    15 mai 2009 – 71 commentaires

    À utiliser pendant une phase de maintenance, ce plugin affiche une page d’avertissement personnalisable, en lieu et place du site public.

  • Envoyer des fichiers avec un formulaire Formidable

    2 janvier 2017 – 57 commentaires

    La version 3.0.0 du plugin Formidable permet de créer des formulaires comprenant des envois de fichiers. Cet article regroupe la documentation relative à cette fonctionnalité. Pour une présentation générale de Formidable, voir « Formidable, le (...)

  • Grappes 1.0

    23 novembre 2012 – 33 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Cycle2

    7 août 2014 – 117 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)