HTML5UP Alpha

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

Accueil
Rubrique
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 É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

Discussion

23 discussions

  • 1

    Bonjour,
    Pas mal du tout, cet HTML5up-Alpha : je l’ai adopté. L’absence d’un moteur de recherche me gêne tout de même.
    Y a-t-il une procédure à suivre pour en placer un ?

    J’ai essayé de reprendre le système de Future-Imperfect, qui présente en haut à droite trois barres verticales qui pivotent et laissent alors apparaître le menu et un espace de recherche. Mais tout cela s’est surimposé à ce que contient Alpha dans cette partie : échec.

    Merci de vos suggestions

    • Bonjour,
      Je viens de m’apercevoir qu’Alpha n’affichait pas les sous-rubriques : les articles qu’elles contiennent sont invisibles dans la partie publique.
      Est-ce que je dois paramétrer quelque chose, ou est-ce irrévocable ?
      Merci de vos réponses

    Répondre à ce message

  • 2

    Bonjour,

    y-a-t-il un registre des changements entre les versions du plugin quelque part ? je me demande juste quelles sont les différences entre 2.0.8 et 2.1.0 .

    Merci pour votre aide et ce super squelette !

    Répondre à ce message

  • Bonjour et merci pour ce plugin.
    Je tiens juste à préciser que les documents joints dans articles et les rubriques ne sont pas visibles en dehors des url_page.

    En effet, l’inclure récupère le type d’objet et son identifiant depuis l’URL et des urls arborescentes, par exemple, ne comportent plus ces informations.

    Il vaut donc mieux s’en tenir à la configuration de base pour les urls.

    Ceci ne retire aucune des qualités de ce plugin que j’utilise avec grand plaisir

    Répondre à ce message

  • 3

    Bonjour
    J’ai installé spip 4.2.4 et ce squelette html5 alpha version 2.1.0 et je suis sous php 8.1.22. ça tourne très bien : svtbelrose.info
    En visitant le site source https://html5up.net/alpha il y est indiqué pour les tableaux deux versions possibles : default et alternate. Cette dernière m’intéresse car les colonnes y sont délimitées (voir la capture). Je ne suis pas du tout calée en code. Est-ce possible d’appliquer ce style et si oui où et comment, pour mon site SPIP ?
    Dans mon site en effet l’apperçu de l’article donne un tableau avec des colonnes bien délimitées (espace rédacteur) mais que je ne retrouve plus pour l’affichage publiquedu même article (tableau classique avec alternance de couleurs pour les lignes, pas de séparation des colonnes).
    d’avance merci
    Cordialement
    Odile

    • Bonjour Odile,
      Je pense que c’est la feuille de style de typo.css qui surcharge celle du plugin alpha.
      Peux-tu essayer de mettre dans ta feuille de style personnelle (squelettes/css/perso.css ?) l’élément suivant :

      table.spip td {
          border: 1px solid #e5e5e5;
      }

      JMarc

    • C’est parfait, ça fonctionne très bien (https://svtbelrose.info/spip.php?article338, j’ai à présent des tableaux avec des colonnes bien délimitées dans mon site sous SPIP Alpha html5
      Merci beaucoup Jmarc pour tout ton partage de connaissances et ta réactivité :-)
      Très bonne journée
      Odile

    • Merci. La SVT le vaut bien ;-)

    Répondre à ce message

  • 9

    Tout d’abord un grand bravo pour ce plugin magnifique ! Installé en moins de 2 heures (personalisations comprises), il a donné un sacré coup de jeune à un de mes sites
    Juste une petite remarque : Pour ma part, afin que le lien accueil soit visible également en version mobile (bouton hamburger), je l’ai rajouté dans le tag

    • Bonjour
      Je dépoussière mon vieux site avec un spip à jour (www.svtbelrose.info) et le squelette Html5 Alpha. Suite à votre commentaire, j’aurais aimé savoir précisémment dans quel fichier du squelette et à quel niveau placer la modification que vous proposez. En effet dans le menu en affichage mobile, il n’y a pas le lien vers la page d’accueil mais simplement les rubriques de base.
      D’avance merci
      Cordialement
      Odile

    • Bonjour Odile,

      Le code complet du fichier header.html pour corriger la disparition du menu en mode mobile serait :

      <header id="header" class="#ENV{alpha_class}">
      	<div class="accueil">
      	<nav id="nav">
      		<ul>
      			<li><a href="#URL_SITE_SPIP"><:alpha:accueil:></a></div></li>
      			<BOUCLE_secteur(RUBRIQUES){par num titre}{id_parent=0}>
      			<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE">#TITRE</a></li></BOUCLE_secteur>
      			<BOUCLE_contact(ARTICLES){page=contact}>
      			<li><a href="#URL_ARTICLE" class="button"><:alpha:contact:></a></li></BOUCLE_contact>
      		</ul>
      	</nav>
      </header>

      A placer dans ton dossier squelettes/inclure pour surcharger celui du plugin en attendant une PR.

      Bon SPIP
      JMarc

    • Bonjour
      Merci beaucoup JMarc pour le code.
      Dans ma structure (spip 4.2 squelette Alpha hébergeur likuid avec PHP 8.1) j’avais encore un petit bug pour l’affichage version mobile du menu. Du coup j’ai bidouillé (ce code n’est donc certainement pas très « propre ») à partir du tien pour arriver à mes fins :-)
      Voici ma version retouchée :

      <header id="header" class="#ENV{alpha_class}">
      	<div class="accueil"><a href="#URL_SITE_SPIP"><:alpha:accueil:></a></div>
      	<nav id="nav">
      		<ul>
      			<li><a href="#URL_SITE_SPIP"><:alpha:accueil:></a></li>
      			<BOUCLE_secteur(RUBRIQUES){par num titre}{id_parent=0}>
      			<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE">#TITRE</a></li></BOUCLE_secteur>
      			<BOUCLE_contact(ARTICLES){page=contact}>
      			<li><a href="#URL_ARTICLE" class="button"><:alpha:contact:></a></li></BOUCLE_contact>
      		</ul>
      	</nav>
      </header>

      Encore un grand merci à toi.
      Cordialement,
      Odile

    • Effectivement, un joli bug dans mon code que tu as bien corrigé. De façon à ne pas répéter « l’accueil » en haut à gauche de la page et dans le menu, tu peux aussi corriger ton header ainsi pour le laisser uniquement dans ton menu :

      <header id="header" class="#ENV{alpha_class}">
      	<nav id="nav">
      		<ul>
      			<li><a href="#URL_SITE_SPIP"><:alpha:accueil:></a></li>
      			<BOUCLE_secteur(RUBRIQUES){par num titre}{id_parent=0}>
      			<li><a [ (#EXPOSE|?{class="perso_active"})] href="#URL_RUBRIQUE">#TITRE</a></li></BOUCLE_secteur>
      			<BOUCLE_contact(ARTICLES){page=contact}>
      			<li><a href="#URL_ARTICLE" class="button"><:alpha:contact:></a></li></BOUCLE_contact>
      		</ul>
      	</nav>
      </header>
    • @JMarc_64 : tu proposes la correction sur la forge ? Je crois que b_b utilise ce thème.
      https://git.spip.net/spip-contrib-squelettes/html5up_alpha

    • @jeanmarie : Une petite amélioration à faire encore quand le sommaire « expose » dans le menu et je le propose sur la forge.

    • Super :)

      Tu vois comment faire une pull request pour proposer ?
      Qqs infos par là Équivalences des commandes SVN/GIT

    • Merci pour la doc. Très clair. Reste à passer à la pratique ;)

    • Bonjour Jmarc
      Excellent ! Pus de doublon dans le menu pour le bouton d’accueil.
      Un grand merci pour tes contributions, c’est top pour mon site et les autres utilisateurs de ce squelette.
      Cordialement
      Odile

    Répondre à ce message

  • Je voulais juste vous remercier pour ce squelette absolument brillant ! Facile à adapter et il remplace maintenant sur mon site un squelette très désuet et un grand nombre de plugins difficiles à gérer.

    Répondre à ce message

  • 1

    Bonjour,
    j’utilise ce joli plugin de squelettes (merci !), mais je rencontre un souci important de spam d’inscription sur la newsletter, malgré le plugin nospam.
    D’après un message de Cedric sur le plugin mailsubscribers, il semblerait nécessaire de mettre à jour la surcharge du formulaire d’inscription pour bénéficier des dernières subtilités du plugin nospam.
    Que doit-on garder comme spécificités du squelette pour ce formulaire ?
    Merci,
    Sylvain

    Répondre à ce message

  • 2
    Christophe

    Bonjour,

    Est-ce que ce plugin fonctionne en Spip 4.0 svp ?

    • Bonjour,
      Oui j’ai fait la mise à jour sur 1 site et tout semble OK

      PS pour l’auteur :

      Pour les mentions légales :
      Créer une page unique dont l’identifiant est contact (page=contact) et elle apparaîtra dans le pied de page.

      l’identifiant ne devrait-il pas être autre chose que « contact » ?

    • Christophe

      Merci pour ce retour !

    Répondre à ce message

  • Bonjour,
    la grande image du haut. n’apparait pas
    sur mon site
    id doc home = 8
    Par ailleurs, les images « failed to load » dans le popin de media box. Un rapport ?
    Voir photo dans page article
    Merci de votre aide.

    Répondre à ce message

  • Bonjour

    impossible d’accéder à l’espace privé.
    Il y aurait un problème de cookie.
    Probleme et solution décrits ici
    J’ai tenté le fichier mes_options.php
    Rien n’y fait...
    Help !
    Merci

    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 :

  • 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
  • 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 apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom