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 :
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 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 :
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 :
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.
Devenez membre de Copywriting Pratique !
Si vous souhaitez :
- Recevoir chaque nouvel article du blog directement dans votre boîte mail (si vous le souhaitez),
- Avoir accès à des générateurs en ligne inédits (générateur de slogans, de noms de marques, d'accroches, un dico des synonymes avec une mise en situation, un formateur d'emails et même le fameux calculateur du Sympathomètre d'un texte),
- Un guide qui vous explique comment trouver plus de 354 millions d’images gratuites et libres de droits...
Pour vous inscrire et avoir accès à tout ça, c'est facile : Indiquez votre prénom et votre email dans le formulaire ci-dessous :
Daouda
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 !
Daouda
Grégory @ Virtuose de la Vie
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.
Cedric
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?
Yvon
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
Philippe
Bonsoir Yvon.
Génial l’insertion des puces justement je cherchais comment faire depuis un petit moment.
Je vais essayer ça demain!
Redouan
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
Sylvie Laflamme
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 !
Yvon
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
Bonne journée
Yvon
Albin
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 ?
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
BK
Salut Yvon,
Et ça marche avec Windows Live Writer ?
Bernard
Yvon
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
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.
Yvon
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 :
Ceci affiche des puces différentes dans les related-posts :
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.
Alexandra
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 !
@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…
Bon weekend à tous !
Alexandra
Yvon
Bonjour Alexandra
Supprimer ton commentaire ?? Non mais tu rêves
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
jaime de latitude-positive
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
Franck
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.
Yvon
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
Caroline
bonjour Yvon,
Oulala j’ai mal à la tête avec tous ces codes !
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
Jean Nicolas
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!
Assez rigolé, en tout cas merci pour cet article qui manifestement arrive au bon moment.
CDLT
Yvon
Bonjour Jean Nicolas
Pour la lettrine, c’est un truc perso
Tu peux néanmoins utiliser le plugin dropcaps.
Bonne soirée
Yvon
Galyna
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!
Christian
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?
@+
Christian.
Marie-Noel
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!
Yvon
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
Marie-Noel
Let’s try (quand j’aurai une demi-seconde!) Merci tout plein.
etienne
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
MarieEve
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).
Yvon
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
MarieEve@creation de site web
Bien vu! Tu as raison, quand la puce est trop grande, tout se chevauche…je n’y avais pas pensé!
Philippe41
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.
Yvon
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
Noellitto
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
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{
Et puis avec ce thème vous avez le « CSS de l’utilisateur » qui fait office de thème enfant …
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
Bonne soirée
Nancy
PS : C’est quoi le « background-position » ? C’est important ? À moins que cela ne fasse parti de ton thème ?
Yvon
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
ludovic
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
David
Bonjour Yvon,
Merci infiniment de nous aider ainsi à améliorer l’apparence de nos blogs
J’ai un soucis avec la ligne
qui est apparement invalide dans mon thème enfant de twenty-eleven…