HTML5UP Spectral v2

Published : 5 February 2021 – updated on 8 February 2021 – by chankalan, jeanmarie – 27 commentaires

1
2
3
4
5
7 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

8 discussions

  • 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

    • chankalan

      Si la v1 fonctionne bien et vous convient vous pouvez la garder, il n’y a pas d’obligation...

    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

  • 1
    ivandps

    Bonjour,
    je suis passé de la v1 à la v2. Le résultat est pour l’instant peu satisfaisant.
    histori.al
    Une idée ?
    Merci !

    • chankalan

      Désolé mais il n’y a pas de continuité entre la v1 et la v2, il faut refaire le paramétrage qui a changé...

    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