PHANTOM (HTML5UP)

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.

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 2 October 2019

Discussion

13 discussions

  • 3

    Bonsoir,
    j’ai installé le plugin “Formulaire de contact avancé” mais impossible de faire partir le message. Il y a bien une prévisualisation (avec des chevauchements de textes au niveau du titre) mais le bouton “envoyer le message” ne fait rien, tout se grise et il ne se passe rien.

    • Bonsoir,
      Je viens de voir que la version 2.0 était en ligne sur https://plugins.spip.net/html5up_phantom
      j’ai testé, le formulaire de contact ne fonctionne pas, quand on veut envoyer le message tout se grise et rien ne se passe.
      Par ailleurs quand on a changé la couleur livrée par défaut #F2849E, et quand on saisi le texte dans les champs du formulaire une ligne apparait en dessous avec cette couleur d’origine.

    • Bonsoir,
      je pense que le problème d’envoi est de votre côté, je l’ai bien entendu testé et cela fonctionne très bien. Il faudrait peut-être avoir plus de précision sur votre hébergement, ou déjà si un formulaire de contact sur une page d’auteur fonctionne...

      Je vérifie cette bordure colorée...

    • Bonjour,
      Effectivement le problème venait de mon coté. En cochant “Utiliser la fonction mail de PHP” du plugin “Facteur”, ça fonctionne.
      Merci

    Reply to this message

  • 6

    Un grand merci pour ce beau plugin qui va enfin donner une allure dans le vent aux sites Spip.
    J’ai un site avec de très nombreuse galeries de photos (qui ne sont pas dans le portfolio).

    J’ai rencontré deux problèmes avec mon site.

    1) j’utilise le plugin Galleria https://contrib.spip.net/Galleria pour présenter les photos et le plugin ne fonctionne pas. La gallerie s’affiche mais les flèches pour faire défiler les images ne fonctionnent pas et le clic sur l’image ne la fait pas s’afficher en pleine page.
    2) Dans les rubriques les articles ne s’affichent pas dans l’ordre de publication, je n’ai pas trouvé à quelle règle d’affichage cela correspondait.
    Merci pour vos réponses.
    Didier

    • Bonsoir,
      Pour ce qui est du tri des rubriques, j’ai déplacé le “!” et ai changé le “par date” par “tri date,-1”.

      Par contre pour ce qui est de Galleria je ne trouve pas car cela fonctionne avec Edge pour toutes les galeries mais avec Chrome, Firefox et Brave certaines galeries fonctionnent et d’autres pas. Alors que sans ce plugin elles fonctionnent toutes quelque soit le navigateur.
      Didier

    • Après avoir vidé les caches Spip et des navigateurs les galleries Galleria fontionnent avec Edge, Chrome et Brave, par contre aucune ne fonctionne avec la dernière version de Firefox 61.02 (64 bits) (windows10)

      Dans le fichier Readme on nous parle d’une version v1.0.6 alors que le plugin est en version 0.1.3.
      On y lit "note de dév : Un problème js empêchait aléatoirement le script javascript/main.js de retirer la classe “is-loading” qui est placé sur la balise body (par ce même script). Ce petit soucis cause des problèmes plus gros dans l’interface.
      Un petit bout de code dans javascript/perso.js permet de retirer cette classe de manière plus sûre, mais c’est une rustine en attendant mieux."

      Il n’y a pas dans la version livrée de répertoire javascript/perso.js
      N’y a t-il pas un lien avec le problème que je rencontre avec Galleria sur Firefox ?

    • Désolé s’il reste des imperfections dans le squelette, mais c’est le cas : le message concernant le perso.js est issu d’un autre squelette (Editorial) et ne concerne pas Phantom. Je vais retirer ça dès que possible, plus peut-être d’autres nettoyages.
      Par contre, le soucis avec Galleria je ne vois pas, comme ça, ce qui pourrait causer les soucis sur Firefox uniquement... est-ce possible d’avoir une adresse pour tester en ligne ?

    • Bonsoir, je viens de tout réinstaller sur https://www.gualeni.com

    • Bonjour,
      en regardant les portfolios, il y en a qui me semblent fonctionner et d’autres pas.
      Dans la série figurines je n’en ai pas trouvé qui ne fonctionnent pas mais je n’ai pas tout inventorié, ou ailleurs celui-ci fonctionne aussi : https://www.gualeni.com/Le-tuyau-jaune.html
      et celui-ci aussi : https://www.gualeni.com/Emballes-3.html
      alors que là https://www.gualeni.com/Compteurs-2.html et là https://www.gualeni.com/Jesus.html ça ne fonctionne pas...

      Est-ce que les images ont une différence ? Un paramétrage identique ?

    • Merci pour ce retour.

      Galleria, par défaut n’est pas livré responsive, j’ai donc ajouté « responsive=true » dans certaines galeries. Quelque temps après, j’ai ajouté dans le plugin Galleria une syntaxe pour le rendre responsive par défaut sans être obligé de l’écrire dans chaque galerie et je ne suis pas repassé dans les galeries modifiées (dans modeles/galleria.html, à la suite de « responsive », j’ai remplacé false par true (à 2 endroits), Mais pour moi quelle que soit la syntaxe, rien ne fonctionne avec Firefox 61.0.2 64 bits. Pour info j’ai désinstallé le plugin Gallerai modifié et l’ai remplacé par celui d’origine et ça ne fonctionnait pas non plus.

      Dans « figurines », pour moi aucune galerie ne fonctionne, les images de « Figurines » et de « compteurs » sont plus anciennes et je les réduisais à 800 pixels de large alors que dans les galeries plus récentes, elles font 2000 pixels de large.

      Pour https://www.gualeni.com/Le-tuyau-jaune.html ne fonctionne pas la syntaxe est <galleria514|lightbox=true|transition=fadeslide|responsive=true, j'ai enlevé le « responsive=true » , ça a fonctionné 1 fois mais en rechargeant la page, ça ne fonctionne plus y compris en vidant le cache de Firefox. Idem pour https://www.gualeni.com/Emballes-3.html qui ne fonctionne pas pour moi la syntaxe est également <galleria466|lightbox=true|transition=fadeslide|responsive=true> je l’ai laissé ainsi. Pour <a href="https://www.gualeni.com/Jesus.html" class='spip_url spip_out auto' rel='nofollow external'>https://www.gualeni.com/Jesus.html</a> la syntaxe est <galleria338|lightbox=true|responsive=true> et ne fonctionne pas. Pour <a href="https://www.gualeni.com/Compteurs-2.html" class='spip_url spip_out auto' rel='nofollow external'>https://www.gualeni.com/Compteurs-2.html</a>, la syntaxe est <galleria461|lightbox=true|transition=fadeslide> et ça ne fonctionne pas pour moi.

      J’ai essayé sur un autre ordinateur avec win10 et la même version de Firefox et j’ai le même souci. En désinstallant « Phantom » et en réinstallant « Curalicious » (habillage de site spip) tout fonctionne normalement avec Firefox, idem avec le squelette de la dist.

    Reply to this message

  • 1

    Merci pour cette adaptation : SPIP manque de squelettes prêts à l’empoloi qui sont visuellement de qualité et ces portages de templates libres sont très utiles me semble-t-il. Avez-vous un exemple de site où il aurait été déployé en production s’il vous plaît ?

    • De rien, mais je n’ai pas encore mis un site en production qui utilise ce modèle... peut-être que d’autres ont des exemples... ?

    Reply to this message

Comment on this article

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