HTML5UP Phantom

Squelette SPIP pour intégrer le modèle Phantom de HTML5UP.
https://html5up.net/phantom

Installation

A l’activation, le plugin installe aussi les plugins suivants :

Options

La page de configuration propose quelques options :

  • la couleur de la typographie
  • la couleur de survol des liens et autres accents colorés
  • la couleur d’arrière plan de la page
  • la couleur d’arrière plan du pied de page
  • la largeur du contenu : si les lignes longues nous gênent sur les grands écrans, une largeur maximale pour le contenu peut être définie.

Des pages uniques

Avec le plugin Pages on peut créer :

  • une page nommée “accueil” qui servira de texte sur la page d’accueil, au-dessus de la liste des articles choisis,
  • une page nommée “mentions” qui servira pour les mentions légales et sera liée en pied de page.

Les articles en page d’accueil

Le plugins Champs Extras est utilisés pour ajouter deux champs aux articles de SPIP. Lors de l’édition de n’importe quel article, il est alors possible de sélectionner l’article pour qu’il apparaisse sur la page d’accueil, et de définir un ordre de tri dans cette liste.

Les logos des articles sont utilisés pour l’image, et avec le plugin Couleur d’Objet, la couleur transparente par-dessus les logos est aussi configurable. Pour cela, il faut bien configurer ce plugin Couleur d’objet pour autoriser le choix de couleur sur les articles : retrouvez la page de configuration depuis la page d’administration des plugins, sur la ligne de Couleur d’Objet et l’icône à droite “marteau/clef à molette”, ou voir la page de votre site ../ecrire/?exec=configurer_couleur_objet
Le plugin Centre Image permet de cibler le centre d’intérêt d’une image qui doit être recadrée, ici au format carré.

La page d’une rubrique

Elle affiche les articles qu’elle contient de la même manière que les articles en page d’accueil, avec logos et couleur de l’article transparente.
Les sous-rubriques éventuelles sont listées dans le menu du site.

Les liens sociaux

Le plugin Liens Sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.

Le formulaire de contact

Le plugin Formulaire de contact avancé permet d’ajouter facilement un formulaire en pied de page.

Personnalisation

La feuille de style /squelettes/css/perso.css sera prise en compte pour personnaliser l’affichage sans perdre les mises à jour possibles.

Outils optionnels

Le plugins “Crayons” peut être très utile pour la rédaction depuis le site public.
Activer le plugin “Intertitres hiérarchiques” permet de rédiger avec des intertitres H2 jusqu’à H6 en gardant la mise en forme proposée par le thème Phantom : https://html5up.net/uploads/demos/phantom/elements.html.

Les objets éditoriaux et fonctionnalités de SPIP

Seuls les squelettes article.html et rubrique.html sont intégrés à ce squelette, avec les pages sommaire.html et plan.html
Les mots-clefs seraient certainement bien appréciés.
Les sites syndiqués, les forums ou les pétitions ne sont pas encore prévus.

Comme tout dans l’univers SPIP, il est possible à tout utilisateur de participer en proposant une amélioration.

Bon SPIP !

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP. Voyez la liste des squelettes HTML5Up adaptés pour SPIP.

updated on 10 July 2020

Discussion

18 discussions

  • Bonjour, impossible d’afficher des médias dans l’article quelque soit le modèle utilisé :

    <doc1|right> <img1|right> <emb1|right>

    Avez-vous une idée ? Merci
    https://amidesk.com/pdea/spip.php?article3

    Reply to this message

  • 2

    Bonjour,
    Dans quel fichier est le picto pour dérouler le menu ? C’est peut-être évident mais je ne le trouve pas... C’est pour lui mettre un style perso, là il reste en gris/rose malgré que j’ai mis les liens en vert.
    Merci et bonne journée,
    Yves

    • Bonjour,
      Ce n’est pas vraiment une image, En examinant le code via Firefox on voit que les 2 lignes du menu sont stylées via la classe :

      .inner nav.menu-head ul.mini li a

      et

      #header nav ul li a[href="#menu"]::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width:8px%3B stroke:%23f2849e%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
          opacity: 0;}

      donc il faut modifier main.css ou perso.css
      en ajoutant par exemple :

      #header nav ul li a[href="#menu"]
      {color:#000;}
    • Ok, merci pour ta réponse.
      Avec “inspecter l’élément” je n’avais pas trouvé...
      Bonne journée à toi,
      Yves

    Reply to this message

  • 1

    Bonsoir est je souhaite afficher 4 tuiles avec la même dimension et de supprimer l’espace blanc entre les tuiles pour ajouter une tuile j’ai ajouté dans mon perso. Css
    en remplaçant
    width: calc(33.3333333333% - 2.5em);
    Mais j’ai pas trouver le moyen de supprimer les espaces entre ? Si quelqu’un peut m’aider merci

    • Bonjour,
      c’est juste à côté dans les styles, sur .tiles article il faut mettre margin:0;
      Et ensuite ça fait pas très joli avec les agrandissements au survol, qu’il faut du coup certainement annuler...
      Bon SPIP !

    Reply to this message

  • 2

    Bonjour
    Je ne sais pas où je m... mais j’ai un article nommé “accueil” avec l’option “Sur l’accueil du site” cochée et à l’arrivée sur mon site j’ai simplement un cartouche avec le mot accueil affiché, pas la photo que j’ai mise dedans.
    Qu’est ce que j’ai loupé ?
    Bonne journée,
    Yves

    • Bonjour,
      est-ce que l’image est bien le logo de l’article ?
      C’est certainement le titre qui apparaît, mais avec l’option “Sur l’accueil du site” il apparaîtra dans la liste des articles sur la page d’accueil.
      Pour qu’il soit l’article dédié au texte d’accueil du site, il faut le transformer en “Page” et lui donner le nom de page “accueil”. cf Des-pages-uniques

    • Non l’image n’était pas le logo de l’article, là, elle l’est et du coup, ça marche nickel...
      Je comprend très vite, surtout quand on m’explique longtemps ;-)
      Merci pour ta réponse et bonne journée,
      Yves

    Reply to this message

  • 2

    Bonsoir,
    J’utilise ce squelette et le plugin Formidable. Il y a un problème pour les champs textarea : la hauteur est fixe, pas pratique pour la saisie.
    Voici le code généré :
    <div class="textarea-wrapper"><textarea name="textarea_1" class="textarea " id="champ_textarea_1" rows="1" cols="40" required="required" style="overflow: hidden; resize: none; height: 68px;"></textarea></div>

    Le code inline style="overflow: hidden; resize: none; height: 68px;" m’embête et je n’arrive pas à le surcharger.

    J’ai testé sur plusieurs sites et tous ceux qui tournent avec le plugin Phantom ont ce problème.

    Merci.

    Reply to this message

  • 18

    Après plusieurs mois d’utilisation, toujours aussi content de ce Plugin !
    Néanmoins, je vais avoir besoin de faire évoluer mon site très prochainement et je suis confronté à une limite : est-il possible, sur la page d’accueil, de répertorier des rubriques plutôt que des articles ?

    • Bonjour,
      oui, il faut modifier le fichier sommaire.html en le copiant dans le dossier /squelettes à la racine du site. https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_phantom/sommaire.html
      La partie concernée est celle-ci

      <section class="tiles">
                                              [(#REM) selection des articles choisis pour la page sommaire]
                                              #SET{articlesaccueil,#ARRAY}
                                              <BOUCLE_tblarticlesaccueil(ARTICLES){extras_accueil=on}>#SET{articlesaccueil,#GET{articlesaccueil}|push{#ID_ARTICLE}}
                                              </BOUCLE_tblarticlesaccueil>
                                              [(#REM) on boucle sur ce tableau]
                                                      <BOUCLE_articlesaccueil(ARTICLES){id_article IN #GET{articlesaccueil}}{par extras_ordre_accueil}>
                                                      <INCLURE{fond=inclure/btn_article,id_article} />
                                                      </BOUCLE_articlesaccueil>
      </section>

      il faudra remplacer les appels à la table ARTICLES par des appels à la table RUBRIQUES, puis extraire les bonnes informations en remplaçant
      <INCLURE{fond=inclure/btn_article,id_article} /> par ce qui convient aux rubriques... il faut peut-être lire des indications par ici : https://www.spip.net/fr_article904.html

    • Si tu arrives à faire apparaître les bonnes couleurs de rubriques sur les vignettes cela m’intéresse..

    • Merci beaucoup pour cette réponse très précise, c’est top ça !
      Je vais préparer un peu les changements et mettre ça en pratique assez vite.

    • Finalement, non concluant, je ne suis pas parvenu à modifier le fichier comme il faut. Pas assez compétent, je pense, je ne suis pas allé assez loin dans SPIP pour suivre les ramificatoins qui me permettraient de faire un travail propre. Je vais ruser et mettre des images associées à des liens sur la page unique “Accueil” pour rediriger vers les rubriques.

      J’en profite pour une autre question : je viens de changer les url de mon site et de passer à des url en arborescence. Depuis, le menu à droite ne s’affiche plus que sur la page d’accueil. Sur les autre pages, à la place des 3 traits horizontaux le mot “menu” et plus rien qui ne s’affiche. Est-ce que c’est lié au plugin ou vaut-il mieux que j’explore une autre piste ?

    • Dommage pour les boucles...
      Sinon je ne vois rien qui pourrait lier les urls arborescentes et un bug du menu. On pourrait voir le site en question ?

    • Concernant la boucle, j’y reviendrai de toute façon. Mais il faut d’abord que je réorganise mon site et c’est loin d’être la page la plus importante de mon site et ce n’est pas elle qui aide à son référencement.

      Voilà le site (en cours de restructuration, du coup) : https://www.stewencorvez.com/

    • Pour info, je viens de poser la question sur le forum au sujet du menu. Je viens de réaliser que c’est sûrement dû au fait que je viens de reconfigurer mes URLs.

    • Re,

      On tient une piste : ça pourrait venir d’une incompatibilité entre le plugin lui-même et les URLs en arborescence. Je vais réfléchir à la question et voir si je persiste à utilise PHANTOM (qui me plaît bien quand même) en mettant les mains dans le cambouis... ou si je repars sur des bases plus simples (à mon échelle).

    • Et je confirme : c’est bien les URLs en arborescence qui font planter le menu.

    • Problème réglé en passant par les URLs libres. Ce n’est pas tout à fait ce que je voulais, mais le principal y est : pouvoir renvoyer les gens vers les rubriques /mariage, /corporate et /blog facilement.

    • Bonjour,
      la version 0.2.9 devrait résoudre le problème du menu avec les urls arbo : https://zone.spip.net/trac/spip-zone/changeset/117968/spip-zone
      Merci tcharlss !

    • Oui, vu et mis en place ! Ça fonctionne très bien désormais. Merci à tcharlss !

    • Je commence en en voir le bout pour l’histoire des rubriques à la place des articles dans le sommaire.

      J’ai donc modifié le sommaire de cette manière :

      <section class="tiles">
      					[(#REM) selection des articles choisis pour la page sommaire]
      					#SET{rubriquesommaire,#ARRAY}
      					<BOUCLE_tblrubriquesommaire(RUBRIQUES) {par num titre}>#SET{rubriquesommaire,#GET{rubriquesommaire}|push{#ID_RUBRIQUE}}
      					</BOUCLE_tblrubriquesommaire>
      					[(#REM) on boucle sur ce tableau]
      						<BOUCLE_rubriquesommaire(RUBRIQUES){id_rubrique IN #GET{rubriquesommaire}}{par num titre}>
      						<INCLURE{fond=inclure/btn_rubrique,id_rubrique} />
      						</BOUCLE_rubriquesommaire>

      Puis j’ai créé le btn_rubrique

      <BOUCLE_rubrique(RUBRIQUES){id_rubrique}><rubrique class="style#ID_ARTICLE">
      	<span class="image">
      		[(#LOGO_RUBRIQUE|image_recadre{1:1,-,focus}|image_reduire{360,360}|vider_attribut{class})]
      	</span>
      	<a href="#URL_RUBRIQUE">
      		<h2>#TITRE</h2>
      	</a>
      </rubrique></BOUCLE_rubrique>

      Le titre des rubriques s’affiche et renvoie à la bonne rubrique. Me manque plus que la mise en forme, et je soupçonne, peut-être à tort, que la clé est sur cette ligne : mais je peine sur ça : class=“style#ID_ARTICLE”. Je suppose qu’il faut modifier le css quelque part pour l’adapter au titre de la rubrique. Je suis sur la piste, mais je suis preneur si vous avez un moyen plus rapide d’y arriver.

    • C’est parfait nickel sauf un tout petit détail : <article>..</article> est une balise html qui peut très bien contenir les informations de la rubrique.
      (<rubrique></rubrique> n’est par contre pas une balise connue à ce jour...o;)
      Donc il suffit de rétablir “article” dans cette balise et la mise en page sera magiquement revenue...
      Bravo pour l’adaptation !

    • il faudra vérifier peut-être le style#ID_ARTICLE et mettre style#ID_RUBRIQUE, puis mettre en lien avec le feuille de styles où la boucle pour les articles devra aussi être adaptée : https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_phantom/styles_config.css.html?rev=117975#L38
      C’est presque fini...

    • Bonsoir,

      J’ai moi aussi eu ce besoin pour les rubriques, je ne l’ai pas complètement résolu.
      J’ai ajouté dans styles_config.css.html :
      <BOUCLE_rubriques(RUBRIQUES)>[.tiles article.style#ID_RUBRIQUE> .image, .tiles article.style#ID_RUBRIQUE > .image:before { background-color:(#COULEUR); }]</BOUCLE_rubriques>

      Et mon btn_rubrique.html contient :

          <B_rub>
              <BOUCLE_rub(RUBRIQUES){id_rubrique}>
                  <article class="style#ID_RUBRIQUE">
                      <span class="image">                 [(#LOGO_RUBRIQUE|image_recadre{1:1,-,focus}|image_reduire{360,360}|vider_attribut{class})]
                      </span>
                      <a href="#URL_RUBRIQUE">
                          <h2>#TITRE</h2>
                          [<div class="content">(#DESCRIPTIF)</div>]
                      </a>
                  </article>
                  </BOUCLE_rub>
          </B_rub>

      La couleur de fond est bien celle de la rubrique (ou celle de son parent le cas échéant) SAUF s’il y a un article dans le site qui a le même ID que cette rubrique. (si l’article est une page unique cela fonctionne)

      C’est énervant..

    • Merci pour le coup de pouce, Chankalan !

      Effectivement DD, ça veut pas !

      Mais je vois bien que je ne suis plus très loin...
      Ça bloque encore sur le ID#RUBRIQUE...
      La nuit porte conseil, je verrai demain :-)
      En attendant, j’ai remis les articles en page d’accueil en plus des titres de rubriques... Histoire de moins perturber les nouveaux venus sur le site !

    • Et bien ça y est, ça fonctionne !
      J’avais juste corrigé le btn_rubrique du plugin au lieu d’aller corriger celui du dossier squelette, ce qui fait que ça ne prenait pas en compte mes modifications.

      Maintenant que j’en ai terminé avec la structure et le fonctionnement du site, je vais pouvoir passer à l’amélioration de l’habillage !

      Encore merci Chankalan, tes conseils auront été très précieux !

    Reply to this message

  • 1

    J’essaie d’adapter ce squelette pour avoir aussi des couleurs auto sur les rubriques.

    Dans le fichier de style squelettes/styles_config.css.html j’ai :

    <BOUCLE_rubriques(RUBRIQUES)>[.tiles article.style#ID_RUBRIQUE> .image, .tiles article.style#ID_RUBRIQUE > .image:before { background-color:(#COULEUR{parent,recursif}); }]</BOUCLE_rubriques>
    
        <BOUCLE_articles(ARTICLES)>[.tiles article.style#ID_ARTICLE > .image, .tiles article.style#ID_ARTICLE > .image:before { background-color:(#COULEUR{parent,recursif}); }]</BOUCLE_articles>

    et alors le bidule s’emmêle les crayons entre les articles et rubriques : si il y a un article avec le même ID qu’une rubrique (même hors de sa branche) alors cette rubrique prend la couleur de cet article et pas la couleur définie par la rubrique parente.
    Alors que les articles de la rubrique ont bien la couleur de la rubrique parente.

    Indice : si la rubrique à le même ID qu’une page unique cela fonctionne (au contraire d’un article “standard”).

    Dans le squelette btn_rubrique j’ai :

     <BOUCLE_rub(RUBRIQUES){id_rubrique}>
         <article class="style#ID_RUBRIQUE">
        <span class="image">      [(#LOGO_RUBRIQUE|image_recadre{1:1,-,focus}|image_reduire{360,360}|vider_attribut{class})]
        </span>
        <a href="#URL_RUBRIQUE">
            <h2>#TITRE</h2>
        </a>
        </article>
    </BOUCLE_rub>

    Comment faire pour différencier les ID rubriques des articles pour le choix de la couleur ?

    Merci

    • Bonjour,
      il faudrait que dans le code html il y ait une différence, avec une classe rubrique par exemple lorsqu’il s’agit d’une rubrique, pour pouvoir différencier des articles ensuite dans les styles...

    Reply to this message

  • 5
    Philippe

    Bonjour
    J’essaie d’ajouter un squelette spécifique type article-7.html pour une présentation.
    Or, je suis également en sites mutualisés (spip 3.2) et je n’arrive pas à ce que le squelette soit pris en compte!
    Placé dans squelette ou directement dans le répertoire du plugin.
    Quelqu un a t il une idée?
    Merci.
    Philippe

    • Bonjour,
      article-7.html c’est bien pour les articles de la rubrique 7 ?

    • Philippe

      Bonjour,
      tout à fait !
      En principe cela fonctionne bien, sauf avec ce plugin!
      C’est la 1ere fois au j’utilise un plugin pour un thème !

    • Est-ce que le fichier article.html du plugin est bien copié dans le dossier squelettes ? Sa présence est nécessaire pour que squelettes/article-7.html soit considéré...

    • Philippe

      Bonjour
      Oui pour article.html.
      Pour être complet, le site est mutualisé (plugin mutualisation ) et multilingue (2 langues)
      Donc j’ai adapté article, rubrique et sommaire pour ajouter lang, le tout dans squelettes. De même avec bt-article et menu dans squelettes/inclure.
      En réalité, le but de la manip est d’avoir un article unique (plusieurs en fait) pour les 2 langues : j’ai pensé à la création d’un squelette article spécifique.
      Les articles en questions ne sont constitués que d’images ou films qui peuvent évoluer: un seul article à mettre à jour pour les 2 langues !
      Trop optimiste ou mauvaise option ?

    • Philippe

      Bonjour,
      Je devais être fatigué, ou une mauvaise manip!!
      Bref, cela fonctionne comme prévu ! ( article-7.html bien pris en compte )
      Merci à Chakalan.

    Reply to this message

  • 4

    J’arrive à faire à peu près ce que je veux. Merci pour ce modèle élégant.
    C’est dommage d’avoir des ! important dans le fichier css du plugin car cela oblige à pas mal de hacks pour adapter les styles par défaut du modèle (par exemple avoir une couleur d’accent différente pour les :hover et pour les .on

    • Bonjour,
      généralement j’utilise en tout dernier recours ces règles, et sans avoir vérifié je pense que ça vient du thème Phantom lui-même...
      Ce sont quelles règles exactement ?

    • Oui il y a dans main.css pas mal de color: #xx !important;

    • Oui, c’est le thème qui donne cette feuille de styles, je ne suis pas sûr que ce soit bien de la modifier...

    • Du coup j’ai copié main.css dans mon dossier perso pour le modifier.

    Reply to this message

  • 7

    Merci pour cette adaptation vraiment réussie ! J’utilise ce plugin depuis quelques mois et j’en suis vraiment très content. Cependant j’ai un petit soucis concernant l’affichage des galeries du plugin Albums 3 sur mobile (aucun souci sur PC). En effet, certains images dépassent du cadre, et d’autres non. Je n’arrive pas à identifier la source du problème. Merci d’avance pour votre aide, n’hésitez pas à me demander plus de précisions si ma description ne vous parait pas claire.

    Reply to this message

Ajouter un commentaire

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