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.

Discussion

23 discussions

  • Bonjour,

    Bizarre, 2 ans après je constate le souci décrit plus bas (HTML5UP Phantom sur le menu burger qui disparait sur les autres pages que l’accueil ... et de la même façon en URLs libres c’est bon, en URLs arbo c’est cassé. Tout est à jour dans ce spip 3.2.15 avec Phantom 0.3.0.
    (c’est la 2ème fois que j’ai un souci avec URL’s arbo en 15 jours, le précédent c’est la petite croix des infobulles de GIS qui retourne à l’accueil du site en URL arbo et ok en URL libres, le souci a été identifié comme un bug de leaflet 1.8, mais néanmoins ça me pose question sur la fragilité et la sensibilité d’URL arbo que j’utilise pas mal ...)
    Pierre

    Reply to this message

  • C’est bizarre en 2022 je retrouve le probleme des URLs arbo decrit plus bas HTML5UP Phantom , le menu qui disparait sauf a l’accueil, meme solution. (Spip 3.2.15 et Phantom 0.3.0)

    je commence a vraiment douter des URLs arbo suite a un pbm similaire il y a 15j sur leaflet/GIS (cliquer sur la petite croix d’une infobulle ramene a l’accueil) identifié comme un bug leaflet 1.8 mais aussi corrigé par URLs libres, URLs arbo semble super sensible, ça m’inquiete je l’utilise partout.

    Reply to this message

  • 3

    Bonjour,
    J’adore ce plugins mais il est obsolète pour la nouvelle version 4 de spip... Y’a-t-il une possibilité pour qu’il soit mis à jour ? Je n’ai malheureusement pas assez de compétences pour aider à ce niveau.
    En tout cas merci !

    • Bonsoir,
      ça ne devrait pas poser de problème, si personne ne le fait avant, je tenterai de le faire dans la semaine prochaine...

    • Bonjour,
      J’ai passé un site avec ce squelettes en SPIP 4.0.6 et ça marche !
      J’ai changé la borne dans paquet.xml en
      «compatibilite="[3.1.0;4.0.*]»

    • Effectivement en faisant cette manip, cela fonctionne. Merci !

    Reply to this message

  • 1

    Bonjour
    y aurait-il une incompatibilité entre le couteau suisse et l’insertion de carte Gis ?

    Page dans laquelle la carte n’apparaît pas en fonction de l’activation du couteau suisse.

    Page avec une carte

    Merci de vos réponses
    Cordialement

    • Bonjour,
      je ne sais pas du tout, il faut demander sur la page du couteau suisse ou de gis...

    Reply to this message

  • Salut!

    Dites-moi, s’il vous plaît, je ne trouve pas dans les fichiers css où changer la taille de la vignette. Je voudrais les rendre non pas carrés mais rectangulaires.

    Magnifique squelette! Je vous remercie!

    Reply to this message

  • 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

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

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