HTML5UP Spectral - commentaires

HTML5UP Spectral

Vraiment un grand BRAVO !

On utilise le squelette sur https://www.stopbollore.fr

Juste un soucis de avec l'ancre pagination ici
https://www.stopbollore.fr/Signatures-automatiques

En effet, il semble que les paginations ne sont pas/plus stylées correctement (y a eu des changements de balises avec SPIP 4).

Quelqu'un a t il pu résoudre ça ?
Un garnd emrci encore !

HTML5UP Spectral

Bonjour,

un grand merci pour cette adaptation du thème.

J'ai quelques questions concernant la mise en page de page « squelette ». Par exemple, j'utilise le plugin Mentions légales, pour me générer la page en question, cependant, lorsque j'affiche cette page, le thème n'est pas respecté. j'ai vu que sur votre site internet vous avez un cas similaire. Ma question est comment intégrer une page au thème ?

De plus, j'ai vu que vous avez une page pour vous connecter à un espace privé, utilisez-vous un plugin spécifique ?

Merci par avance, et heureux d'utiliser votre travail.

HTML5UP Spectral

bonjour,
ce plugin n'est pas compatible avec les urls arbo : le menu ne s'affiche pas sur les pages article. C'est dû au fait que spip rajoute l'arborescence dans l'url du menu :

ce qui empêche le menu de fonctionner.
cela fonctionne seulement quand on a :

Je n'ai pas réussi à modifier les choses autrement qu'en changeant le type d'url vers les urls « propres », et là ça fonctionne (spip garde bien les liens pour le changement d'url à chaud...)

HTML5UP Spectral

Il y a aussi d'autres petits bugs à résoudre, certains m'ont fait des propositions, d'autres ont publiés des astuces sur le forum, qu'ils en soit remerciés. Le squelette marche cf https://nsi.xyz mais je n'ai absolument pas le temps d'y intégrer toutes ces modifications pour l'instant à cause d'une surcharge professionnel (réforme du lycée, changement des programmes, nouvelle matière à enseigner en partant de rien) et d'une surcharge du système éducatif dont je ne peux pas parler. Je vais continuer à utiliser et développer ce squelette mais pour l'instant je dois absorber un surplus de travail conséquent. Dans tous les cas, j'ai plein de développement de prévu, y compris l'intégration propre des divers patchs proposés.

HTML5UP Spectral

Je viens de tester sur mon smartphone avec un écran FHD je n'ai pas du tout le même rendu que vous. Idem sur un IPAD aucun problème.

HTML5UP Spectral

Bonjour, je continue et continuerais à utiliser, développer et enrichir ce squelette, mais pour l'instant je manque cruellement de temps (lire la note à la fin de l'article).
Les deux colonnes du bas sont pour l'instant neutralisées par manque de temps pour les intégrer et parce que le codage de la CSS était difficile à adapter.
Je ne suis pas fan des rubriques de niveaux 2 pour pleins de raisons (éviter les arborescences profondes) Abandonner les rubriques au profit des mots clés ...
J'ai conservé le logo de la 1^re page sur toutes les autres il me semble, je comprend ton idée mais je ne sais pas l'implémenter. J'ai peur que cela surcharge en plus.

HTML5UP Spectral

Merci pour ta contribution. Si tu as un accès en écriture à SPIP Zone, je t'invite à y commit tes modifications. Dans le cas contraire, il faudra que je le fasse mais je ne suis absolument pas capable d'annoncer une date.

HTML5UP Spectral

Par ailleurs, j'ai effectué des modifications pour corriger de petits soucis d'affichage des images et des vidéos.

Style d'affichage des images et des vidéos
Pour l'affichage des images/vidéos et de leur légende, l'ordre d'application des styles est différente entre le squelette article par défaut de SPIP et le squelette du plugin.

Par conséquent, dans spip.css (vers la ligne 101), j'ai ajouté :

.spip_documents_center { clear: both; display: block; width: 100%; text-align: center;}

Puis dans main.css (fichier css du plugin), j'ai ajouté les lignes marquées BBR :

 .image img { border-radius: 3px; display: block; max-width: 100%; /* BBR */ height: auto; /* BBR */ }

