(Blogger) Modifier les puces

Les puces sont ces petits carrés ou ronds en début de chaque ligne d'une liste.

Vous avez le choix entre :

• disc  (rond plein)
• circle (cercle)
• square (carré)

et

• les puces sous forme de dessin. Ce sont des fichiers avec n'importe quelle extension : .gif, .png... Leur format est de 8*8 px en moyenne.

Dans cet article, nous verrons comment modifier toutes les puces du blog. Dans d'autres articles, vous verrez qu'il est possible, ensuite de modifier dans les messages, widgets ...

Pour commencer, allez dans le CSS : Présentation > Modifier l'HTML et complétez la ligne avec ce qui est en rouge

A noter, li est un des rares termes communs à tous les CSS, sur toutes les plateformes.

Pour enlever les puces

li {list-style:none; }

Pour mettre une puce classique

li {list-style:disc; }
ou
li {list-style:square; }
ou
li {list-style:circle; }

Pour mettre une puce image

li {list-style-image:url(adresse de la puce); }

QUELQUES ASTUCES

Pour changer la couleur de la puce au survol de la souris

ul li:hover {color:red; }

Pour changer la forme de la puce au survol de la souris

ul li:hover {list-style:disc; }
ou
ul li:hover {list-style:square; }
ou
ul li:hover {list-style:circle; }
ou
ul li:hover {list-style-image:url(adresse de la puce); }

Si vous préférez une liste décimale au lieu d'une puce

li {list-style-type:decimal;}