HTML5UP Alpha

Published : 7 January 2019 – updated on 11 August 2022 – by Ben., jeanmarie – 75 commentaires

1
2
3
4
5
16 Votes

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

5 years 1 year 3 months Without limit
par date
Filter

17 discussions

  • 1
    Sylvain Nogues

    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

    Reply to this message

  • 2
    Christophe

    Bonjour,

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

    • DD

      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 !

    Reply to this message

  • ivandps

    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.

    Reply to this message

  • ivandps

    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

    Reply to this message

  • ivandps

    Bonjour

    le plugin rôles de documents ne semble pas fonctionner (pour les logos).
    Merci pour ce template.
    Cordialement

    Reply to this message

  • 2
    dut

    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 :

    	<B_parrains>
	<ul class="parrains">
	<BOUCLE_parrains(ARTICLES){page=partenaires}><h3>#TITRE</h3>#SOUSTITRE<li>#TEXTE</li></BOUCLE_parrains>
	</ul>

    Dans la feuille de style:

    /* zone des parrains */
 
ul.parrains {
	cursor: default;
	list-style: none;
	padding-inline: 10rem;
}
 
ul.parrains li {
	display: flex;
	justify-content:space-around;
	flex-wrap:wrap;
}
 
ul.parrains li:last-child {
	padding-right: 0;
}
 
ul.parrains li .spip_documents:before {
	font-size: 1.75em;
}
ul.parrains li .spip_documents {
	color: inherit;
	flex : 1 1 120px;
}
ul.parrains .spip_documents dt a {
	color: #646464;
}
    • jeanmarie

      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.

    • jeanmarie

      Un exemple à adapter :

      	<BOUCLE_partenaires(SELECTIONS) {identifiant=partenaires}>
		<section id="partenaires">
			<h2>#TITRE</h2>
			#TEXTE
			<B_partenaires_contenus>
			<ul class="menu-items">
				<BOUCLE_partenaires_contenus(SELECTIONS_CONTENUS)
						{id_selection}
						{par rang}>
				[<li class="item">[<a href="(#URL)">]
(#LOGO_SELECTIONS_CONTENU|image_responsive{35,0,1}|inserer_attribut{title,#TITRE})
				[(#URL|oui)</a>]</li>]
				</BOUCLE_partenaires_contenus>
			</ul>
			</B_partenaires_contenus>
		</section>
		</BOUCLE_partenaires>

    Reply to this message

  • 5
    Bernard

    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..

    Reply to this message

  • 3
    Bernard

    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.

    [(#ACCEPTER_FORUM|!={non}|oui)<div class="box">
                        [(#REM) Forum de l'article ]
                        <INCLURE{fond=inclure/forum,id_article} />
                        [<h2 class="forum-titre"><:forum:form_pet_message_commentaire:></h2>
                        (#FORMULAIRE_FORUM)]
                </div>]

    Voilà c’est tout! Parfait pour le reste, Merci !

    • jeanmarie

      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...

    • Bernard

      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.

    • Fa_b

      Oups moi j’ai mis ça :

                      [(#PARAMETRES_FORUM|oui)
                <div class="box">
                        [(#REM) Forum de l'article ]
                        #INCLURE{fond=inclure/forum,id_article}
                        [<h2 class="forum-titre"><:forum:form_pet_message_commentaire:></h2>
                        (#FORMULAIRE_FORUM)]
                </div>]

      Peut-être qu’en conditionnant sur la présence de commentaires existants, je vais creuser çà.

    Reply to this message

  • 11
    ivandps

    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

    • jeanmarie

      Comme toujours, il faudrait plus d’infos pour aider, à minima un lien pour qu’on puisse constater.

    • ivandps

      Bonjour je l’ai réactivé pour le constat ;
      Trace
      Merci

    • jeanmarie

      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 :

      1.  .box .image.featured img {height:auto;}

      Est-ce que c’est mieux ?

    • ivandps

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

    • jeanmarie

      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-

    • ivandps

      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 !

    • jeanmarie

      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...

    • ivandps

      J’ai placé mis le css dans
      squelettes/css/perso.css
      Pour moi il n’y a pas de différence.
      Cf rubrique

    • jeanmarie

      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/.

    • ivandps

      Ah oui y a du mieux ! ça marche, merci pour ta patience etvta persévérance !

    • jeanmarie

      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

    Reply to this message

  • 2
    ivandps

    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/

    • jeanmarie

      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

    • ivandps

      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.

    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