Comment faire apparaitre des puces graphiques dans un article de son blog

Une demande expresse de notre amie Marie Noël à propos du paramétrage des puces dans un article de blog me donne l’idée de faire cet article.

En effet, hier je vous expliquais qu’il était vraiment très bénéfique de mettre des puces promesses graphiques en forme de triangle ou de flèches dans un article de blog (ou sur une page de vente) pour focaliser l’attention sur des éléments importants.

Oui mais voilà.

Comment faire en pratique ?

Voici une procédure en 3 étapes :

Etape 1 : Trouver le fichier CSS de votre thème

Il s’agit du fichier qui donne son aspect visuel à votre blog.

Vous pouvez généralement y accéder en passant par le tableau de bord de votre blog.

Si vous êtes sous WordPress, alors cliquez sur “Apparence” puis “Editeur”.

Choisissez le thème de votre blog dans le menu déroulant si vous en avez plusieurs.

En général, c’est la feuille de style qui s’affiche en premier :

feuille-de-style

Etape 2 : Choisissez l’image de la puce que vous voulez

Vous avez le choix parmi 2400 exemplaires de puces graphiques. Vous pouvez aussi la créer.

Une fois que vous l’avez choisie, allez la glisser dans le répertoire “images” de votre thème sur le serveur d’hébergement de votre blog, en utilisant par exemple le logiciel FileZilla.

Par exemple :

etape-2-image-puces

Etape 3 : Modifiez le code de vos puces dans le fichier CSS

Arrive la partie la plus délicate.

Repérez dans votre fichier de style, la balise “li”. Si elle ne s’y trouve pas, créez là en marquant :

li { }

Entre les deux accolades, voici par exemple ce que vous pourriez y mettre :

etape-3-code-puces

Dans l’exemple ci-dessus, vous voyez ce qui produit ça sur ce blog :

  • list-style-type: none; (1) enlève le point qu’on voit généralement devant les éléments une liste
  • background: url(images/puce2.jpg); (2) rajoute l’image que vous avez choisie en arrière plan de votre texte. C’est la puce graphique.
  • background-repeat: no-repeat; (3) ne la fait apparaitre qu’une fois, sinon, elle se répèterait derrière tout le contenu de liste.
  • padding-left: 35px; (4) détermine l’espace qu’il y a entre le bout droit de votre puce et le début du texte.
  • margin-top: 10px; (5) détermine l’espace qu’il y a entre deux lignes de la liste
  • margin-left: 15px; (6) détermine la distance entre le bord gauche de l’article et le bout gauche de votre puce

Pour les éléments 4, 5 et 6, voici un petit schéma pour que vous compreniez mieux :

etape3-miseenforme

Une fois que vous avez modifié tout ça, cliquez bien sur le bon bouton pour enregistrer les modifications.

Normalement, les puces de vos articles sont devenues graphiques.

Essayez, et dites-moi si vous vous en sortez.

Précédent

Voyons si vous connaissez et utilisez ce truc de fourbe pour attirer et garder les gens chez vous…

Suivant

