HTML5UP Spectral v2

Published : 5 February 2021 – updated on 21 December 2021 – by chankalan, jeanmarie – 38 commentaires

1
2
3
4
5
9 Votes

Squelette adapté du thème HTML5UP Spectral : https://html5up.net/spectral

accueil
rubrique
article

Précision

Pour cette v2 de l’intégration du thème Spectral, il n’a pas été possible de préserver la continuité avec la v1. Il y a donc perte de paramétrages entre la v1 et la v2, qui seraient à refaire si vous passez de l’un à l’autre.

Installation

Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html

Paramétrages

La page de configuration permet de choisir l’image d’arrière-plan parmi les documents de la médiathèque, les couleurs pour les fonds (entête, corps de page et pied de page), pour la typographie, les liens et les liens au survol.
Le titre de la page d’accueil peut être différent de celui du site (par défaut). Le slogan et/ou le descriptif du site peuvent aussi être affiché sur l’accueil.
La suite de la page d’accueil se défini avec les paramètres suivants :

L’article Héro

Défini la première zone de texte, la couleur d’arrière-plan et la couleur de typographie. Le texte est libre à la rédaction.

L’utilisation du modèle <liste_icones> présente de 1 à 7 icônes avec les paramètres suivants pour chaque icône (icone1, style1, couleur1... icone2, style2, couleur2... icone3, style3, couleur3... ) :

  • |icone1=fa-rocket (ou tout autre icône de FontAwesome http://fontawesome.io/icons/)
  • |style1=1 (le style de l’icone1 correspond au style 1 du theme, de 1 à 3)
  • |couleur1=#bbb (la couleur de l’icone1, toute valeur de la propriété color en css)
  • |couleurbordure1=red
  • |titre1= mon titre (optionnel, un label invisible prévu dans le thème)

Le paramètre suivant vaut pour toutes les icônes :

  • |taille=3em (ou 60px ou 150%)

Exemple :

<liste_icones|taille=1.5em
        |icone1=fa-ankh
        |couleur1=green
        |couleurbordure1=white
        |icone2=fa-biohazard
        |couleur2=green
        |couleurbordure2=white
>

La liste des rubriques

Soit par défaut la liste des 5 premières rubriques, soit des rubriques choisies manuellement parmi les rubriques du site, soit ne pas afficher la liste des rubriques.

L’article “majeur”

Détermine la zone qui suit :

Le texte est libre à la rédaction. L’inclusion du modèle <liste_articles> s’adapte à la mise en forme du thème d’origine : six blocs icônes et texte avec lien vers les articles. L’inclusion accepte ces paramètres :

  • |iconescouleur : toute valeur de couleur en css, la couleur de toutes les icônes
  • |textescouleur : toute valeur de couleur en css, la couleur de tous les textes
  • |icone1|icone2...|icone6 : une valeur de Fontawesome comme “fa-rocket” (cf https://fontawesome.com/icons?d=gallery&m=free)
  • |article1|article2...|article6 : un identifiant d’article pour en tirer le titre et l’introduction.

Exemple :

<liste_articles|iconescouleur=yellow|textescouleur=green        
        |icone1=fa-globe-europe|article1=5
        |icone2=fa-cloud-download-alt|article2=1
>

Le pied de page

Affiche les réseaux sociaux si vous utilisez le plugin “Liens vers les réseaux sociaux” et une liste d’articles choisis manuellement (le plugin “Pages Uniques” permet de placer des articles hors des rubriques pour par exemple les mentions légales de votre site).

Autres préférences

Pour parachever le fonctionnement et le paramétrage de votre site, vous pourriez utiliser les plugins :

  • “Metas +” pour favoriser le référencement,
  • “Court-circuit” pour aller directement dans le premier article d’une rubrique, ou dans le seul article de la rubrique si c’est le cas, sans passer par la page rubrique.
  • “Rôles de documents” pour gérer les logo comme des documents
  • “Crayons” pour rédiger depuis l’espace public

Discussion

5 years 1 year 3 months Without limit
par date
Filter

11 discussions

  • Thomas EGLI

    Bonjour et merci pour avoir pluginisé Spectral !

    Dans les zip des deux dernières versions je ne trouve nul part sommaire.html et la home page fait une erreur 404. Il y a bien un sommaire.html sur la plus vieille des version mais elle ne donne aucun résultat satisfaisant, sauf erreur de ma part.

    Est-ce qu’il y a quelque chose de particulier à faire ou bien est-ce que je peux trouver la page sommaire.html quelque part ?

    Un immense merci par avance,
    Thomas

    Reply to this message

  • 3
    APSAD93

    Bonjour, est il prévu une montée de version pour la compatibilité avec SPIP 4.1 ? merci

    • jeanmarie

      As-tu testé pour voir si tout fonctionne bien ?

      Sinon, tu peux le faire en ajoutant

      define('_DEV_VERSION_SPIP_COMPAT', '4.0.99');

      dans ton fichier mes_options.php et dire si c’est bon pour que qq1 fasse la mise à jour.

    • APSAD93

      Merci pour la réponse
      Non pas essayé car c’est mon template (pas envie de tout casser)
      Oui j’ai effectué cette manip sur le fichier mes_options.php ce qui implique sur la vue PLUGINS

      Html5up Spectral 2.3.11
      Squelette responsive « Spectral » de HTML5UP
      Version incompatible : compatibilité forcée

    • jeanmarie

      Mais si tu es déjà en 4.0, il y a de grandes chances que ça se passe bien :)

      Sinon, il faut attendre que quelqu’un fasse le test. J’ai prévu de le faire mais je n’ai pas de temps pour l’instant.

    Reply to this message

  • 5
    Frédéric

    Bonjour, je ne trouve pas comment faire pour que les articles d’une rubrique soient triés par date de publication & non dans l’ordre alphabétique. Est-ce possible & comment ?
    Merci d’avance pour la ou les réponses.
    F.

    • chankalan

      Bonsoir,
      en effet... c’est maintenant corrigé avec la v2.3.11

    • Frédéric

      Danke schön ! Muchas gracias ! Thanks very much ... Merci beaucoup, je vais tester.
      Frédéric

    • Frédéric

      Ça fonctionne, super, merci Chankalan.
      À préciser toutefois, les modifs faites sur les css de la version v2.3.10 sont à refaire une fois la mise à jour effectuée.
      Frédéric

    • Frédéric

      Ça fonctionne, super. Merci encore Chankalan.
      À préciser toutefois, les modifs sur les scss (pour ma part main & thème) dans la version v2.3.10 sont à refaire une fois la mise à jour effectuée.
      Frédéric

    • chankalan

      C’est qu’il faut modifier les styles dans le fichier /squelettes/css/perso.css, ou alors copier le fichier qu’on veut modifier dans /squelettes/css/... et le modifier ensuite, mais surtout pas dans le dossier du plugin !

    Reply to this message

  • 1
    Olivier_t

    bonjour,

    Est-ce que des essais réussi ont été fait avec le plugin Album3?

    si par exemple j’insère la balise

    <album14|largeur=120|hauteur=120|pagination=12>

    alors l’ensemble des photos de l’album sont effectivement affichées, mais les paramètres de taille notamment ne sont absolument pas pris en compte, par défaut

    Peut-être que comme dans le squelette content/article.html (par exemple), les images du texte sont contraintes -640- ou -1280-, le plugin Album est court-circuité

    [<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images{640})</div>]

    spip 3.2

    Reply to this message

  • APSAD93

    Bonjour,

    Avec ce squelette, peut on modifier les couleurs des scrollbars ?
    Merci pour vos retours

    je suis en v2.3.10

    Reply to this message

  • 10
    lebardix

    fonctionnement erratique du menu sur smartphone

    sur PC
    en V2, lors de l’ouverture par le bouton “menu”
    le menu s’affiche normalement, mais au clic il y a deux comportements
    -  sur une entrée du menu -> ouverture de la nouvelle page et disparition du menu (donc OK)
    -  en dehors d’un élément du menu -> le fond de page se réduit et le menu reste ouvert, (subtile comme signal d’erreur, c’est bien)

    par contre sur smartphone ... problèmes importants
    1) menu incomplet si dépassement de la taille de l’écran (pas de scroll possible)
    2) sur une entrée du menu -> la page ne se charge pas (comme si on avait pas cliquer sur un élément du menu), le menu et la page présente se replient à droite, l’affichage correspond à la page en hauteur plein écran virtuel,
    donc il ne reste que la partie visible de la page dans la résolution réelle du smartphone
    (le comportement est identique en mode public ou privé(cad avec les scripts d’administration)

    Pas de problème en version 1

    merci

    • chankalan

      Bonjour,
      j’essaie de comprendre mais ce n’est pas ce que je constate, est-ce que vous avez des précisions ?
      Le navigateur du smartphone et sa version ? Avec un autre c’est pareil ?
      Est-ce que vous constatez les mêmes problèmes ici : https://ecarts-identite.org/

    • lebardix

      Bonjour,
      ça fonctionne normalement sur le site ecarts.
      La grosse différence déjà est que le menu de ecarts prend tout l’écran...

      Le navigateur de mon smartphone /e/ /e/ android version 10, fork de Chromium Bromite

      Je vais revérifier, j’avais pourtant désactiver mon squelette, et je vous confirme

      Merci de votre réponse
      Cdt

    • chankalan

      J’ai fais une installation neuve et sans aucune surcharge, avec juste une rubrique et un article, sans aucun paramétrage : https://spectral.choc02.fr/

    • lebardix

      avec ce site -> OK
      j’ai bien désactivé mes squelettes, mais ma page d’accueil et le menu ne fonctionne pas sur smartphone, si vous voulez tester https://wn2.plandecuques.fr
      Peut-etre probleme de plugins (image_responsive ??)

      Merci

    • lebardix

      avec le test choc02 pas de probleme , mais le menu est très court, le mien particulierement long et ce pourrait-etre le probleme, voir https://wn2.plandecuques.fr/
      sachant qu’avec le menu de https://ecarts-identite.org/ ça reste correct

    • chankalan

      Le menu possède bien un ascenseur sur la droite pour le dérouler jusqu’en bas, tout le contenu est lisible.
      Par contre, pour le menu les titres longs compliquent un peu les choses... le modèle d’origine est un peu étroit, il faudrait peut-être une option pour choisir la largeur du menu...

    • lebardix

      Le probleme est sur smartphone, le menu apparait bien, mais dès que je te touche (peu importe l’endroit) il se replie sur la droite ainsi que la page du dessous :(

      je vais essayer de faire une capture video d’écran
      je viens de tester avec firefox sur linux mode développement vue adaptative et j’ai le meme probleme

    • chankalan

      Ah oui, je vois sur votre site, le soucis est réel... franchement je vois pas d’où ça vient...
      S’il n’y a aucune surcharge, aucun cache qui pourrait rester, est-ce que vous avez fait des tests en local ou sur un autre serveur ?

    • lebardix

      J’ai vidé tous les caches, je n’ai pas d’autres tests,
      je vais tenter une install avec le minimun

      Merci

    • lebardix

      Trouvé .... j’avais laissé le plugin SIDR actif /o\,
      sur smartphone ça va beaucoup mieux maintenant ...

      Merci pour cette belle adaptation du thème Spectral

    Reply to this message

  • 3
    Sylvain Nogues

    Bonjour,
    j’ai fait la mise à jour v2 sans réfléchir, en effet cela ne fonctionne plus.
    J’ai voulu revenir à la v1, mais elle est marquée “obsolète” et je ne peux pas l’activer...
    Une idée pour l’activer quand même ?
    Merci,
    Sylvain

    • Sylvain Nogues

      Désolé pour le bruit.
      Il suffisait de supprimer la nouvelle version v2 pour pouvoir réinstaller la v1.

    • chankalan

      Bonjour,
      désolé, je suis embêté mais en même temps, je ne crois pas qu’on ait de système dans SPIP pour différencier deux versions d’un plugin qui soit toutes les deux compatibles avec les même versions de SPIP...

      Donc il faut retirer le plugin v2 puis il faut aller dans la base de données, dans la table spip_meta il faut :

      • supprimer “html5up_spectral_base_version”
      • vider la valeur de la ligne “plugin_installes”

      Puis retourner dans l’admin des plugins à monsite.ext/ecrire/?exec=admin_plugins&var_mode=vider_paquets_locaux
      Ensuite il faut recharger la v1 si elle n’y est plus, et juste l’installer sans refaire la mise à jour proposée...

    • Sylvain Nogues

      Merci pour ta réponse éclair !
      Je n’ai pas eu besoin de revenir sur les metas, en fait j’avais re-téléchargé la v1, et quand j’ai supprimé la v2, j’ai pu installer la v1, et c’est retombé en marche.
      Pas trouvé de bugs depuis...
      Merci !

    Reply to this message

  • 1
    emma

    Bonjour et merci pour ce plugin que je vais laisser en v1 (sera-t-elle maintenue?) au moins pour l’instant.
    question : nous passons en SPIP 3.2.9 et je suppose qu’il n’y aura pas de problème, mais quid du 3.3 en devenir?

    • chankalan

      Bonjour,
      il ne devrait pas y avoir de problème... je viens de tester la v1 qui marche très bien avec SPIP 3.3-dev
      La v2 aussi d’ailleurs.

    Reply to this message

  • 1
    DD

    Bonjour,

    Sur un site j’ai Html5Up Spectral 1.0.20 - test installé et dans l’admin je vois l’icône de mise à jour du plugin vers Html5up Spectral v2.3.2 (test) avec en +
    SCSS PHP (version : 2.7.0) et le plugin « Z-core » (version : 2.8.7)

    Est-ce que la version 1 de Html5Up Spectral sera toujours maintenue ?
    J’hésite à tout casser.

    Merci

    Reply to this message

  • 2
    apsad93

    bonjour,

    ma plateforme
    SPIP 3.2.8 [24473] est un logiciel libre distribué sous licence GPL.
    + écran de sécurité 1.3.13

    J’ai installé le plugin en objet et j’ai une erreur dans le squelette sur le formulaire/administration qui n’est pas disponible ? En effet dans le dossier en question, il y a que 2 fichiers :
    configurer_html5up.html
    recherche.html

    merci pour vos retours

    • chankalan

      Bonjour,
      oui, c’est normal qu’il n’y soit pas. Il n’y a aucun appel à ce formulaire dans les squelettes, mais par contre ça correspond aux boutons d’administration du site lorsqu’on est connecté. Pouvez-vous vous déconnecté puis vous reconnecter pour tester ? Si ça persiste c’est peut-être qu’il manque le fichier dans squelettes-dist/formulaires

    • apsad93

      Merci pour la réponse et en effet, cela vient de moi car j’avais désactivé le dossier squelettes-dist ainsi que le squelettes (pour ne pas interférer sur le plugin en question). J’ai réactivé squelettes-dist et ... c’est OK !!

    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