SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 79 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > Bazar > Bazar

Bazar

8 octobre 2015 – par chankalan, Pierke1 – 28 commentaires

13 votes

Un squelette pour étaler son bazar sur l’accueil.

Bazar est un squelette HTML5/CSS3 issu du squelette neo-dist (http://zone.spip.org/trac/spip-zone/browser/_core_/plugins/neo-dist) : c’est un choix fait au départ, qui à l’avantage d’intégrer Tinytypo (http://tinytypo.tetue.net/) et de rester simple à prendre en main.

La page d’accueil

L’intérêt de Bazar est de pouvoir paramétrer facilement les informations affichées sur la page d’accueil. Elle fait ressortir de un à cinq articles côte à côte sur autant de lignes qu’on veut.

Voici ce qu’on peut faire (trop) facilement :

  • créer autant de ligne qu’on veut
  • pour chaque ligne, on peut :
    • sélectionner la rubrique dont seront issus les articles. Ils s’affichent par ordre de numéro du titre, sinon par ordre chronologique inversé.
    • choisir le nombre d’articles, de 1 à 5 articles (si plusieurs lignes avec la même rubrique, les articles ne s’affichent pas plusieurs fois, ce sont les suivants qui sont utilisés).
    • le premier document ajouté à un article par ordre chronologique, de format jpg, gif ou png peut être utilisé :
      • sous le titre, comme un logo.
      • en arrière-plan.
    • choisir d’afficher l’introduction
    • choisir la longueur de l’introduction

En activant le plugin Couleur d’Objet (+ choisir d’activer la couleur des articles), on peut aussi choisir une couleur d’arrière-plan, dans ce cas la typographie est colorée par la couleur complémentaire.

CSS3
La propriété « Flexible Box Layout Module » (documentée ici et là aussi) est utilisée pour l’interface de cette page d’accueil.

Les autres pages

SPIP 3.0 et SPIP 3.1

Le squelette marche tout seul avec SPIP 3.1, mais avec SPIP 3.0 il vous faudra :

  • télécharger le squelette « neo-dist »
  • mettre son contenu dans le dossier /squelettes à la racine du site SPIP (le créer si nécessaire)

La philosophie

L’ensemble voudrait être un petit squelette simple à manœuvrer : c’est pour ça que l’idéal est de prendre comme point de départ le squelettes-dist de SPIP 3.1, et de ne pas trop s’en écarter non plus.

Et rien n’empêche de le transformer à sa guise...

Voir en ligne : http://plugins.spip.net/bazar

P.-S.

Voir une démo : http://bazar.choc02.fr/

Dernière modification de cette page le 22 octobre 2017

Retour en haut de la page

Vos commentaires

  • Le 19 mars à 11:32, par sammyfisherjr En réponse à : Bazar

    Bonjour,

    Merci à chankalan pour ce squelette aussi original que facile à paramétrer, c’est un réel plaisir :)

    J’ai expérimenté un petit souci avec l’assertion selon lequelle on peut « créer autant de ligne qu’on veut ». J’ai l’impression qu’en fait on est limité à... 6 ! Mon site (https://sammyfisherjr.net/blog/) a actuellement 7 rubriques et, si je renseigne (ligne1,ligne2,ligne3... ligne7) dans la page de configuration du Bazar, en mettant strictement la même chose à chaque fois (5 articles sur la ligne, afficher l’introduction), il y aura toujours une « ligne » qui sautera aléatoirement lors de la validation.

    Après avoir désactivé tous les autres plugins non-verroullés, j’en suis venu à la conclusion que le problème était bien inhérent au Bazar et de fait, lorsque je me limite à 6 lignes, tout marche parfaitement.

    Je suppose qu’il y a quelque chose à changer dans le squelette, une ligne qui indique le maximum de « lignes » à afficher sur la page d’accueil ?

    • Le 19 mars à 12:12, par chankalan En réponse à : Bazar

      Bonjour,
      tant mieux si c’est utile :o)
      Pour le nombre de lignes, je ne constate pas, je connais un site qui défini 15 lignes haut la main...

    • Le 19 mars à 12:24, par chankalan En réponse à : Bazar

      Par contre on ne peux pas afficher deux fois le même article... est-ce une indication pour trouver le problème ?

    • Le 19 mars à 13:30, par sammyfisherjr En réponse à : Bazar

      Merci pour ta réponse rapide !
      J’y ai réfléchi en mangeant :o) mais pour autant, je ne comprends toujours pas : mes articles appartiennent chacun à une seule rubrique, je n’ai pas fait de bidouillages particuliers, et même les mots-clés sont à peine utilisés (je ne suis même pas certain qu’ils pointent des articles dans des rubriques différentes, c’est dire ! C’était avant tout pour tester)

      Par-contre, je me demande si le problème ne viendrait pas de ma page d’accueil : regarde mon pied de page, il est tout cassé (alors que je n’ai rien fait de particulier). Est-ce que ça ne pourrait pas jouer ?

      C’est d’autant plus rageant que j’ai d’abord testé en local, sur un SPIP qui a subit les pires outrages, et que ça marchait malgré tout parfaitement ^^

    • Le 19 mars à 13:33, par sammyfisherjr En réponse à : Bazar

      J’ai rien dit pour le pied de page, il suffisait de vider le cache de Firefox...

    • Le 19 mars à 16:15, par sammyfisherjr En réponse à : Bazar

      En fait non ?! Ce qui varier l’apparence du pied de page (la zone avec mots clés / dernières brèves et nouveautés sur le web) c’est selon si je suis connecté ou pas... Lorsqu’on n’est pas identifié sur le site, on voir la page telle que tu dois la voir si tu y vas ; lorsqu’on est connecté, les différents éléments que je viens de citer sont empilés et non plus côte a côte...

      Je suis en train de faire des test s pour voir si mon problème de lignes (6 ou plus) ne viendrait pas de là également, mais pour le moment je n’en ai pas l’impression.

    • Le 19 mars à 17:53, par sammyfisherjr En réponse à : Bazar

      Hum. Ca marche. On va mettre ça sur le dos d’un obscur problème d’interface chaise-clavier.

      Par-contre, j’ai une autre question :D
      Je ne sais pas si j’ai touché quelque chose que je n’aurais pas dû, ou si c’est un plugin (?) ou si c’est inhérent à ce squelette, mais les articles sont classées par ordre alphabétique au sein des rubriques (mais ce sont pourtant bien les plus récent de chaque rubrique qui aparaissent sur la page d’accueil).
      Est-il possible de revenir au classement antéchronologique « classique » au sein des rubriques ?

    Répondre à ce message

  • Le 25 avril 2017 à 05:12, par Renée Picard En réponse à : Bazar

    Merci pour ce squelette. En sommaire,si je veux mettre un lien dans le texte d’introduction, cela casse la présentation. Je ne sais pas quoi changer dans le css ?

    • Le 25 avril 2017 à 07:26, par chankalan En réponse à : Bazar

      Bonjour,
      c’est la balise #INTRODUCTION qui doit couper les liens, elle n’est pas censé les préserver.
      Il vaut mieux surcharger la page sommaire.html et mettre une condition suivant l’article, si on peut déjà savoir l’ID de l’article, ici le n°1 , pour remplacer la ligne 48 :

      [(#ID_ARTICLE|=={1}|oui) [<div class="introduction">(#TEXTE})</div>]] ]
      [(#ID_ARTICLE|=={1}|non) [<div class="introduction">(#INTRODUCTION{#GET{couper}})</div>]] ]

    Répondre à ce message

  • Le 14 mars 2017 à 10:04, par Ysabeau En réponse à : Bazar

    Y aurait-il un moyen d’avoir une ligne qui affiche automatiquement les derniers articles du site sur la page d’accueil indépendamment des rubriques ?

    Ce serait formidable.

    C’est vraiment un excellent squelette, encore merci.

    • Le 14 mars 2017 à 12:56, par chankalan En réponse à : Bazar

      Bonjour,
      et bien sûr, tout est possible... mais il faut mettre un peu les mains dans le cambouis !
      Il faut surcharger la page sommaire.html en prenant exemple sur le code déjà utilisé, mais faire une boucle qui ira chercher les derniers articles.
      Après ça, je ne sais pas comment vous voyez les choses précisément...

    • Le 14 mars 2017 à 15:20, par Ys En réponse à : Bazar

      Une ligne avec les premiers articles (la description, ou le chapeau ou les x premières caractères) présentés en pavés comme le reste.
      Je me demande comment ça peut s’articuler avec le reste (les lignes « au choix ») en fait.

      J’imagine qu’il faut changer ceci :

              <BOUCLE_article(ARTICLES){id_rubrique=#CONFIG{bazar/rubrique_#VALEUR}}{0,#CONFIG{bazar/nb_#VALEUR}}{par num titre}{!par date}{doublons}>

      En trouvant moyen d’ajouter un genre de « tu me rajoutes les X derniers articles en première ligne » je suppose.

    • Le 14 mars 2017 à 16:17, par chankalan En réponse à : Bazar

      En ajoutant une ligne en plus, si on en veut 4 :

      <BOUCLE_derniersarticles(ARTICLES){!par date}{doublons}{0,4}>
      <!-- là il faut récupérer le code html comme pour les autres boucles ou adapter... -->
      </BOUCLE_derniersarticles>
    • Le 15 mars 2017 à 10:46, par Ysabeau En réponse à : Bazar

      Merci.

      À suivre dès que j’ai fait les modifications.

    Répondre à ce message

  • Le 3 novembre 2016 à 15:34, par Ysabeau En réponse à : Bazar

    Par contre, il y a un problème d’affichage du portfolio !

    Exemple : http://dutailly.net/refonte-du-site

    C’est le squelette ? Je n’ai pas ce problème avec un site basé uniquement sur la dist.

    • Le 3 novembre 2016 à 16:12, par chankalan En réponse à : Bazar

      Bonjour,
      pour le flottement pas très heureux des images, la version 0.2.18 devrait résoudre ça : http://zone.spip.org/trac/spip-zone/changeset/100345

    • Le 4 novembre 2016 à 10:09, par Ysabeau En réponse à : Bazar

      Merci beaucoup.

    • Le 5 novembre 2016 à 15:43, par Ysabeau En réponse à : Bazar

      Et la mocheté des vignettes a été résolue en cochant la bonne case dans les configurations avancées de SPIP.

    Répondre à ce message

  • Le 2 novembre 2016 à 10:14, par Ysabeau En réponse à : Bazar

    Je confirme que c’est plutôt simple à configurer et surtout à personnaliser.

    Pour les tuiles de la première page, comme je trouvais que les couleurs c’était un peu délicat à configurer pour avoir un résultat qui ait de l’allure (en plus il faut le faire pour chaque article) et que mon site a surtout du texte et des illustrations du type « capture d’écran » j’ai rajouté une ombre, un code piqué sur le site alsacreations et évidemment personnalisé :

    box-shadow:0px 2px 6px #e1e4f8;

    Si vous voulez voir ce que ça donne.

    Le site rend rend hyper bien sur un petit téléphone, chapeau.

    Un regret, j’aurais bien aimé avoir aussi la barre de recherche sur la page d’accueil, mais bon. Et je ne suis pas assez calée pour l’ajouter moi-même sans tout bousiller :-)

    Un grand merci pour ce plugin qui m’a évité de me casser la tête pour faire pareil en plus de temps et nettement moins bien.

    Sinon, pour ceux que ça intéresse Raphael Goetter a écrit un bouquin sur le sujet : CSS3 Flexbox, éditions Eyrolles (bouquin que je n’ai pas fini d’ailleurs).

    Répondre à ce message

  • Le 29 juillet 2016 à 17:16, par Roxane En réponse à : Bazar

    Bravo pour ce bazar, j’aime beaucoup.

    Par contre, mes images de fond posent problème : elles sont parfois sombres, parfois claires, parfois hyper contrastées. Le texte est illisible, et changer la couleur du texte n’est pas une solution.
    A force de chipoter, j’ai vu qu’on pouvait « blanchir » le texte, avec un cliquer-glisser, mais bon, je ne parie pas sur la patience, et le goût pour le chipotage, du visiteur lambda ;)

    J’ai essayé à tâtons de faire disparaître l’image de fond des tuiles quand la souris passe dessus du sommaire avec un

    1. .tile:hover {background-image:none;}

    dans le fichier theme.css
    Bien sur, à chaque tentative infructueuse, je remets les fichiers CSS d’origine.

    Mon petit doigt me dit que tout se joue dans sommaire.html. Un vague souvenir d’ordre de priorités. Si je comprends bien les balises, c’est là que SPIP définit background-image avec

    background-image:url(’(#GETlogo#ID_ARTICLE)’) ;
    1. <a class="tile" style="[(#CONFIG{bazar/bkg_#VALEUR}|=={oui}|oui)[background-image:url('(#GET{logo#ID_ARTICLE})');]][background-color:(#COULEUR);][color:#(#COULEUR|sinon{#ffffff}|couleur_inverser);]" href="#URL_ARTICLE">

    Il doit exister un moyen de faire jouer :hover sur l’affichage, ou encore mieux sur l’opacité de cette image... non ?

    Si l’un.E de vous l’a fait, ou a envie de me filer un coup de main, des fois que certains s’ennuient en cette fin juillet. On ne sait jamais !

    • Le 30 juillet 2016 à 16:04, par Roxane En réponse à : Bazar

      Pour compléter, j’ai également essayé sans succès d’ajouter une contrainte en CSS dans la partie head de sommaire.html.

    • Le 31 juillet 2016 à 11:31, par Roxane En réponse à : Bazar

      Au cas où ça intéresse quelqu’un, j’ai trouvé une solution.
      La voici :

      Créer une image blanche et transparente à environ 40% pour servir de « voile »
      L’enregistrer au format .PNG
      La transférer dans le répertoire css/img/

      Créer perso.css dans le répertoire css/ avec la ligne suivante :

      1. .tile:hover .h1, .row .tile:hover .introduction  {background-image: url("img/voile.png"); font: black; opacity: 1.0; }

      Par ici pour visualiser le résultat

    Répondre à ce message

  • Le 17 janvier 2016 à 18:49, par François Daniel Giezendanner En réponse à : Bazar

    ... ou du moins que quelques articles et rubriques comportent une image et un logo ...

    Répondre à ce message

  • Le 17 janvier 2016 à 18:48, par François Daniel Giezendanner En réponse à : Bazar

    Bonjour,

    Votre démo http://bazar.choc02.fr/ est intéressante, cependant il serait utile que chaque article et rubrique comporte une image et un logo afin d’illustrer plus complètement les possibilités et le comportement du squelette Bazar.

    Bien cordialement

    FDG

    Répondre à ce message

  • Le 24 novembre 2015 à 17:09, par Ysabeau En réponse à : Bazar

    Si je comprends bien, comme il est basé sur la dist il est tout à fait multilingue non ?

    Si c’est le cas, il est possible que je l’adopte quelque part.

    Merci.

    • Le 24 novembre 2015 à 17:25, par chankalan En réponse à : Bazar

      L’inclusion des liens de traductions d’article existe, pas de soucis pour ça.
      Pour le menu de langue je ne l’utilise pas par défaut, mais c’est pas bien difficile de l’ajouter...

    Répondre à ce message

  • Le 1er novembre 2015 à 16:08, par cy_altern En réponse à : Bazar

    heu... dans le paragraphe « SPIP 3.0 et SPIP 3.1 » le conseil d’installation me semble bizarre...
    Ne vaudrait il pas mieux faire plus classiquement :

    • télécharger le squelette neo-dist
    • mettre son contenu dans le dossier squelettes/ à la racine du SPIP (si nécessaire le créer)

    cette méthode devrait fonctionner à l’identique mais sans avoir à modifier le « noyau » de SPIP (ce qui posera un problème à la première mise à jour...)

    • Le 1er novembre 2015 à 16:16, par chankalan En réponse à : Bazar

      oui en effet, la formulation pouvait prêter à confusion... il n’est pas question de modifier le noyau de SPIP...
      J’ai reformulé comme tu le proposes, merci !

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Passer un site SPIP sous https://

    23 février 2017 – 42 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Grappes 1.0

    23 novembre 2012 – 36 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)