Affichage adaptatif des images
Pour obtenir un affichage adaptatif des images, j'utilise le plugin image_adaptives, qui offre la balise img.

Pour permettre cet affichage, j'ai appliqué la recommandation indiquée dans les commentaires de la page du plugin image_adaptives, à savoir ajouter la règle suivante dans le .htaccess situé à la racine de l'arborescence du site web.

RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg|png|gif) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4

Si vous avez activé le plugin Accès Restreint, il faut aussi supprimer le .htaccess que ce plugin a installé dans le dossier IMG.

HTML5UP Spectral

Bonjour,

Bravo pour ce plugin.
Je l'utilise pour mon site : https://www.petiteceinture-info.fr

Outre les squelettes que j'ai modifiés, j'ai effectué des modifications dans le fichier css afin de remplacer les polices en taille fixe (pt) par des polices en taille relative (em). Cela permet d'adapter l'affichage du texte en fonction de la taille de l'écran.

Voici ces modifications :

	body, input, select, textarea { color: #fff; font-family: "Open Sans", Helvetica, sans-serif; font-size: 1.2em; /* remplace 15 pt */ font-weight: 400; letter-spacing: 0.075em; line-height: 1.65em; } @media screen and (max-width: 1680px) { body, input, select, textarea { font-size: 1.08em; /* remplace 13 pt */ } } @media screen and (max-width: 1280px) { body, input, select, textarea { font-size: 1.08em; /* remplace 12 pt */ } } @media screen and (max-width: 736px) { body, input, select, textarea { font-size: 1.08em; /* remplace 11 pt */ letter-spacing: 0.0375em; } }

Ajout d'une marge en bas à textarea :

	textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; background-color: rgba(144, 144, 144, 0.25); border-radius: 3px; border: none; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; margin-bottom:2.5em; }

Modification de .img (largeur et hauteur) :

 .image img { border-radius: 3px; display: block; max-width: 100%; height: auto; }

J'utilise des liens invisibles sur les vignettes et le texte de présentation d'un article. Ce qui permet de cliquer sur ces champs en plus du bouton « lire ». Cette disposition est utile pour les smartphones et les tablettes, car l'utilisateur n'a plus besoin de cibler son clic avec le doigt.

	.lien_invisible a { border-bottom-color: transparent; } .features a { border-bottom-color: transparent; }

Diminution de la largeur pour les petits écrans (smartphones) :

 @media screen and (max-width: 980px) { .wrapper > .inner { width: 90%; } }

Création d'un style spécifique au champ d'entrée du bouton recherche, pour que le texte entré par l'utilisateur soit visible :

 .wrapper.style5 input[type="search"] { color: #000000; width: 50%; }

HTML5UP Spectral

bonjour cent20,
Je pense utiliser le squelette pour un site internet, et rajouter quelques fonctionnalités aux squeettes sur les pages article/rubrique (tout en restant 100% compatible avec l'existant).
J'ai vu que par rapport au modèle de base, sur la page sommaire, en bas, dans la partir violette, tu avais listé les mots-clés. La partie avec les cases sur deux colonnes de texte dans le squelette original (https://html5up.net/spectral) me plait bien.

As-tu déjà pensé à un moyen d'intégrer les sous-rubriques ? (niveau 2).
Je pensais proposer, dans cette partie violette, une rubrique (sélectionnée par mot-clé ?) avec #TITRE, #DESCRIPTIF, et lister dans ces cases les sous-rubriques (#TITRE, #DESCRIPTIF) avec lien vers celles-ci.

Par ailleurs, dans le modèle html5up, le logo d'une rubrique (grande image), n'apparait qu'une seule fois, comme illustration sur la page sommaire, mais le logo de la rubrique n'est pas repris sur la page rubrique (tout comme le logo de l'article). Que penses-tu de proposer de mettre le logo de l'article/rubrique (s'il existe) en bandeau tout en haut, à la place du logo du site ?

HTML5UP Spectral

Bonjour,

Merci pour ce plug-in. Je pense l'utiliser pour un projet très prochainement car il me convient tout à fais.

Cependant, j'ai un problème de centrage de l'accueil. Cela ne se voit pas sur un écran large (tablette ou ordinateur), mais sur un écran de smartphone avec un nom de site plus long ou une image (en modifiant le squelette), c'est plus flagrant.
Un exemple avec une copie d'écran de votre site ci-dessous.

Une solution ?
En vous remerciant.

Patrice

HTML5UP Spectral

Bonjour,
Ce qui casse les images lorsque le plugin https://contrib.spip.net/Adaptive-Images-4458 est activé c'est :

.spotlight .image img {width: 100%;}
dans main.css

et une fois cela fait il y a un effet/conflit très moche qui floute les images au hover :
img.adapt-img.blur {filter: blur(5px);

Bref je crois que c'est pas gagné.

HTML5UP Spectral

Bonjour,
J'avais un problème avec ce plugin (toutes versions) : la boite multimedia et la barre typographique des crayons ne fonctionnaient pas dans la partie publique.
En supprimant plugins/auto/html5up_spectral/v1.0.20/assets/js/jquery.min.js
cela va beaucoup mieux.
Il me reste juste une erreur javascript :

JQMIGRATE: Migrate is installed, version 3.0.1
jquery-migrate-3.0.1.js:54:2
ReferenceError: breakpoints is not defined[En savoir plus]
main.js:16:3

Une fois tous mes tests terminés je pourrais partager un lien et mes squelettes pour les intéressés car j'ai modifié/ajouté pas mal de choses (baslises edit pour les crayons, portfolio, menu multi-niveaux, newsletters,..)

Voilà

HTML5UP Spectral

super, ça fonctionne.
Merci !

Spectral (HTML5UP)

Essayez de mettre à jour en v.1.0.20 dans quelques heures et tenez moi au courant.

Spectral (HTML5UP)

Je n'ai pas accès à la zone (mais ce serait sans doute plus utile) donc je note ici une modification du squelette sommaire.html :
Dans la boucle

remplacer
<:html5up_spectral:lire_la_suite|attribut_html:>

par

[(#CONFIG{html5up_spectral/titre_lien_hero}|sinon{Lire})]

Spectral (HTML5UP)

Bonjour,

Bravo pour ce travail sur cet élégant squelette.

Pour compléter les posts, quand on paramètre un article en pied de page on perd aussi les paramétrages de la page d'accueil... Il faut choisir ;-)

Gildart

Spectral (HTML5UP)

Il semblerait que ce soit

appelé dans /plugins/auto/html5up_spectral/v1.0.19/inclure/script.html

qui pose problème avec la barre typo (je suis ignare en javascript).

Spectral (HTML5UP)

Bonsoir, je voulais parler de la barre de raccourcis typographiques qui apparaît (de base sans le plugin Spectral activé) lorsque l'on édite un champ avec le plugin crayons.

Spectral (HTML5UP)

Qu'appelles tu par la « barre typographique » sur les pages publiques ? Est-elle liée à un plugin tiers ? Pour l'instant il y à apparement de nombreux conflits de css, à résoudre donc.

Spectral (HTML5UP)

Je prend note des ces bugs et je m'y pencherait le plus tôt possible. Si vous avez à spip zone n'hésitez pas à y commit vos solutions.

Spectral (HTML5UP)

Hello,
Est-ce qu'un utilisateur de ce plugin a la barre typographique fonctionnelle dans les pages publiques ? Lorsque j'active Spectral la barre n'est pas visible et je ne vois pas pourquoi.
Merci

Spectral (HTML5UP)

Par ailleurs plugins/auto/html5up_spectral/v1.0.18/spip_admin_perso.css empêche le mini bando de fonctionner

Spectral (HTML5UP)

Hello,
je viens d'avoir le même problème que j'ai résolu en « régressant » de v1.0.19 à v1.0.18 de ce plugin.

Spectral (HTML5UP)

bonsoir,
un petit bug me semble-t-il sous spip3.1 : l'écran de configuration de spectral contient 2 formulaires indépendants, un pour le document de fond, l'autre pour les articles « hero » etc.
Lorsque je modifie un paramètre d'un des 2 formulaires, les éléments de l'autre formulaire s'effacent, et on perd les enregistrements meta correspondants.
Si je change l'article « hero », je n'ai plus d'image de fond, et réciproquement, si je remets une image, je perds les articles hero...
De mon côté, j'ai résolu le problème en ne faisant qu'un seul form dans configurer_html5up_spectral.html , mais je ne suis pas sûr que ça ne pose pas d'autre problème.

Spectral (HTML5UP)

Bonjour,

je n'ai pas dit que ce squelette ne serait jamais compatible avec les plugins mentionnés, juste que je n'ai pour l'instant absolument pas le temps de m'y pencher. Les conflits de CSS c'est toujours horrible à débogguer.

Le jquery de html5 est chargé dans le head a priori.
et comme le sommaire est sur toutes les pages, tout comme divers effets, je ne suis pas certain qu'il n'est utilisé que sur la page sommaire.

Spectral (HTML5UP)

Bonjour,
Pour les images j'ai retenu une solution qui utilise le plugin « images responsive ».
Pour jQuery de HTML5UP, je ne sais pas à quel endroit vous le chargez... Je sais pas non plus si son seul usage est dans le sommaire (si c'est le cas on pourrait éviter de la l'utiliser ailleurs...)
C'est très dommage de ne pas rentre compatible ce beau squelette avec les principaux outils de SPIP et en particulier le Couteau Suisse.
Cordialement

Spectral (HTML5UP)

Bonjour,

J'ai rajouté la balise manquante version 1.0.18 mais comme vous l'aviez testé cela ne résoudra pas le conflit. J'ai aussi un conflit avec le plugin adaptative image que je voulais utiliser, je l'ai testé il y a 1 mois environ.

Malheureusement vacances ou pas je ne dispose pas de la dizaine d'heure nécessaire pour chercher l'origine des ces bugs. Je n'ai même pas le temps de commit les quelques améliorations des pages rubriques que j'ai dans les tiroirs... #reformedulycee #devoirdereserve

Si vous trouvez la solution, je l'intégrerais avec plaisir, mais celle ci ne doit pas casser le coté adaptatif du site.

Spectral (HTML5UP)

Bonjour Cent20,
les vacances de la Toussaint ot commencé le 19 octobre... c'est donc avec une certaine « avidité » que je reviens vers vous...
Pensez-vous pouvoir résoudre ce problème de conflit entre le jQuery de SPIP et celui du site HTML5UP ?
J'ai absolument besoin des « blocs dépilants » du Couteau Suisse ou à défaut d'un équivalent.
Je pense aussi que le plugin Adaptive Images de Arno souffre du même problème...
Cordialement

Spectral (HTML5UP)

Merci pour tes recherches. Je ne peux absolument rien modifier avant les vacances de la Toussaint 2019, mais j'en prend bonne note. N'hésite pas à publier toute autre information que tu jugerais utile. J'imagine qu'il y a des conflits entre le jQuery de SPIP et celui du site HTML5UP mais pour l'instant je ne peux pas m'y pencher dessus. Cordialement.

Spectral (HTML5UP)

Après vérification (par @tcharlss), il manque la balise #INSERT_HEAD dans le HEAD des squelettes : https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_spectral/inclure/head.html
C'est une balise obligatoire.
Mais ça ne règle pas le problème pour le Couteau suisse ni pour le fonctionnement du plugin SkelEditor 3.1.0. Il y a des problème Javascript et JQuery
La console de Chrome affiche ce message :

jquery.js ?1568257534:3860 jQuery.Deferred exception : jQuery(...).parents(...).formulaire_dyn_ajax is not a function TypeError : jQuery(...).parents(...).formulaire_dyn_ajax is not a function
at HTMLDocument. (http://monsite.com/prive/javascript/ajaxCallback.js?1568257534:1033:3)
at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js ?1568257534:3860
jquery.js ?1568257534:3860 jQuery.Deferred exception : jQuery(...).not(...).attr(...).colorbox is not a function TypeError : jQuery(...).not(...).attr(...).colorbox is not a function
at HTMLDocument.mediaboxInit (http://monsite.com/plugins-dist/mediabox/javascript/spip.mediabox.js?1568257552:27:4)
at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js ?1568257534:3860
jquery.js ?1568257534:3860 jQuery.Deferred exception : jQuery(...).cs_todo is not a function TypeError : jQuery(...).cs_todo is not a function
at HTMLDocument.blocs_init (http://monsite.com/local/couteau-suisse/header.js:77:31)
at HTMLDocument.cs_init (http://monsite.com/local/couteau-suisse/header.js:242:13)
at HTMLDocument. (http://monsite.com/local/couteau-suisse/header.js:251:10)
at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js ?1568257534:3860
jquery.js ?1568257534:3869 Uncaught TypeError : jQuery(...).parents(...).formulaire_dyn_ajax is not a function
at HTMLDocument. (ajaxCallback.js ?1568257534:1033)
at mightThrow (jquery.js ?1568257534:3583)
at process (jquery.js ?1568257534:3651)
jquery.js ?1568257534:3869 Uncaught TypeError : jQuery(...).not(...).attr(...).colorbox is not a function
at HTMLDocument.mediaboxInit (spip.mediabox.js ?1568257552:27)
at mightThrow (jquery.js ?1568257534:3583)
at process (jquery.js ?1568257534:3651)
jquery.js ?1568257534:3869 Uncaught TypeError : jQuery(...).cs_todo is not a function
at HTMLDocument.blocs_init (header.js:77)
at HTMLDocument.cs_init (header.js:242)
at HTMLDocument. (header.js:251)
at mightThrow (jquery.js ?1568257534:3583)
at process (jquery.js ?1568257534:3651)
close.svg:1 Failed to load resource : the server responded with a status of 404 (Not Found)+)

Spectral (HTML5UP)

Bonjour,
très sympa ce squelette.
J'ai quelque problèmes avec les outils du Couteau suisse.
Les découpes en onglets et en blocs ne fonctionnent pas.
Si vous avez une idée ?
Merci

Spectral (HTML5UP)

Ta remarque est pertinente, je n'ai en fait d'ailleurs pas tranché s'il faut mieux afficher le descriptif ou le texte.

ca se choisit dans https://loiseau2nuit.net/ecrire/?exec=configurer_contenu
Si je coche « afficher un truc » et que je vois pas le truc sur mes squelettes, même précisé dans la doc, c'est pas logique ...
pour moi il faudrait idéalement que le squelette prévoient les 2 si le WM le demande.

Spectral (HTML5UP)

Très sympa ce thème ! Merci ! Et ravi de voir que tu reprends du service, l'ami ! :-D

Spectral (HTML5UP)

Bonjour, à part un conflit de feuille de style je ne sais pas, Avez vous testé un autre squelettes html5up et sur celui ci l'insertion du modèle fonctionne t'il ?

Spectral (HTML5UP)

Bonjour, merci pour ce plugin.
Y a t il une raison pour laquelle l'insertion d'un modele de carte`du plugin gis ne fonctionnerait pas ?
Voir site
Merci de votre aide

Spectral (HTML5UP)

Bonjour Manu,

Ta remarque est pertinente, je n'ai en fait d'ailleurs pas tranché s'il faut mieux afficher le descriptif ou le texte.

Ne pas afficher les deux permet d'utiliser le deuxième en interne sur la partie privée,
Ne pas l'indiquer dans la doc permet de changer discrètement l'affectation...

A priori je suis d'accord avec toi, utiliser le descriptif serait plus approprié. Je le ferais dans la prochaine version.

Tu testes justement ou tu as un site en production et si c'est le cas quel est son adresse ?

Spectral (HTML5UP)

Salut Vincent,
Vraiment merci pour le travail d'adaptation effectué : ce squelette est facile à appréhender et renvoie immédiatement un résultat « whaouh ».
Une remarque : je l'ai installé sur une installation toute neuve de SPIP. Par défaut, les rubriques n'affichent pas la partie « Description » mais seulement la partie « Texte ». C'est en regardant tes squelettes que j'ai compris pourquoi ce dernier ne s'affichait pas. Je te suggère de mettre à jour la doc pour faire apparaître cette remarque.
Encore merci pour le boulot effectué.

Spectral (HTML5UP)

bravo c'est tres reussi et ca rapproche spip des problematiques moderne de construction de site rapide et joli !