SPIP-Contrib

SPIP-Contrib

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

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

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

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – 75 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 1er mai à 10:07, par rcaron En réponse à : Éditorial (HTML5UP)

    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

    Répondre à ce message

  • Le 29 avril à 09:20, par rcaron En réponse à : Éditorial (HTML5UP)

    Petit souci...

    Page exemple : http://actes-de-lecture.org/spip.php?article5

    Le sous-titre « Articles » ne se colle pas complètement à gauche...

    Une idée pour corriger ?

    Merci

    Robert

    • Le 1er mai à 02:31, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      C’est dû à la rédaction et à l’image flottante à gauche, et au fait qu’il y ait peu de texte après l’image. Vous pourriez empêcher les intertitres de suivre le flottement, mais ça ne conviendra peut-être pas à tous les coups non plus...
      En CSS h3 { clear:both; }

    • Le 1er mai à 10:04, par rcaron En réponse à : Éditorial (HTML5UP)

      Bon. J’ai agrandi les images et mis davantage de texte... Et ça va mieux. Merci

    Répondre à ce message

  • Le 26 avril à 11:06, par rcaron En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Comment supprimer les choix d’articles hero et majeur ?

    J’avais choisi des articles mais je ne souhaite plus utiliser ces deux fonctions et donc ne plus faire appel à des articles.

    Merci

    Robert

    • Le 26 avril à 11:29, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      c’est peut-être un point à améliorer dans SPIP, mais dans l’immédiat, il faut re-sélectionner un article pour pouvoir cliquer sur une petite croix rouge qui annule et vide la sélection...

    • Le 26 avril à 11:41, par rcaron En réponse à : Éditorial (HTML5UP)

      Super ! Merci

    Répondre à ce message

  • Le 23 avril à 10:44, par rcaron En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Comment réduire l’espace en haut du titre d’un article ou d’une rubrique...

    Je me perds sur les css

    Merci

    • Le 23 avril à 10:53, par chankalan En réponse à : Éditorial (HTML5UP)

      Je suis pas sûr d’avoir bien saisi, mais dans un nouveau fichier /squelettes/css/perso.css vous pouvez tenter de modifier les valeurs de cette règle :

      #main > .inner > section {
         padding: 5em 0 3em 0;
      }

    Répondre à ce message

  • Le 23 avril à 07:47, par rcaron En réponse à : Éditorial (HTML5UP)

    Je n’ arrive pas...

    Lorsque j’essaie de voir la structure d’une page avec ?var_mode=inclure je n’obtiens rien...

    Exemple : http://actes-de-lecture.org/spip.php?article4?var_mode=inclure

    Mais cela fonctionne sur http://actes-de-lecture.org/?var_mode=inclure

    Ce que je cherche à faire : supprimer la partie « laisser un commentaire » dans la page article...

    Merci de votre aide

    • Le 23 avril à 08:28, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      il y a 2 «  ? » dans la première url, il faut remplacer le second par un « & » et ça devrait mieux aller...

    • Le 23 avril à 08:34, par rcaron En réponse à : Éditorial (HTML5UP)

      En effet... C’est logique

      Merci ça marche beaucoup mieux

    • Le 23 avril à 08:37, par chankalan En réponse à : Éditorial (HTML5UP)

      Vous pouvez retirer les forums dans les squelettes, mais vous devriez commencer par ne pas activer les forum sur les articles, sur la page « configuration > forums » par exemple pour le faire sur tous les articles existants... sinon modifier l’option sur chaque page de chaque article.

    Répondre à ce message

  • Le 21 avril à 09:27, par rcaron En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Bravo, bravo.

    J’essaie de prendre en main ce squelette.
    Un souci que je ne comprends pas : le menu gauche n’est visible qu’en partie. Voir : http://actes-de-lecture.org/spip.php?article2

    Comment faire pour qu’il s’affiche normalement ?

    Un grand merci pour votre réponse !

    Robert

    Répondre à ce message

  • 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

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

  • Personnalisation graphique du squelette SoyezCréateurs

    19 août 2009 – 110 commentaires

    Il est possible de personnaliser l’affichage du squelette SoyezCréateurs de manière plus ou moins profonde. Changement dans les couleurs via CFG La page de CFG des couleurs de SoyezCreateurs : ecrire/ ?exec=cfg&cfg=soyezcreateurs_couleurs (...)

  • Visualiser un PDF dans un article

    13 juin – commentaires

    SoyezCréateurs utilise un modèle pour afficher un PDF dans e corps d’un article Un peu d’histoire Avant, les navigateurs n’incluaient pas de lecteur PDF nativement ce qui avait conduit à la création du plugin Lecteur pdf javascript pdf.js. Mais, (...)

  • Intégrer un calcul d’itinéraire dans une page

    9 mai – commentaires

    Ce modèle SPIP permet d’intégrer un calcul d’itinéraire dans vos articles. Attention, cet outil nécessite une clef d’API Google Maps ! Clef d’API Google Maps Muni de votre compte gmail, rendez-vous sur Obtenir une clé/authentification. Vous (...)

  • odt2spip v3+ : création d’articles à partir de fichiers textes

    11 octobre 2017 – commentaires

    Ce plugin permet de générer des articles SPIP à partir du téléversement de fichiers au format .ODT (OpenOffice ou LibreOffice Writer). Il gère la majorité des raccourcis typographiques, détecte les différents niveaux de titre et fait l’intégration des (...)

  • ORR v2

    21 mai 2013 – 102 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)