SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 164 visiteurs en ce moment

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

Bazar

8 octobre 2015 – par chankalan, Pierke1 – 21 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 25 avril à 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 à 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 à 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

  • Métas +

    3 décembre 2016 – 27 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, vous (...)

  • Photoswipe

    18 septembre 2016 – 35 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 (...)

  • Japibas, squelette responsive

    11 octobre 2013 – 96 commentaires

    Japibas est un squelette responsive, multilingue (français, anglais et espagnol), dont l’habillage conviendrait à un site de type blog ou webzine. Le graphisme est inspiré du template Wordpress Japibas réalisé par Jesper Johansen et distribué sous (...)

  • GIS 4

    11 août 2012 – 1417 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaires

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)