Installation
Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html
Fonctionnement
La page d’accueil affiche le nom du site (voir Configuration > Titre), le slogan et le descriptif du site puis une grille contenant :
- des articles choisis (voir Configuration > Id article(s))
- les rubriques racines
Les visuels sont les logos des rubriques et des articles.
La page rubrique affiche le titre de la rubrique, une image bannière (le logo), le texte puis une grille contenant les articles de la rubrique (les visuels sont les logos des articles ou, à défaut, celui de la rubrique).
La page article affiche le titre, le sous-titre, une image bannière (le logo de l’article ou, à défaut, le logo de la rubrique) puis le texte.
Notes :
- le plugin n’est prévu pour fonctionner qu’avec un seul niveau de rubrique
- les pages auteur, brève, mot-clef, recherche et site ne sont pas prises en charge.
Configuration
Le squelette utilise les sous titres pour les articles, n’oubliez pas de les activer dans configurer contenu.
Paramétrages Sommaire
Une page de configuration du plugin est présente dans Configuration/Gestion des plugins / html5UpAlpha puis cliquer sur l’icone de configuration ( que l’on retrouve à l’adresse ecrire/?exec=configurer_alpha
)
Un id de document est le numéro d’un document colonne ID dans le menu Édition/Document
Titre : afficher le titre du site sur l’image bannière
Id doc home : L’id du document qui sera utilisé pour l’entête (Le thème original utilise une image de taille 1800 × 905 pixels)
Id doc home featured : L’id du document qui sera utilisé pour l’image featured (Le thème Alpha original utilise une image de taille 1200 × 393 pixels).
Id article(s) : Le(s) id(s) d’article(s) ou de page(s) unique(s) séparés par une virgule. Pour les mettre dans l’ordre voulu ajouter un 1. 2. dans le titre de l’article (les articles sont triés par num titre).
Afficher le formulaire d’inscription à la newsletter : Si le plugin Newsletter est installé, afficher le formulaire d’inscription.
Paramétrages Pied de page
Indiquer les adresses complètes des comptes de réseaux sociaux.
Pages spéciales
Contact
Créer une page unique dont l’identifiant est contact (page=contact) et elle apparaîtra dans le menu principal.
Mentions légales
Créer une page unique dont l’identifiant est mentions (page=mentions) et elle apparaîtra dans le pied de page.
Modèles
Bouton
Un modèle permet d’insérer un bouton, avec ou sans lien, dans le texte (voir les boutons).
Les paramètres :
- lien : l’adresse cible (si pas de lien, le bouton est un span)
- type : special, default (ne pas spécifier type) ou alt
- taille : big, default (ne pas spécifier taille) ou small
- fit (pleine largeur) : non par défaut
- icône : l’icône à afficher (font awesome 4.1.0, voir les icônes)
- desactiver : non par défaut
Exemple :
<bouton|lien=https://ww.spip.net
|texte=Clique donc ici voir
|icone=fa-glass
|taille=small
|type=alt
|fit=oui>
Icône (icône avec lien et texte alternatif)
<icone|icone=fa-heart
|iconetexte=le texte
|lien=https://www.domaine.net>
Dépendances
Le plugin nécessite Saisies 1.1.14+.
Todo
Faire les pages
- auteur
- brève
- recherche
- site
Reprendre la hiérarchie des titres
cf https://www.mail-archive.com/spip-zone@rezo.net/msg46360.html
- supprimer le h1 du menu (inclure/header.html)
- passer les titres principaux en h1 (actuellement h2)
- définir les intertitres en h2 (par défaut h3) avec
$GLOBALS['debut_intertitre'] = "\n<h2 class=\"spip\">\n";
$GLOBALS['fin_intertitre'] = "</h2>\n";
Mettre à jour avec la dernière version du thème qui utilise flexbox pour la grille au lieu de float.
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.
Évolutions
- 1.2.7 : la page mot fait son apparition avec une liste des articles liés à ce mot
Discussions par date d’activité
23 discussions
Bonjour
le plugin rôles de documents ne semble pas fonctionner (pour les logos).
Merci pour ce template.
Cordialement
Répondre à ce message
Pour le besoin d’un site basé sur cette maquette. J’ai ajouté une page unique parrains qui présente seulement les logos en bas de la page d’accueil.
https://www.pesticides-quefaire.fr/
C’est pas forcément générique, ni bien finalisé, mais si cela peut servir de base à d’autres, ou en guise de rappel, voici les codes utilisés.
Dans footer.html :
Dans la feuille de style :
Salut dut,
merci pour cette contribution :)
Pour info, il n’est pas valide d’avoir un
h3
enfant directe d’un<ul>
et ton#TEXTE
n’est pas vraiment une liste (même s’il en contient une).A minima, il faudrait supprimer les
ul/li
et afficher le contenu directement dans le footer.L’autre solution, plus propre et sur laquelle tu auras plus la main, serait d’utiliser Sélections éditoriales : tu crées une sélection éditorial « Nos partenaires » dont le texte est « Les structures suivantes nous soutiennent : » et tu y ajoutes tes logos (avec liens ou non) dans une vraie liste
ul/li
.Un exemple à adapter :
Répondre à ce message
Bonjour,
J’ai quelque chose d’étrange qui se passe avec ce plugin/squelettes. Sur la page d’accueil on a un menu supérieur blanc. Quand on scroll bas avec la souris, à priori on voit apparaitre à la place un bandeau sombre avec le menu et fixe en haut.
Hors cette option ne fonctionne que de temps en temps sur mon site en local comme sur le site d’essai en distant. J’ai essayé avec Firefox mais aussi IE et Chrome.. C’est la même chose. L’apparition du menu fixe au déroulement est très aléatoire.
Avez vous une piste ? j’ai l’impression que quelque chose ne se charge pas mais je ne vois pas ou chercher..
Sans lien pour voir le problème en question, difficile d’aider...
Oui pardon ! ça se passe ici : https://clients.epcid.fr/
Le certificat n’est pas bon mais le site est sur !! A l’arrivée ça fonctionne, si l’on clique sur accueil ça ne fonctionne plus. J’ai un peu bidouillé (gentiment) le menu et j’ai peut être fait sauter quelque chose d’important ?
Je viens de voir que sur le site de HTML5, le template donne comme code source la page en haut :
<header id="header" class="alt">
La page vers le bas :
<header id="header">
Ce qui correspond au code du plugin à :
<header id="header" class="#ENV{class}">
Je reste en haut comme en bas sur
<header id="header" class="alt">
Il y aurait donc un problème avec
#ENV{class}
?Bonjour Bernard,
merci pour ton retour, j’ai créé un ticket sur la forge de développement : https://git.spip.net/spip-contrib-squelettes/html5up_alpha/issues/2
A suivre par là bas donc...
Ça devrait résolu en V2.0.6 par le commit de Fa_b : https://git.spip.net/spip-contrib-squelettes/html5up_alpha/issues/2
Ne pas hésiter à faire des retours dans le ticket directement si besoin...
Répondre à ce message
Très joli ! Je propose juste une petite modification dans la page article et ceci pour éviter une div blanche si l’on n’utilise pas les forums d’articles.
Voilà c’est tout ! Parfait pour le reste, Merci !
C’est « Plus compliqué que ça™ » malheureusement : ta solution masquerait les commentaires existants dès que l’on désactive la possibilité de laisser des commentaires.
Il faudrait trouver une solution plus propre, possiblement est stylant les forums directement...
Oui j’ai raisonné perso je l’admets car le site que je monte n’accepte aucun commentaire sur les articles.
Dans ce cas ma solution n’est pas si mal, mais en effet si il y a déjà eu des commentaires auparavant et que l’on supprime le droit de réponse ou de commenter, là on fait disparaitre bien tout.
A suivre donc..
Merci pour ta réponse.
Oups moi j’ai mis ça :
Peut-être qu’en conditionnant sur la présence de commentaires existants, je vais creuser çà.
Répondre à ce message
Bonjour,
il y aurait une incompatibilité avec le plugin modèle média ?
Les images en rôle logo sont déformées.
Merci pour ce beau template
Comme toujours, il faudrait plus d’infos pour aider, à minima un lien pour qu’on puisse constater.
Bonjour je l’ai réactivé pour le constat ;
Trace
Merci
Tes images sont trop petites mais agrandies à 100% de la largeur par le thème. Mais le souci est que la hauteur n’est pas gérée automatiquement.
Essaye dans un 1er temps d’ajouter dans ta feuille de style :
Est-ce que c’est mieux ?
Sii jai bien compris, j’ai ajouté ta proposition
dans squelettes/perso.css
Mais a priori ça ne change pas.
Voir le résultat dans cette page article
J’ai également le plugin model doc unifié d’activé ?
Ta feuille de style doit être dans le dossier css/ pour être prise en compte.
Tu parle bien de l’image d’entête de la page ? Car sur la page que tu indiques, le logo semble être de taille suffisante, donc pas de problème.
Par contre, sur cette page on voit la déformation : https://amidesk.com/trace/?-Carnet-de-route-1916-1918-de-Louis-Desalbres-
Je constate aussi les améliorations.
Est ce malgré tout le résultat de squelettes/perso.css ?
Quant à la page que tu indiques, c’est une rubrique. traitement différent ?
J’essaye avec une image plus grande...
Merci !
Peux-tu ajouter la feuille de styles au bon endroit pour voir si la solution fonctionne avec les images trop petites ?
Ça permettra de corriger le squelettes...
J’ai placé mis le css dans
squelettes/css/perso.css
Pour moi il n’y a pas de différence.
Cf rubrique
Ton fichier n’est pas au bon endroit, tu l’as mis dans /squelettes/squelettes/css/, il n’est donc pas pris en compte. il faut le mettre dans /squelettes/css/.
Ah oui y a du mieux ! ça marche, merci pour ta patience etvta persévérance !
La version 2.0.4 devrait résoudre le problème, je te laisse mettre à jour le plugin, supprimer ton fichier
squelettes/css/perso.css
et me dire si c’est bon.Le commit https://git.spip.net/spip-contrib-squelettes/html5up_alpha/commit/142c6b54b0b9a2cb363ef3a24391014ac0f61434
Répondre à ce message
Bonjour,
mon image d’en tête ne veut pas s’afficher (id doc home 490). Il est vrai que j’ai un comportement étrange des médias du à une apidocrestreint introuvable....
Merci de votre aide cf http://amidesk.com/trace/
Salut,
oui, ça semble venir d’Accès restreint : l’appel du fichier http://amidesk.com/trace/IMG/jpg/1800905.jpg renvoie le message d’erreur « Fichier api_docrestreint introuvable ».
A creuser de ce côté là...
jeanmarie
Merci Jean-Marie, j’ai supprimé l’accès restreint, vidé le cache. L’accés au doc dans la médiathèque affiche encors « Erreur Fichier api_docrestreint introuvable ». Par ailleurs, j’arrive bien à afficher l’image featured (Id doc home featured)... Merci de votre aide.
Répondre à ce message
Bonjour,
Petite question à propos des images insérées dans les textes d’articles (modèle doc) qui ne génèrent pas de box.. et je me demande si Alpha n’aurait pas d’incidence ?
J’applique les réglages de la Boîte Multimédia à l’identique d’autres sites (également à jour, sans Alpha et où la box marche bien), même réglages des Fonctions avancées.. pas de surcharge... pas de particularité... Je ne vois pas et suis à bout d’hypothèse
Voilà donc peut-être une piste à partir du plugin Alpha ?
Merci !
Thomas
Bonjour Thomas,
as-tu une adresse qu’on regarde ça ?
Pour ma part, j’ai bien une médiabox pour les images insérées dans le texte.
Répondre à ce message
Bonjour,
Lorsque j’utilise le formulaire de contact avec l’option d’inscription à la Newsletter, le texte apparait bien mais pas la case à cocher en face. Si je clique sur le texte, l’option est bien à OUI dans la confirmation de l’envoi du mail de contact. Sans doute un problème dans le CSS.
Est-ce que quelqu’un à rencontré (et résolu) ce problème ?
Merci !
bonjour Thierry,
pouvez-vous tester l’ajout de ces styles pour voir si ça résous le problème :
Jean-Marie,
J’ai repris le css dans mon perso.css. J’ai ajouté quelques champs dans mon formulaire de contact mais les checkbox n’apparaissent toujours pas. J’ai bien sûr raffraichi la page... Quand je « clique » sur les texte, cela active le champ et je retrouve les infos dans le récapitulatif avant envoi.
Peux-tu le laisser activé que je vois pourquoi ça ne fonctionne pas ?
C’est bon. Remis en place. Les accès webmestres sont également actifs pour toi.
Essaie d’ajouter z-index : auto ; dans input#infolettre.
Pour les champs Madame/Monsieur, il faudrait faire plus de tests pour être sûr que ça ne pose pas d’autres problèmes mais je n’ai pas l’impression que ça soit vital comme champs dans un questionnaire ;)
Les champs Monsieur/Madame étaient juste cochés pour faire apparaitre les radio buttons...
J’ai rajouté le z-index en fin de balise (?) input#infolettre... Cela ne change rien. Je me demande si le CSS est bien pris en compte. Comment puis-je vérifier que c’est le cas ? Une instruction qui met tout en rouge vif par exemple... ?
Voilà mon fichier css complet :
C’est bon, ça fonctionne, il faut juste forcer le rechargement de la page avec Ctrl+F5.
Je vais commiter ça, il suffira donc de faire la mise à jour du plugin dans les jours qui viennent...
Effectivement. Après quelques command-R (sur Mac), la boîte apparait. Elle est centrée verticalement. Un alignement sur le haut du paragraphe serait sans doute plus « standard ».
Je joins une copie d’écran sous Firefox.
Un grand merci pour ton temps !
C’est fait, la version 1.4.1 résous le problème pour le checkbox d’inscription à la newsletter
https://git.spip.net/spip-contrib-squelettes/html5up_alpha/commit/7910fda437415eb2b990c40f5b9bee53f9327895
Répondre à ce message
Bonjour,
Je viens de mettre en oeuvre ce beau squelette sur un spip3.2.3, tout semble bien fonctionner sauf l’arborescence des rubriques :
- j’ai crée une rubrique1 avec un article1
- dans la rub1 je crée une sous-rubrique2 avec un article2
Sur la homepage j’ai bien le menu « rubrique1 » mais au survol pas de « rubrique2 »
Si je cliques sur le menu « rubrique1 » j’ouvre bien la page « rubrique1 » qui m’affiche le lien vers « article1 » mais rien d’autre, aucun lien vers rubrique2 ni article2.
J’ai raté qqchose dans l’install de Alpha ?
Salut,
le plugin n’est prévu pour ne fonctionner qu’avec un seul niveau de rubrique.
J’ai mis à jour la doc pour info...
Merci pour la réponse rapide. Alors je viens de modifier un peu le code html du menu dans le fichier INCLURE/header du plugin. Remplacer la « BOUCLE_secteur » standard par celle ci :
On obtient un menu déroulant sur deux niveaux qu’on retrouve aussi dans le menu responsive ≣ (j’ai mis un tiret en début des éléments de niveau 2 pour mieux les différencier des articles de niveau 1)
Si ça convient, il peut être intégré dans la prochaine mise à jour du plugin.
Merci pour cette modif, ça m’aide beaucoup !
Salut fulvio47,
merci pour ton retour.
Je viens de tester ton squelette et ça pose le problème de la largeur du menu déroulant qui est fixe pour qu’il puisse fonctionner ce qui oblige à fixer également la longueur du titre pour qu’il « passe » à l’intérieur (avec
#TITRE|couper{X}
).Comment as-tu régler ce problème sur ton site ? Peux-tu nous donner l’adresse qu’on voit ce que ça donne en production ?
merci
Bonjour jeanmarie,
Tu as bien raison, la largeur du menu déroulant est fixe mais reste responsive avec de valeurs en % ou en vw.
Voici le code concerné de mon fichier « header » modifié :
J’ai aboli l’usage du
|couper{X}
qui donne des issues imprévisibles et j’ai imposé à mon client de limiter les longueurs de ses titres à 30 caractères : voir en ligne, c’est le site du Parti Démocratique Italien du LuxembourgJ’insère d’office un « bull » devant le titre des sous-rubriques et je mets en ital les titres des articles des sous-rubrique pour les différencier à l’affichage : vois par exemple l’actuel menu « Agenda » qui contient un article et une sous-rub avec 7 articles.
Du téléphone portable au grand écran d’ordi ça tient la route ...
Fulvio
Répondre à ce message
Bonjour.
Pouvez-vous m’expliquer comment mettre en action les forums relatifs aux articles ?
Bonjour,
je n’ai pas testé ce squelette avec les forums mais ils semblent être pris en compte par défaut.
Vous avez activé les forums et il y a un souci avec le squelette ? Si oui, avez-vous une adresse ?
Oui, les forums sont bien pris en compte, à condition que des commentaires aient déjà été postés dans le forum lié à cet article. La liste des posts s’affichent et on peut y répondre, mais ce que je ne sais pas c’est comment poster le premier commentaire ?
Bonjour,
J’ai effectivement le même problème. Dans le squelette ARTICLE du plugin il y a bien la BOUCLE FORUM mais je ne vois pas de version spécifique des fichiers référencés dans les répertoires include et formulaire du plugin. Le fonctionnement par défaut ne semble donc pas opérationnel.
J’essaye de creuser...
Pouvez-vous essayer de supprimer la boucle forums lignes 35 et 42 du fichier article.html ?
https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_alpha/trunk/article.html#L35
Je ne sais pas à quoi sert cette boucle mais effectivement, elle empêche l’affichage du formulaire de forum s’il n’y a pas déjà un commentaire.
@ben : c’est toi ? https://zone.spip.net/trac/spip-zone/changeset/103502/spip-zone/_squelettes_/html5up_alpha/article.html
Effectivement, lorsque je supprime les deux lignes, le forum apparait. Je vais tester plus à fond maintenant et voir si tout est fonctionnel.
Merci !
Après quelques tests, cela fonctionne plutôt bien mais les styles par défaut sont trop grands par rapport au reste du site. Je vais regarder cela.
En attendant j’ai désactivé tous les forums mais le message proposant de laisser un commentaire reste visible.
Je n’ai pas vu, dans la boucle ARTICLES par exemple, de balise permettant de récupérer l’option du forum (Pas de forum, Modération à priori, ...). Quelqu’un peut-il me guider ?
Il faut conditionner l’affichage du h2 à la présence du formulaire de forum (avec des crochets) comme dans la dist
Merci. C’est OK. J’ai encore quelques progrès à faire ! J’ai enlevé le
pour ne pas avoir de zone vide en l’absence de forum...
PS : a chaque fois que je publie un nouveau message, j’obyiens l’erreur :
« Votre adresse IP est suspectée de procéder à du SPAM. Merci de confirmer votre bonne intention.
Ceci n’est pas un message abusif ».
Est-ce que je fais quelque chose d’interdit ?
La version 1.4.0 reprend les modifs ci-dessus et active le fonctionnement du forum.
https://git.spip.net/spip-contrib-squelettes/html5up_alpha/commit/c57cc5083deb1b97f5ebcf0efb7c4373a826a35c
https://git.spip.net/spip-contrib-squelettes/html5up_alpha/commit/c57cc5083deb1b97f5ebcf0efb7c4373a826a35c
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |