SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 83 visiteurs en ce moment

Accueil > Squelettes > Squelettes spéciaux > PHANTOM (HTML5UP) > PHANTOM (HTML5UP)

PHANTOM (HTML5UP)

18 juillet 2018 – par chankalan – 32 commentaires

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

Voir en ligne : https://plugins.spip.net/html5up_phantom

Dernière modification de cette page le 18 juillet 2018

Retour en haut de la page

Vos commentaires

  • Le 20 août à 09:29, par Didier En réponse à : PHANTOM (HTML5UP)

    Bonjour,
    Après avoir passé pas mal de temps sur mon site a essayer d’adapter ce plugin, voici quelques améliorations à envisager :
    -  Mettre un "P" majuscule à "plan du site" en bas de page (j’ai tenté de le faire mais ça ne fonctionne pas).
    -  Désinstaller automatiquement le plugin "Spip Reset" quand on, désinstalle « Phantom » car on retrouve un site qui est intégralement en page 404 ! (et ça prend pas mal de temps pour en trouver la raison quand on ne connait pas ce fameux plugin).
    -  Classer les articles et les contenus des rubriques du menu par ordre de publication, le plus récent avant (l’ordre alphabétique n’a pas vraiment d’intérêt).
    -  Retirer la croix blanche sur les images cliquables qui apparait avant le roll over, ça donne l’impression que ce sont des images de démo et ce n’est pas très beau (je n’ai pas réussi à le faire).
    -  Dans le plan du site, ne pas mettre la même taille de police pour le nom de la rubrique que pour "Article". Voir retirer "Article" et mettre une taille de police de plus en plus petite pour le nom de la rubrique, du nom de la sous rubrique, le nom de l’article
    -  Comme il n’y a pas de vision du contenu du site (autre que le plan du site), l’installation d’une fenêtre de moteur de recherche serait vraiment bienvenue.
    -  Personnellement j’ai retiré tous les titres en majuscules sur les images car les majuscules sont moins lisibles.
    -  Corriger le problème avec le plugin Galleria sous Firefox (le plus problématique pour moi).
    -  Corriger le problème avec le plugin « Formulaire de contact avancé » signalé il y a quelques jours. J’ai contourné le problème en renseignant mon adresse mail dans le plugin "Liens vers les réseaux sociaux".
    Merci de me dire si tout cela est possible assez rapidement ? Ou si non comment le faire.

    • Le 21 août à 07:26, par Gualeni En réponse à : PHANTOM (HTML5UP)

      Deux points à ajouter
      -   Quand on change la couleur par défaut des liens les barres du menu burger et les croix pour fermer le menu en question restent avec la couleur d’origine de livraison.
      -   Il me semble indispensable de dater les articles.
      Merci

    • Le 21 août à 23:58, par chankalan En réponse à : PHANTOM (HTML5UP)

      Bonjour,
      Merci de vos retours et tests...
      je suis d’accord sur certains points et pas sur d’autres. Le modèle d’origine fait certains choix qu’on ne peut pas remettre en question dans une intégration générale. Mais si certains utilisateurs veulent personnaliser, il est tout à fait possible de faire ces modifications seulement pour son site...

      Le fil d’ariane est absent comme les dates, c’est un parti pris dans Phantom de faire assez sobre il me semble.
      Pour le champ de recherche aussi, enfin ce serait certainement bien de l’avoir mais surtout je n’ai pas le temps en ce moment de chercher une vraie solution...

      Je viens de corriger la mise en forme du formulaire de contact en pied de page + la couleur des boutons du menu latéral.
      Pour le classement des articles dans le menu, je propose une solution assez souple de trier par numéro de titre d’il y en a, sinon par date inversée. Identique pour la liste des articles en page rubrique.
      J’ai tenté de corriger les petites coquilles et pour le plan du site, j’ai fais au mieux mais simple.
      J’ai aussi mis le plugin « typographie enluminée » qui permet sans rien changer dans la rédaction, d’avoir des intertitres correctement hiérarchisés.

      Par contre, je ne connais aucun moyen de désactiver un plugins en même temps qu’un autre. Ça sera encore à l’administrateur de choisir de les désactiver...

      Les croix blanches sur les logos me semble un parti pris dans Phantom, donc il faudrait faire la modification dans votre squelettes/css/perso.css :
      .tiles article > .image::after { background-image:none; }

      Je suis désolé mais je n’ai pas le temps en ce moment de me pencher sur le problème avec Galleria que je ne connais pas du tout...

      Toutes les modifications devraient être dans la version 0.2.0 du plugin, bientôt en ligne...

    • Le 22 août à 21:32, par Didier En réponse à : PHANTOM (HTML5UP)

      Merci pour ces réponses et les évolutions à venir. J’ai pu retirer l’image de fond en croix et ajouter la date en faisant un copié collé d’un autre plugin. En définitive, j’ai désactivé Phantom car pour moi le problème avec Galleria est trop important.
      Si quelqu’un a une solution, je suis preneur.

    • Le 23 août à 00:47, par chankalan En réponse à : PHANTOM (HTML5UP)

      J’ai pris le temps de tester Galleria de mon côté, et je ne vois rien de bloquant dans l’usage par défaut, le diaporama est bien fonctionnel dans Firefox... avez-vous l’occasion de tester sur une instance neuve de SPIP avec les plugins minimums et non modifiés ?

    • Le 23 août à 16:46, par Didier En réponse à : PHANTOM (HTML5UP)

      Bonjour,
      J’ai installé en local Spip et les plugins en « auto ». J’ai créé quelques articles et des galeries à partir des mêmes images et tout fonctionne sous Frirefox !!!!

      J’ai tenté d’y importer la base et les images mais j’ai renconrté de gros problèmes de récupération de la base.

      J’utilise Spip depuis 2004 et il y a peut être des fichiers anciens qui trainent. Depuis que Spiploader existe je fais les MAJ avec cet outil.

      En tout cas merci d’y avoir passé du temps.

    • Le 23 août à 17:14, par chankalan En réponse à : PHANTOM (HTML5UP)

      14 ans sans problème c’est déjà pas mal, et puis là c’est pas forcément grave non plus...

    • Le 25 août à 16:33, par Didier En réponse à : PHANTOM (HTML5UP)

      J’ai passé des jours et des nuits à essayer d’adapter des squelettes sur les 14 ans en question et a me faire peur avec des grosses erreurs sur le site ou le site qui ne marche plus du tout (là par exemple je viens de changer le mot de passe à l’accès à la base sur phpMyadmin et plus rien ne fonctionnait, c’est le support OHV qui m’a indiqué qu’il fallait aussi le modifier dans le fichier config.php...).
      Aussi je viens de passer pas loin de 20h00 a faire migrer ma sauvegarde en provenance d’une base Mysql4 vers une base en local en Mysql5. Il faudra que je le fasse de toute façon sur le site en production. Une fois qu’on sait ce qu’il faut remplacer c’est assez simple à faire.

      Bref sur le site en local avec tout mon contenu et toutes les galeries « Galleria » fonctionne bien sous Firefox avec le plugin Phantom. J’en arrive à penser que cela provient peut être de la version de Mysql j’ai remplacé dans la sauvegarde, TYPE=MyISAM par ENGINE=MyISAM et `maj` timestamp(14) NOT NULL, par un `maj` timestamp NOT NULL,

    • Le 19 octobre à 15:29, par Didier En réponse à : PHANTOM (HTML5UP)

      Bonjour,
      J’ai passé le site en ligne en mysql5 et ça ne marche pas avec Firefox !
      Sur PC tout marche bien sur Edge. Sur Chrome,c’est aléatoire, en rechargeant la page ça se débloque. Avec Firefox aucune galerie ne fonctionne. J’ai essayé sur un autre PC qui a la même version de Windows (10) et de Firefox et de Chrome et c’est identique. Par contre quand on n’est pas sur Windows, à savoir sur un iphone ou un ipad, tout fonctionne sur tous les navigateurs, idem sur une tablette Android.

      Donc la question est de savoir qu’est ce qui peut bloquer l’action de défilement des images (par clic) qui soit différent sur Wamp et chez OVH dans un environnement Window que Firefox et parfois Chrome ne supportent pas quand le plugin Phantom (exclusivement) est installé ?
      Didier

    Répondre à ce message

  • Le 20 septembre à 00:54, par ivandps En réponse à : PHANTOM (HTML5UP)

    Bonjour,
    merci pour ce squelette prometteur.
    Est-il normal que les modèles suivant

    1. <carte_gis1|objets=articles|id_rubrique=1|zoom=16|limit=100|scale=oui|autocenterandzoom=oui>
    2. <media10|vignette|right>

    Télécharger

    insérés dans le texte d’un article, n’affichent rien ?
    Merci

    • Le 20 septembre à 08:57, par chankalan En réponse à : PHANTOM (HTML5UP)

      Bonjour,
      il faut avoir activé certains plugins qui doivent générer ces modèles... GIS et Modèles Média ???

    • Le 20 septembre à 09:37, par ivandps En réponse à : PHANTOM (HTML5UP)

      Merci de la réponse. Of course ;-) c’est pour cela que je ne comprends pas ce qui se passe...

    • Le 20 septembre à 10:23, par chankalan En réponse à : PHANTOM (HTML5UP)

      sans le squelette Phantom ça marche ? juste sur le squelette-dist ?

    • Le 21 septembre à 13:17, par b_b En réponse à : PHANTOM (HTML5UP)

      Salut, le plus efficace serait de nous donner l’adresse de la page qui pose problème pour qu’on puisse t’aider.

    • Le 21 septembre à 23:25, par ivandps En réponse à : PHANTOM (HTML5UP)

      Bonjour
      voici l’adresse
      Sous le mot carte il y a le code d’insertion de la carte et du media 10
      Merci

    • Le 25 septembre à 11:45, par chankalan En réponse à : PHANTOM (HTML5UP)

      Bonjour,
      mais du coup, est-ce que ça marche en désactivant tous les plugins sauf ceux strictement nécessaires ?

    • Le 26 septembre à 09:54, par ivandps En réponse à : PHANTOM (HTML5UP)

      La réponse est oui : cela fonctionne avec uniquement les plugins GIS, Saisies pour formulaires et Modèles media

    • Le 26 septembre à 14:28, par chankalan En réponse à : PHANTOM (HTML5UP)

      J’ai testé de mon côté et je n’ai de problème ni avec l’un ni avec l’autre, avec ou sans Phantom... je ne vois pas trop comment trouver l’origine du problème...

    • Le 28 septembre à 10:02, par ivandps En réponse à : PHANTOM (HTML5UP)

      Merci d’avoir essayé. Je sais qu’une fois b_b m’avait dépanné en allant directement voir dans le moteur... ;-)

    Répondre à ce message

  • Le 15 août à 23:22, par Didier En réponse à : PHANTOM (HTML5UP)

    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.

    • Le 22 août à 22:36, par Didier En réponse à : PHANTOM (HTML5UP)

      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.

    • Le 23 août à 00:37, par chankalan En réponse à : PHANTOM (HTML5UP)

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

    • Le 23 août à 16:51, par Didier En réponse à : PHANTOM (HTML5UP)

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

    Répondre à ce message

  • Le 12 août à 23:34, par Didier En réponse à : PHANTOM (HTML5UP)

    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

    • Le 14 août à 23:22, par Didier En réponse à : PHANTOM (HTML5UP)

      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

    • Le 15 août à 23:18, par Didier En réponse à : PHANTOM (HTML5UP)

      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 ?

    • Le 19 août à 22:54, par chankalan En réponse à : PHANTOM (HTML5UP)

      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 ?

    • Le 19 août à 23:27, par Didier En réponse à : PHANTOM (HTML5UP)

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

    • Le 20 août à 10:12, par chankalan En réponse à : PHANTOM (HTML5UP)

      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 ?

    • Le 20 août à 11:30, par Didier En réponse à : PHANTOM (HTML5UP)

      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.

    Répondre à ce message

  • Le 12 août à 08:51, par Valéry En réponse à : PHANTOM (HTML5UP)

    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 ?

    • Le 19 août à 22:47, par chankalan En réponse à : PHANTOM (HTML5UP)

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

    Répondre à ce message

Répondre à cet article

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

  • SkelEditor 2.0

    1er mars 2010 – 79 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)

  • Albums 3

    8 août 2014 – 287 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • Menu animé déroulant

    16 août 2015 – 60 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).

  • Réservations multiples

    4 juillet – commentaires

    Permettre aux utilisateurs d’effectuer de réservations multiples (réserver pour plusieurs personnes à la fois ou réserver un événement plusieurs fois) Dépendances Saisies Réservation d’événements Introduction Il y a deux manières de multiplier les (...)

  • PHANTOM (HTML5UP)

    18 juillet – 32 commentaires

    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 : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)