Installation
Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html
Il nécessite les plugins Adaptive Images, Saisies et ZCore.
Note : pour fonctionner, il faut que le plugin Adaptive images soit configuré pour utiliser la méthode srcset +
Configuration
La configuration du plugin est accessible via le menu Squelettes > HTML5up Forty
Page d’accueil
Il est possible de choisir l’image d’entête : via la médiathèque (menu Édition > Documents), ajouter un nouveau document puis, dans la page de configuration, indiquer le numéro de ce document.
Il est également possible de choisir le mode d’affichage :
- mode site avec les rubriques à la racine du site (secteurs)
- mode blog avec les derniers articles publiés.
Contenu
Il est possible de choisir l’article affiché en pied de page.
Si vous ne souhaitez pas que cet article soit visible dans l’arborescence de votre site, vous pouvez utiliser le plugin Pages uniques.
Personnalisation
La feuille de style css/perso.css
sera prise en compte pour personnaliser l’affichage sans perdre les mises à jour possibles. Idem pour les javascripts avec le fichier javascript/perso.js
Modèles
Les modèles bouton
et icone
permettent d’afficher, dans le contenu, des boutons et icônes avec Font Awesome (liste des icônes disponibles).
Bouton (icône et texte avec lien dans un bloc encadré)
<bouton|icone=heart|primary=oui|iconetexte=le texte|lien=https://www.domaine.net>
Paramètres :
-
|icone=fa-rocket
(ou tout autre icone de FontAwesome) -
|primary=oui/non
-
|iconetexte=le texte
-
|lien=https://www.domaine.net
Icône (icône avec lien et texte alternatif)
<icone|icone=heart|iconetexte=le texte|lien=https://www.domaine.net>
Paramètres :
-
|icone=fa-rocket
(ou tout autre icone de FontAwesome) -
|iconetexte=le texte
-
|lien=https://www.domaine.net
-
|taille=64px
ou50%
-
|couleur=#ffffff
Plugins facultatifs
Identité Extra
L’activation d’Identité Extra affichera, en bas de la page, les informations de contacts.
Liens sociaux
Le plugin Liens vers les réseaux sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.
Note : Il faut « Activer l’habillage graphique de la barre de liens avec la feuille de style basée sur la police socicon ».
Formulaire de contact
Le plugin Formulaire de contact avancé permet d’ajouter facilement un formulaire en pied de page de la page d’accueil.
Mailsubscribers / Newsletter
Si Mailsubscribers est installé, on affiche le formulaire d’inscription à la newsletter. A votre charge de créer la liste newsletter (voir la doc de Newsletters).
Menus
Le Plugin Menus permet d’ajouter un menu dans le pied de page : créer un nouveau menu avec l’identifiant pied et il apparaîtra automatiquement.
Agenda
Si Agenda est installé, le premier bloc de la page d’accueil affiche l’agenda (3 prochains rendez-vous et lien vers l’agenda complet).
Évolutions
A partir de la version 0.4.12 il est possible de surcharger les couleurs de fond en recopiant la partie de définition des couleurs depuis css/main.css vers perso.css .
Par exemple :
:root{
--Ebony-Clay:orange;
--Viking: orange;
--Blue-Bell:orange;
--Apricot: orange;
--Gold-Sand:orange;
--Portage: orange;
--DeYork: orange;
--Martinique:orange;
--Martinique2:orange;
--Martinique3:orange;
}
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.
Discussions par date d’activité
17 discussions
Bonjour,
j’ai un soucis avec la pagination des secteurs sur la page sommaire,
les logos des secteurs ne s’affichent plus à partir de la seconde pagination (problème ajax ? image adaptative ?).
Pour charger les logos il faut recalculer la page entière : http://msforty/?debut_sommaire=2#pagination_sommaire&var_mode=recalcul
spip 4.2.10
Adaptive Images 3.2.0
Font Awesome 1.0.5
Html5up FORTY 1.0.0
Saisies pour formulaires 5.4.0
Z-core 3.0.7
PHP 7.4.26 ou 8.1
MySQL 5.7.36
Apache 2.4.51
Environement local wampserver x64 win7x64 FF 115.8esr x64
logos en .webp de 1200x927(142ko) à 2592x1944(5,41mo)
sinon c’est un super plugin, bien ficelé.
Cordialement
Une alternative en attendant mieux :
noisette : /inclure/accueil-rubrique.html
dans perso.css :
Bonjour,
Correction de cette alternative de dépannage qui casse le lien vers la page de la rubrique et provoque une 404.
Pour le html :
Pour le css : abandonner la classe floor.
Pour le js, dans /javascript/main.js débrayer l’insertion du background aux ligne 132 et 225.
Cordialement
Répondre à ce message
Why my photos are opening as JPG ? How to apply some .js with box view ?
https://radoslawsobik.pl/Fotografia-mebli-kuchennych-na-potrzeby-portfolio.html
How to fix it ?
Répondre à ce message
Bonjour Jean-Marie,
c’est pour te dire que mon site imago mundi utilise ton Forty et que c’est formidable !
Nepthys
Merci pour ton retour positif :)
Répondre à ce message
Merci pour ces squelettes
Comment faire pour afficher les sous rubriques dans le menu et dans la page rubriques..
Quelle partie de squelette modifier ? je ne trouve pas
Merci
Salut,
le thème est prévu pour n’afficher qu’un seul niveau de rubrique (accueil > rubrique > article).
Pour trouver dans quels fichiers faire tes modifs, il faut ajouter
?var_mode=inclure
à l’adresse de la page en question (ou&var_mode=inclure
selon le type d’url configurée). Voir https://www.spip.net/fr_article4453.htmlCa donne :
- menu /inclure/nav-secteurs.html
- rubrique /content/rubrique-grille.html ou /content/rubrique.html
jeanmarie
Merci !
je vais faire les modifs !
Bonjour
Ayant également un site avec des secteurs et des sous-rubriques, j’avais fait les modifs suivantes :
J’ai fait quelques adaptations pour que les pages des secteurs (sans articles, mais avec des sous-rubriques qui en ont) ne restent pas vides.
- Dans inclure/liste/articles_rub.html j’ai changé dans BOUCLE_articles
id_rubrique par branche
Cela affiche les articles des sous-rubriques.
- Je les ai fait précéder d’un sommaire (liste ) des sous-rubriques en ajoutant dans le fichier /content/rubrique.html
la boucle suivante :
- J’ai également ajouté aux rubriques et aux articles un fil d’Ariane sur le modèle des squelettes de la « dist ».
-> Rubrique
-> Article
et dans
/html5up_forty-c2ada-v0.4.5/content/article.html
Après
Merci !
C’est plus simple ainsi !
Répondre à ce message
Bonsoir... Je suis en train d’essayer d’utiliser ce plugin squelette avec la version alpha 4.0.0. de spip.
Après quelques tentatives je pense qu’il y a un pb lié à la nouvelle version, mais je ne sais pas si c’est lié au squelette ou au plug-in adaptative images : l’image de fond du bandeau de la page d’accueil n’apparaît pas ; et les images des rubriques, sur la page sommaire et sur la page rubriques, restent pixellisées.
Je n’arrive pas à trouver de solution pour le moment. Une idée ?
même souci avec la version 4.0.0 beta
Testé avec Chrome + Firefox sur un serveur Apache en localhost. J’ai essayé d’effacer le cache etc. J’ai aussi essayé sur une install vierge et j’ai réussi à reproduire le problème.
Bonjour,
je n’ai pas encore pu tester mais j’ai l’impression qu’Adaptative images n’a plus le même markup (
<picture>
/<source>
) en 4.0 alors qu’en 3.3, ça fonctionne. Voir par ici en 3.3 : https://sonars.ioPar ex, j’aurai bien essayer avec Adaptive Image avant ce commit : https://git.spip.net/spip-contrib-extensions/adaptive_images/commit/78514b3d1062a5e3d0c65e0268714dd42a52fe1b
Je n’ai pas le temps de m’y plonger pour l’instant, donc si vous arrivez à creuser un peu :)
Je n’ai pas de pb avec FORTY sur un spip 4 beta https://pyromania.alwaysdata.net.
Sur ce site il y a ça en tout et pour tout comme personnalisation :
- dans css/perso.css :
- Dans config/mes_options.php :
De mémoire pour que les images ne soient pas pixelisées il faut qu’elles aient vraiment *beaucoup* de pixels....
Oui : avez-vous bien diminué les réglages d’Adaptive images (taille/poids des images) pour déclencher l’adaptation sur vos images si elles sont plus petites ?
Question subsidiaire : est-ce que le problème est apparu après une mise à jour ou bien est-ce avec un SPIP4 « neuf » ?
Bonjour, j’ai refait un test avec une base propre et j’ai ajouté une image d’accueil en 1440x900 comme recommandé dans la config de Forty, celle-ci n’est pas pixellisée sur la page d’accueil et c’est bien.
Par contre si je mets des images en 1440x900 comme Logo de rubriques, elles sont très pixellisées dans les pages listant les rubriques, puis elles restent pixellisées dans le bandeau de la page rubrique.
Les images en 1440x900 fonctionnent bien comme logos d’article par contre (que ce soit dans les pages listant les articles, ou sur la page article elle-même).
Là où c’est étrange :
- le code SPIP pour les images est le même sur les rubriques et sur les articles
- suspectant un souci de compatibilité avec une variante de format jpeg, j’ai mis 3 copies de l’image « qui ne pixellise pas » dans ma base de données (accueil / logo rubrique / logo article) et celle-ci pixellise sur les rubriques, mais ni sur l’accueil, ni sur l’article. Hum...
Je mets quelques captures d’écran pour vous montrer.
@jeanmarie : comme tu le suggérais j’ai essayé avec la version précédente de Adaptative Images (v 2.0.1 au lieu de 2.1.1) en activant manuellement l’option « scrset + source (html5) », et miracle, toutes les images apparaissent de façon correcte ! Cela semble donc bien être une régression introduite sur Adaptative Images entre la version v2.0.2 et 2.1.1 . Je vais aborder la question sur la page du plugin en question.
Rebonjour jeanmarie, pour répondre à ta question j’ai testé avec Adaptative Images 2.0.1 (la version précédant le commit que tu indiques) et en activant le mode « scrset + source » (option indisponible dans la nouvelle version quand on utilise spip 4.0.0) les images apparaissent correctement !
J’ai posé une question sur la page du plugin correspondant.
As tu regardé la config de Adaptive image comme le suggère jeanmarie ?
@jeanmarie : merci pour ton aide ! C’est chouette d’avoir une communauté aussi réactive :-). J’ai trouvé le bug dans Adaptative Images (cf mon post sur l’article correspondant).
Bonjour, je débute tout juste avec les pages web, quelqu’un pourrait-il m’expliquer qu’il faudrait que je modifie le code pour que les images me chargent, je n’ai pas trop compris les commentaires ci dessus
Avec la version 2.1.3 d’Adaptive Images, le problème doit être résolu en SPIP4. Pour les autres versions, il faut que le plugin Adaptive images soit configuré pour utiliser la méthode srcset + (HTML5).
Répondre à ce message
Bonjour,
Merci pour l’adaptation de ce plugin pour SPIP !
Je viens de le choisir pour mon site, il me plaît beaucoup.
J’aurais voulu pouvoir utiliser les sous-rubriques, comme l’une des personnes qui a commenté plus tôt sur ce fil. Tu recommandes d’ouvrir un Ticket sur Github, mais malheureusement l’inscription a été désactivée. Du coup, je me permets de transmettre mon ticket ici pour que le plugin soit adapté.
Merci d’avance :-)
Répondre à ce message
Bonsoir bonsoir !
Pour une raison qui m’échappe encore j’ai dû rajouter un bout de CSS personnalisé pour régler un bug d’affichage des images internes des articles, qui sinon ne sont pas réduites automatiquement sur la version 4.0.0 de Spip (non testé avec les autres). Ca ressemble à ça (rajouté dans mes_styles.css) :
Voilà voilà !
Bonne soirée !
mathieu
Merci pour ce retour, ça doit venir du fait que la feuille de style de SPIP css/media.css n’est pas utilisée par Forty.
Peux-tu tester en enlevant le
-
demedias-.css
dans inclure/head.html (L20) ?Il faut voir si ça résout bien le problème (en supprimant tes ajouts de mes_styles.css) et si ça ne provoque pas d’effets indésirables ailleurs.
Si c’est bon, je ferai la modif.
Répondre à ce message
Salut,
J’ai mis à jour Spip en 4.0.0 : pas de problème à première vue, sauf que... les variantes du squelette ne sont plus prises en compte !
J’avais quelques variantes (article-2.html, article-3.html, etc.) mais c’est comme si ces fichiers n’existaient plus : à la place s’affiche le fichier article.html pour les articles et rubrique.html pour les rubriques, ni plus, ni moins.
C’est moche ;-)
J’ai regardé un peu dans les fichiers du squelette Html5up FORTY, mais apparemment, rien n’a changé dans les fichiers article.html et content/article.html.
Mon fichier article-2.html :
Comme le conseillait @jeanmarie début avril sur ce fil, j’ai désactivé tous les plugins sauf Html5up FORTY pour vérifier d’éventuels conflits, mais ça ne change rien.
Je ne comprends pas ce que je peux faire.
Auriez-vous une idée ?
— -
Spip 4.0.0 avec tous les plugins à jour : Compositions 3.9.3, Html5up FORTY 0.4.10, Saisies pour formulaires 4.0.2, SPIP Bonux 4.1.0, Z-core 3.0.0, etc.
Bonjour,
C’est parce qu’en SPIP 4 les variantes de squelettes ne sont plus possible par défaut.
Grace au plugin « compositions » que tu as déjà installé (ça c’est fait)
il faut créer des fichiers dans squelettes/contenu
C’est expliqué ici : https://contrib.spip.net/Compositions-2-et-3#Configuration
Rhôôôlàlà, trop bien !
Je regarde ça incontinent.
Merci merci merci.
Fonctionne parfaitement, et c’est super puissant ; cool.
Répondre à ce message
Rebonjour !
Ca y est je me remets à mon projet de site internet avec Forty ! J’ai découvert un petit bug dans le fichier css/html5up_forty.spip.css.html , ligne 51 :
— > le / devant #FICHIER crée une URL absolue et du coup dans mes tests l’image d’accueil ne s’affichait jamais car je n’avais pas installé le site directement à la racine de mon serveur.
Solution proposée :
Merci d’avance :-)
Mathieu
Merci pour le signalement.
C’est corrigé avec la version 0.4.10 : https://git.spip.net/spip-contrib-squelettes/html5up_forty/commit/e299b36897589668ab10e2e42a54cd6161a13bc0
Répondre à ce message
bjr
j’utilise ce squelette, tb par ailleurs. Quand je mets les adresses fb et tweeter cela n’apparait pas sur le site , il y a juste le mail, pourquoi ?
merci pour une réponse
Bonjour, avez-vous essayé d’installer le plugin Liens sociaux ?
oui bien sur
Il va nous falloir plus d’infos pour aider :)
Une adresse peut-être pour qu’on puisse voir ?
http://www.aubel-psychologue.info/
i y a juste le contact mail
merci
Pour la chaine de langue « champ email », c’est corrigé avec la version 0.4.9 : https://git.spip.net/spip-contrib-squelettes/html5up_forty/commit/d7ce8a32beb8e98e57509c0fcb3d91f17b543a17
Pour info, vous pouvez activer le plugin « Contact » pour avoir également un formulaire de contact et avoir un pied de page plus équilibré.
Pour les liens FB/Twitter, ils apparaissent bien dans le pied de page comme prévu dans la maquette : https://html5up.net/uploads/demos/forty/
@Jean-Marie : quel est ce plugin « Contact » ?
bjr tjr rien mais le plugin contact ajoute bien un formulaire (Formulaire de contact avancé 0.16.7 - stable)
j’ai désactivé ts les plugins non nécessaire à forty mais sans succes, incompréhensible donc(
j’ai fait aussi la maj du plugin
merci
@manu : c’est le plugin Formulaire de contact avancé https://contrib.spip.net/Formulaire-de-contact-avance (contact est son préfixe :) )
@jpa25 : comme dit dans mon message précédent, tout semble normal : les liens FB/Twitter apparaissent bien dans le pied de page comme prévu dans la maquette : https://html5up.net/uploads/demos/forty/
Aussi, comme préciser dans la doc, il faut activer le plugin « Identité Extra » pour afficher le numéro les contacts type téléphone.
Bjr
sans succès après tous ces conseils, même impossibilité d’affichage des réseaux sociaux bien renseignés
merci
Il faut ajouter uniquement les liens vers les pages (ex https://www.facebook.com/spip.net/ ou https://twitter.com/spip/). Là, vous avez ajouté des codes d’intégration (iframe).
A noter que tout ça ne dépend de Forty mais de l’utilisation du plugin Sociaux :)
corrigé , cela ne semble pas fonctionné
merci de l’aide
Ça fonctionne, je vois bien les liens (avez-vous recalculé la page suite à la mise à jour ?)
avec edge oui mais pas avec google chrome tb merci
Comme précisé dans mon message, il faut recalculer la page : je viens de le faire est ça fonctionne.
Ce genre de chose n’est pas lié aux navigateur mais au cache de SPIP. Vous pouvez le vider et le désactiver temporairement (menu Maintenance) lorsque que vous êtes en train de travailler dessus.
C’est étrange sur mon pc avec chrome, les liens sociaux n’apparaissent pas mais sur un autre pc oui, sur edge aussi, enfin c’est pas grave mais je ne sais pas à quoi c’est du, merci pour ces aides
Un bloqueur de pub, par ex Ad Block plus au hasard ?
ah bien vu en effet un grand 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 :
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 : |