Un graphique de popularité

Voici un petit morceau de CSS et de code SPIP pour afficher la popularité d’un article de façon graphique.

L’article sur les graphiques en CSS donne un très bon code CSS pour faire des « barres » graphiques sans perdre l’accessibilité ni introduire trop de code HTML.

Le premier exemple s’adapte très facilement à l’affichage de la popularité d’un article. Il vous suffit de placer le code suivant dans votre feuille de style (par exemple habillage.css) :

.graph { 
   position: relative; /* IE is dumb */
   width: 200px; 
   border: 1px solid #B1D632; 
   padding: 2px; 
}
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
         .graph .bar span { position: absolute; left: 1em; }

Ensuite, dans votre squelette (par exemple resume.html ou article.html) placez, dans une boucle article, le code suivant :

[<div class="graph">
    <strong class="bar" style="width: #POPULARITE%;">(#POPULARITE)%</strong>
</div>]

Discussion

3 discussions

  • 1

    1 simple
    2 rapide
    3 propre
    4 efficace

    excellent, merci beaucoup pour cette contrib que j’ai immediatement ajoute par defaut dans le squelette CahierSpip
    ( parfait pour les pages rubriques, plan et résumé )

    • Athama

      Vous pouvez voir ici l’intégration de cette contrib CSS dans l’affichage du résultat de sondage avec le module d’Artego : voir à la page d’accueil d’infosimmo.

    Répondre à ce message

  • 1

    Très sympatique et super simple, je l’ai couplé avec la contrib qui permet d’afficher les pertinences de recherche (moteur de recheche interne à SPIP).

    Mais, car il y a un « mais », cela reste problèmatique lorsqu’on arrive en dessous des 15% car la barre est alors trop petite pour accepter l’écriture « 15% » et cela renvoi le 5 et le % à la ligne.

    Si quelqu’un connaît la solution au niveau des CSS pour régler ce problème je serais évidemment preneur.

    • Gerald
      bonsoir
      je n’arrive pas à lancer SPIP en local pour débuter
      j’arrive à le télécharger et puis je ne sais pas comment poursuivre

    Répondre à ce message

  • salut

    c’est genial et je l’utilise pour mon site
    Voir mon site

    attention aux crochets [ et ] car je les ai enlevés.
    voilà

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom