HTML5UP Alpha

Squelette adapté du thème Alpha de HTML5 UP
https://html5up.net/alpha

Accueil
Accueil
Rubrique
Rubrique
Article
Article

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 Edition/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 apparaitra dans le menu principal.

Mentions légales

Créer une page unique dont l’identifiant est contact (page=contact) et elle apparaitra 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
-  breve
-  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.

Evolutions


-  1.2.7 : la page mot fait son apparition avec une liste des articles liés à ce mot

updated on 7 December 2019

Discussion

6 discussions

  • 9

    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 :

      /* Les formulaires */
      input[type="checkbox"] + label, input[type="radio"] + label {padding-left: 2.4em !important ; position: relative;}
      /* Formulaire de contact  */
      label[for=infolettre] {display: flex;}
      label[for=infolettre] p {margin: 0 ;}
      input#infolettre {margin:0 1em 0 0;opacity:1;-moz-appearance:checkbox;-webkit-appearance:checkbox;-ms-appearance:checkbox;appearance:checkbox;}
    • 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 :

      /* Les filtres des oeuvres */
      #filtre {text-align:center;font-size: 0.8em;}
      #filtre ul li {margin-bottom: 1em;}
       
      /* La grille des oeuvres */
      #oeuvres h3 {font-size : 1em;}
      #oeuvres .box .image.featured:first-child {margin-bottom: 1em;}
      #oeuvres .box .descriptif-oeuvre {font-size: 0.7em; line-height: 1.2em;}
      #oeuvres .box .descriptif-oeuvre p {margin-bottom :0 ;}
      #oeuvres .box .descriptif-oeuvre .credit-oeuvre {font-size: 0.7em;}
       
      #cboxTitle {text-align: center;}
       
      /* Les formulaires */
      input[type="checkbox"] + label, input[type="radio"] + label {padding-left: 2.4em !important ; position: relative;}
      /* Formulaire de contact  */
      label[for=infolettre] {display: flex;}
      label[for=infolettre] p {margin: 0 ;}
      input#infolettre {margin:0 1em 0 0;opacity:1;-moz-appearance:checkbox;-webkit-appearance:checkbox;-ms-appearance:checkbox;appearance:checkbox;z-index:auto; }
    • 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

    Reply to this message

  • 5

    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 :

      		<BOUCLE_secteur(RUBRIQUES){par num titre}{id_parent=0}>
      		<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE">#TITRE</a>
      			<ul>
      				<BOUCLE_ssart(ARTICLES){par num titre}{id_rubrique}>
      				<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_ARTICLE">#TITRE</a></li>
      				</BOUCLE_ssart>
      				<BOUCLE_ssrub(RUBRIQUES){par num titre}{id_parent=#ID_RUBRIQUE}>
      				<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE">-&nbsp;#TITRE</a>
      					<ul>
      						<BOUCLE_ssrubart(ARTICLES){par num titre}{id_rubrique}>
      						<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_ARTICLE">-&nbsp;<i>#TITRE</i></a></li>
      						</BOUCLE_ssrubart>
      					</ul>
      				</li>
      				</BOUCLE_ssrub>
      			</ul>
      		</li>
      		</BOUCLE_secteur>

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

      <BOUCLE_secteur(RUBRIQUES){par num titre}{id_parent=0}>
              <li style="margin-right:2vw;">
                      <a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE" style="font-size:1.6vw;">#TITRE</a>
                      <ul style="width:20vw;">
                      <BOUCLE_ssart(ARTICLES){par num titre}{id_rubrique}>
                              <li style="width:20vw;">
                                      <a [(#EXPOSE|?{class="perso_active"})] href="#URL_ARTICLE" style="font-size:1.2vw;">
                                      #TITRE
                                      </a>
                              </li>
                      </BOUCLE_ssart>
                      <BOUCLE_ssrub(RUBRIQUES){par num titre}{id_parent=#ID_RUBRIQUE}>
                              <li style="width:20vw;">
                                      <a [(#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE" style="font-size:1.2vw;">
                                      &bull;#TITRE
                                      </a>
                              <ul style="width:20vw;">
                              <BOUCLE_ssrubart(ARTICLES){par num titre}{id_rubrique}>
                                      <li style="width:20vw;">
                                              <a [ (#EXPOSE|?{class="perso_active"})] href="#URL_ARTICLE" style="font-size:1.2vw;">
                                              <i>#TITRE</i>
                                              </a>
                                      </li>
                              </BOUCLE_ssrubart>
                              </ul>
                              </li>
                      </BOUCLE_ssrub>
                      </ul>
              </li>
      </BOUCLE_secteur>

      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 Luxembourg
      J’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

    Reply to this message

  • 9
    Ensemble pour Ozoir

    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 ?

    • Ensemble pour Ozoir

      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

      [<h2 class="forum-titre"><:forum:form_pet_message_commentaire:></h2>
      (#FORMULAIRE_FORUM)]
    • Merci. C’est OK. J’ai encore quelques progrès à faire ! J’ai enlevé le

      1. <div class="box">

      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 ?

    Reply to this message

  • 1

    Si quelqu’un a des ennuis avec l’alignement des boîtes dans la page rubrique, c’est qu’il manque les guillemets à la fin de [(#COMPTEUR_BOUCLE|alterner{"","</div><div class='row'>})]

    qui devrait se lire [(#COMPTEUR_BOUCLE|alterner{"","</div><div class='row'>"})]

    Reply to this message

  • 3
    FBexecs

    au rafraichissement de la page article j’ai une erreur MySQL persistante :
    Unknown column ’rang_lien’ in ’order clause’
    ligne 1005 dans /ecrire/public/composer.php

    Effectivement, j’ai copié-collé la formule dans phpMyAdmin et j’ai l’erreur.
    Dans quelle table cette colonne est supposée être ?

    Installation avec spip loader version 3.1.9 (j’ai php 5.3) et chargement avec le module automatique de la console. Html5Up Alpha 1.2.1 - test

    site concerné : https://www.lebistrotdejennifer.fr/

    Amicalement

    • Bonjour,

      ce problème n’est pas lié à Alpha, mais à Ordoc à mon avis (en SPIP 3.1). Vous l’aviez installé ?
      Dans tous les cas, vous aurez plus de réponse sur la page du plugin : https://contrib.spip.net/4860

      jeanmarie

    • FBexecs

      C’EST RESOLU !
      ET oui... rang_lien apparait à partir de la branche 3.2...
      Mais, pas de panique, il suffit d’ajouter effectivement le plugin ordoc (Ordre des documents 1.1.2 - test), installable en auto aussi.

      Donc, pour cette version d’Alpha, “ordoc” est à ajouter dans les dépendances pour les spip 3.1.x

      Merci !

    Reply to this message

  • 4

    Bonjour et bravo pour cet outil qui a l’air extra !

    Je reste perplexe , j’ai très envie de mettre en œuvre ce très beau squelette mais je ne trouve pas où se trouve la documentation . quand on va sur configuration on lit : Des explications préliminaires, en début de formulaire je ne sais pas hélas où est le formulaire .
    Que représentent les identifiants : Id doc home , Id doc home featured ? faut-il nommer ainsi les images et les télécharger ... quelque part ?

    Je n’ai pas encore trouvé la clef qui mène à la vraie documentation je suppose , merci d’avoir la patience de m’éclairer.

    • Bonjour Kri j’ai ajouté ceci dans le texte :

      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 Edition/Document

      Cela t’aide à mieux comprendre ?

    • Merci de ta réponse : à l’adresse ecrire/?exec=configurer_alpha , je ne trouve que des indications qui restent mystérieuses... J’ai un peu trop pris l’habitude des grands classiques de spip :)

      Je n’allais jamais sur Edition/Documents , ça m’ouvre la mediathèque , ça a l’air intéressant , il faut donc appeler le document home , par exemple ?
      Je regarde un peu plus pour dire moins de bêtises (mais spip a beaucoup évolué et j’en suis resté à des fonctionnements élémentaires .)

    • En fait l’ID est le numéro du document qui indexe son chargement sur le site , on s’en sert pour la mise en page dans : < e m b 3 | c e n t e r > par exemple ici c’est l’ID 3 , non ?

    • Donc , dans configuration , on a juste un numéro de document à inscrire , celui que l’on trouve dans la mediathèque , pour définir les différents images à afficher .

      Bon , j’ai mis mon document 4 , ça a marché , il est un peu coupé mais maintenant que j’ai vu le principe , ça devrait aller mieux :)

      Merci beaucoup Ben !

    Reply to this message

Comment on this article

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