Procédure vidéo : Comment rajouter une Foire aux Questions sur votre blog

  1. Salut Yvon.

    Si tu savais comment j’ai galéré pendant des heures avec mon CSS pour pouvoir mettre des puces graphiques !!! Et au final, je n’y suis pas arrivé.

    Donc, merci énormément pour cette procédure ! :super:

    Daouda

  2. Salut Yvon,

    J’aime quand tu nous expliques le code comme, j’aime ! ;)

    C’est fluide comme de la prose et ça nous donne une traduction.

    Du coup, on arrive même à avoir la mini-impression qu’on “gère un brin le css » ;-)

    Merci à toi.

  3. Salut Yvon,

    Ton article est très intéressant et jusqu’a maintenant, quand j’ai voulu insérer des puces, je me suis contenté de celles fournies avec l’éditeur de texte de wordpress, je ne savais pas qu’on pouvait embellir tout ca…merci donc pour ce billet !

    Au fait, saurais-tu dans la même veine comment s’y prendre pour insérer un tableau Excel ou un graphique dans WordPress? :haha:

    • Salut Cédric

      Insérer un tableau excel dans un article, c’est facile : Il suffit de faire une impression écran de ton tableau et d’insérer l’image dans ton article.
      Un graphique, c’est une image. Tu le crées n’importe où et tu l’insère en tant qu’image dans ton article.

      Yvon

  4. Bonsoir Yvon.
    Génial l’insertion des puces justement je cherchais comment faire depuis un petit moment.
    Je vais essayer ça demain! 8))

  5. Bonjour Yvon,

    Comme si tu lisais dans mes idées, j’avais exactement besoin de ce tutoriel et je n’avais aucune idée comment faire.

    Merci énormément pour pour cette méthode claire et accessible.

    Amicalement,

    Redouan

  6. oh très intéressant ce petit tuto !

    Dis, tu sembles tout savoir… t’es bon en mécanique automobile?

    Blague à part, comment fais-tu pour trouver les réponses avant que la question ne te soit posée? Car encore une fois c’est une réponse que je cherchais… et j’ai même pas eu le temps de l’exprimer clairement dans ma pensée que déjà elle est là, sous mes yeux !

    Et ceux qui ne croient pas à la Loi d’attraction retournent s’habiller !

    MERCI BEAUCOUP !

    • Coucou Sylvie

      En fait c’ess Marie Noel qui l’a demandé avant-hier. Et je m’aperçois que lorsqu’une personne demande, c’est 100 qui n’ont pas oser le faire ;)
      Quant à la mécanique auto, alors là je suis aussi bon en ça qu’en tricot : c’est à dire totalement nul de chez nul :D

      Bonne journée

      Yvon

  7. Bonjour Yvon,

    voilà un exercice que j’avais tenté de réalisé (grâce à tes puces) il y a quelques temps. J’avais pour cela, essayer d’insérer des images mais comme tu t’en doutes, le résultat n’était pas celui que j’espérais.

    Les puces se trouvaient décalées par rapport au texte.
    Je m’étais alors demandé par quel tour de passe passe les tiennes se retrouvaient au bon endroit ? :evil:

    Aujourd’hui tu nous livres le mode d’emploi que je testerais dès demain. Un grand merci à toi Yvon. ;)

    Je te souhaite un excellent week end.

    Albin

  8. BK

    Salut Yvon,

    Et ça marche avec Windows Live Writer ?

    Bernard

    • Rien à voir :)

      WLW récupère ton fichier de style et affiche ainsi la même chose que ton blog.
      Une fois que tu as paramétré ta balise « li » dans ton fichier de style, alors tu n’as plus rien à faire. Juste à créer des listes à puces, qui se mettront correctement sur ton blog et dans WLW

      Yvon

  9. poco06

    Bonjour Yvon,
    Merci pour le tuto. J’ai une petite question complémentaire : lorsque j’applique la méthode, je retrouve bien les puces graphiques sur mes listes, mais je les ai également sur mes « related posts », qui se trouvent en bas de mon article. Y a-t-il un moyen pour éviter cela?
    Merci d’avance.

    • Bonjour

      En fait, pour qu’ils ne soient pas sur tes related posts, alors tu dois créer une procédure spéciale pour tes related.

      En gros, regarde :

      Par défaut, ceci affiche les puces comme ça DANS un article :

      .post li {
      list-style-type: none;
      background: url(images/puce2.jpg);
      background-repeat: no-repeat;
      background-position: 0 0 0.32em 0.42em;
      padding-left: 35px;
      margin-top: 10px;
      margin-left: 15px;
      }

      Ceci affiche des puces différentes dans les related-posts :

      #similar-posts li {
      list-style-type: none;
      background: url(images/puce.jpg);
      background-repeat: no-repeat;
      background-position: 0 0 0.32em 0.42em;
      padding-left: 35px;
      margin-top: 10px;
      margin-left: 15px;
      }

      L’image change, tout simplement.
      Pour que ça fonctionne, alors tu dois trouver dans le fichier de ton article (en général, c’est single.php) l’endroit où les similar posts s’affichent (ou alors aller le faire directement sur la fenetre de paramétrage du plugin) et entourer tes similar posts avec un truc du genre :

      <div id="similar-posts">
      — tes similars posts—
      </div>

      Bonne journée

      Yvon

      • poco06

        Merci pour l’info Yvon,

        Je vais regarder cela de plus près car j’utilise des shortcodes pour automatiser certaines mise en page.

    • Màj : Yvon, tu as posté en même temps que moi, puisque tu apportes la solution, tu peux supprimer mon post. :-)

      Bonjour à tous,

      voilà un joli sujet qui me « parle » ! Au passage, merci Yvon ! :super:

      @Poco06 : c’est normal que tu retrouves tes puces à cet endroit, car elles vont être attribuées à tous les éléments ‘li’ (les listes) de la feuille de style CSS du thème de ton blog.

      Je ne sais pas quel thème et quel plugin tu utilises pour les « related posts », mais je vois deux options possibles (dans l’absolu et en théorie) : soit aller regarder si le plugin en question dispose de sa propre feuille de style pour lui appliquer des puces spécifiques, soit il faudrait créer une nouvelle classe ‘li’ spécifique pour les « related posts » dans la feuille de style du thème.

      Je viens de regarder dans mon blog, et le plugin WordPress Related Posts (celui que j’utilise) ne dispose d’aucune feuille de style donc il utilise celle du thème par défaut.

      Dans l’immédiat, n’ayant pas fouillé plus loin, je ne peux pas te dire comment créer cette classe spécifique dans la feuille de style pour qu’elle s’applique aux listes du plugin. C’est un tantinet passablement très technique… :hin:

      Bon weekend à tous !
      Alexandra

      • Bonjour Alexandra

        Supprimer ton commentaire ?? Non mais tu rêves :D
        Tu laisses un commentaire en 2 mois, si en plus je le supprime mais où va-t-on ???

        Merci d’être passée ;)

        Bonne journée

        Yvon

  10. Bonjour les insomniaques :

    En vous lisant, j’ai eu l’idée de faire un article sur le sommeil.

    Blague à part, je te remercie Yvon pour ce tout oriel.

    Je pourrais en fin mettre quelques puces dans mes articles.
    Après tu nous fais un autre exemple pour les autres images?

    Merci encore et bonne journée.

    Jaime

  11. Bel article… J’en avais besoin. Merci
    A propos, le ZIP des 1400 puces graphiques est protégé par mot de passe. Est-ce une erreur de téléchargement? Si non, alors merci de me le faire connaitre.

    Bonne journée.

    • Bonjour Franck

      Le zip n’est pas protégé (je viens d’essayer). Ca sent le trojan ou le virus sur ta machine…

      Bonne journée

      Yvon

  12. bonjour Yvon,
    Oulala j’ai mal à la tête avec tous ces codes ! :-P

    Est-ce que cette manipulation fonctionne avec tous les thèmes WP ?
    Cela dit je n’ai pas encore testé sur mon blog, je vais m’y mettre ce week-end.
    Merci pour ton partage d’infos Yvon. Toujours aussi pratique et pédagogique. :)

    A bientôt,
    Caroline

  13. Ma-gni-fi-que !!! J’avais essayé d’améliorer mes puces sans résultats : (grand rire). Là je plonge dans le code et te suis à la lettre.
    Tu vas aussi nous dire comme mettre cette lettrine, je me casse les dents dessus depuis une bonne semaine ?
    Un grand MERCI.

    • mo

      Bonjour Yvon,

      comme il y a une histoire de puces , je vais demander au chat de ne pas s’approcher de l’ordinateur…laisser la souris en première ligne! :D

      Assez rigolé, en tout cas merci pour cet article qui manifestement arrive au bon moment.

      CDLT

    • Bonjour Jean Nicolas

      Pour la lettrine, c’est un truc perso ;)
      Tu peux néanmoins utiliser le plugin dropcaps.

      Bonne soirée

      Yvon

  14. Bonjour et merci pour cette article, mais je ne sais pas comment procéder sur mon blog dont est créé sans serveur d’hébergement type FileZilla, mais tout simplement sur sous-domaine.

    Peut-être connais-tu l’astuce comment je peut le faire, merci d’avance!

  15. Salut Yvon,

    Le génie en informatique que je suis à malheureusement flanché après trois lignes.

    Par contre, j’en ai parlé à mon chien, que j’ai appelé wordpress (un croisé background-repeat à poil très dur) et il a adoré ton article.

    Allez savoir pourquoi? :-P

    @+

    Christian.

  16. Bon, j’ai essayé mais n’y suis pas arrivée; En fait, j’ai plein de lignes de code avec li.

    J’ai modifié celle qui ressemblait le plus à ce que tu proposes mais rien n’y a fait.

    ul.list-icon li {list-style-type: none;backround: url(images/20.jpg);backround-position: 0 0 0.32em 0.42em;padding-left: 0 0 0 24px;margin-top: 0 0 10px 0;margin-left: 0 0 15px 0; background-repeat: no-repeat;}

    ul.list-icon li a {font-size: 100%;line-height: 1.7em;}
    .text-icon {display: inline-block;line-height: 20px;font-size: 110%;background-repeat: no-repeat;padding-left: 24px;}
    span.email, span.phone, span.quote, span.cart, span.rss, span.tags, span.write, span.info, span.sound, .email li, .phone li, .quote li, .cart li, .rss li, .tags li, .write li, .info li, .sound li {background-image: url(../images/typography/dark/icon-set1.png);}

    Si ça te dit quelque chose. Sinon, je continuerai à bricoler. J’aime ça le bricolage!

    belle journée à toi.. et aux autres!

    • Salut Marie Noel

      Je viens de regarder le code de ton blog c’est une véritable usine à gaz.
      Je pense que le mieux serait de créer carrément une procédure en li. Tout simple.
      Sur ton fichier CSS. Et voir ce que ça donne.

      Bonne soirée

      Yvon

  17. Salut Ô infatigable maître-nageur.
    Intéressant. Je conserve pour les soirées d’hiver.
    Quoiqu’ici dans le Nord, c’est toujours l’hiver en ce foutu printemps

  18. Bonjour Yvon,
    Bravo pour cette explication très claire.

    Tu détailles une technique, mais comme souvent en programmation, il en existe une autre (selon moi plus simple).

    Je la détaille dans cet article http://lesdoigtsdanslenet.com/utiliser-une-image-sur-une-liste-html/

    D’ailleurs cet article m’avait été inspiré par un de tes articles (que je mentionne à la fin).

    • Coucou MarieEve

      Merci pour la procédure, mais hélas elle est totalement inadaptée aux puces que je propose. En effet, cette procédure va bien mettre des puces graphiques, mais elles vont se chevaucher les unes les autres.

      En fait, la méthode CSS que je décris ici est celle qui te permet de pouvoir mettre n’importe quelles puces (de n’importe quelle taille), et de gérer de la même manière SUR TOUS LES navigateurs l’affichage de ces puces.

      Avec ton système, va regarder ta liste sur IE, sur Chrome et sur FF et tu vas voir la folie complète.

      Mais merci pour cette procédure, néanmoins.

      Bonne soirée

      Yvon

  19. Bonjour, Yvon.

    Un autre article de très grande valeur… pour les érudits !

    Cependant, dès que je vois un code HTML à modifier, me voilà complètement désarçonné, incapable de reconnaitre ce qui est le code lui-même et ce qui est un simple exemple.
    Autrement dit : Je n’y comprends rien ! Je sais que je passe pour un béotien en informatique… Mais c’est ce que je suis :-? !!!

    Donc, j’ai bien téléchargé et extrait les 2 400 puces ! J’en ai choisi 4 ou 5 (sur 2 400 !) que j’ai placées dans la biblio d’images de mon blog… et vogue la galère ! Je comprends qu’il y a certainement beaucoup mieux à faire, mais je dois me contenter de ça… en attendant !

    Très amicalement.

    Philippe L.

    • Bonjour Philippe

      Tu sais le html et le css ce n’est pas réellement compliqué quand on démarre du tout début.

      Je veux dire que tu peux commencer à écrire un texte de base, tout simple, et ensuite tu peux attaquer ton code CSS.
      Il suffit de connaitre les bonnes balises. Ca ne prend pas longtemps à apprendre.

      Ca parait compliqué, mais ca ne l’est pas tant que ça. Et quand on maitrise un tout petit peu, c’est vraiment le paradis pour faire évoluer notre design.

      Bonne soirée

      Yvon

  20. Bonsoir Yvon,

    Merci pour cette article qui nous explique de façon claire comment mettre une puce personnalisée sur son blog et cela une bonne fois pour toute !

    Enfin, tant que l’on ne change pas de thème ou actualise celui que l’on a ;-)

    C’est peut-être bête, mais je ne saurais trop conseiller à ceux qui bidouillent les codes CSS ou HTML de leur blog de :

    – Soit créer un fichier avec tous les changements fait sur leur thème avec des titres et explications sur les « dit-changement ».

    Comme par exemple => Mes puces personnalisées
    .post li {
    list-style-type: none;
    background: url(images/puce2.jpg);
    background-repeat: no-repeat;
    padding-left: 25px;
    margin-top: 10px;
    margin-left: 35px;
    }

    – Soit de créer un thème enfant avec tous les changements -qui prend le dessus sur celui du thème- et d’en avoir une copie sur son ordinateur.
    Comme cela, en cas « d’Upgrade » de thème, on perd moins de temps à tout reconfigurer ;)

    Par contre si on change de thème :-?

    Autrement, j’avais moi-même longtemps cherché comment mettre ces fichues puces ! La solution que j’avais adopté me satisfaisait moyennement -problème de centrage entre la puce et le texte-. J’ai modifié le code comme expliqué ici et maintenant c’est bon :haha:

    Juste un truc pour ceux qui ont le thème MYSTIQUE, si les puces ne s’affichent pas sur les pages statiques, il faut mettre aussi ce code :

    .page li{
    list-style-type: none;
    background: url(images/puce2.jpg);
    background-repeat: no-repeat;
    padding-left: 25px;
    margin-top: 10px;
    margin-left: 35px;
    }
    Avec vos réglages, hein :hin: Et puis avec ce thème vous avez le « CSS de l’utilisateur » qui fait office de thème enfant …

    Bonne soirée

    Nancy

    PS : C’est quoi le « background-position » ? C’est important ? À moins que cela ne fasse parti de ton thème ?

    • Coucou Nancy

      Très bonne remarque sur l’enregistrement des changements.
      J’en profite pour dire que je ne conseille pas de changer de thème pour son blog.

      Le background position te permet de faire bouger ta puce. Tu peux lui rajouter une marge pour par exemple faire correspondre le bout de ton triangle au niveau du milieu de ton texte. C’est comme une image, quoi.

      Bonne soirée

      Yvon

  21. Merci pour cet article Yvon. J’ai bataillé de longues heures pour affiché des puces sur mon blog au même titre que pour ajouter un fond (background) différent.

    Après des heures j’y suis arrivé mais c’est bien galère il faut l’avouer

    Merci encore pour ce partage

  22. Bonjour Yvon,

    Merci infiniment de nous aider ainsi à améliorer l’apparence de nos blogs :)

    J’ai un soucis avec la ligne

    background-position: 0 0 0.32em 0.42em;

    qui est apparement invalide dans mon thème enfant de twenty-eleven…

Laisser un commentaire

;) :super: :red: :hin: :haha: :evil: :cry: :coeur: :cafe: :beer: :D :?: :-z :-x :-o :-P :-? :) :( 8))

Créé et géré avec par Yvon CAVELIER