HTML5UP Phantom

Publié le : 18 juillet 2018 – Dernière modification le 22 mars 2023 – par chankalan – 105 commentaires

1
2
3
4
5
12 votes

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 (ecrire/?exec=configurer_html5up_phantom) 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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

13 discussions

  • 18
    Stewen

    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 ?

    • chankalan

      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

    • DD

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

    • Stewen

      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.

    • Stewen

      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 ?

    • chankalan

      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 ?

    • Stewen

      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/

    • Stewen

      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.

    • Stewen

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

    • Stewen

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

    • Stewen

      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.

    • chankalan

      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 !

    • Stewen

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

    • Stewen

      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.

    • chankalan

      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 !

    • chankalan

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

    • DD

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

    • Stewen

      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 !

    • Stewen

      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 !

    Répondre à ce message

  • 1
    DD

    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

    • chankalan

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

    Répondre à ce 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

    • chankalan

      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 1re fois au j’utilise un plugin pour un thème !

    • chankalan

      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.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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