SPIP-Contrib

SPIP-Contrib

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

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

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

Bazar

8 octobre 2015 – par chankalan, Pierke1 – 14 commentaires

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

  • Wordpress 2 SPIP

    26 mars 2012 – 25 commentaires

    Que fait Wordpress 2 SPIP Il importe un site Wordpress 3.3.1 dans un site SPIP 2.1.12 vierge. Les deux sites doivent être sur la même base de données et les tables Wordpress doivent commencer par wp_ (cas d’une installation Wordpress par défaut). (...)

  • Photoswipe

    18 septembre 2016 – 17 commentaires

    Une lightbox javascript responsive. PhotoSwipe est une boîte multimédia — comme la Mediabox installée en série avec SPIP — qui permet de zoomer à la taille réelle des images et qui gère intelligemment les légendes. Le plugin est basé sur la librairie (...)

  • Spip2Spip

    21 février 2008 – 157 commentaires

    Spip2spip permet de synchroniser le contenu de plusieurs sites SPIP entre eux en étendant le principe de la syndication thématique. Les articles d’un SPIP sont récopiés d’un site à l’autre en conservant leur formatage (...)

  • Tutoriel : créer une carte interactive avec GIS4

    19 octobre 2013 – 27 commentaires

    Utilisation de quelques fonctions javascript pour créer des interactions avec une carte GIS. L’objet de ce tutoriel est de produire une carte interactive. Effacer tous les points d’une carte La fonction javascript removeAllMarkers() (...)

  • Lecteur pdf javascript pdf.js

    20 février 2012 – 146 commentaires

    Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur. Ce plugin est expérimental et les contributions sur la zone sont les bienvenues. Avantages Open source Ne requiert pas flash et (...)