SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 242 visiteurs en ce moment

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

Bazar

8 octobre 2015 – par chankalan, Pierke1 – 19 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 19 décembre 2015

Retour en haut de la page

Vos commentaires

  • Le 14 mars à 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 à 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 à 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 à 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 à 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

  • ScolaSPIP 4

    19 janvier 2016 – 164 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Vérifier ses plugins avant un changement de version de SPIP

    28 mars – commentaire

    Lister la compatibilité des plugins avec une autre version de SPIP Ce plugin est le successeur du plugin Vérifier ses plugins pour le passage à SPIP 3.1. Il permet de vérifier si ces plugins sont compatibles avec des versions plus récentes de (...)

  • bigfoot

    16 juin 2015 – 58 commentaires

    Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript. Le constat de l’auteur du script : Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de (...)

  • Mailshot

    16 janvier 2013 – 254 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • SkelEditor 2.0

    1er mars 2010 – 74 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)