22 août 2010

(OverBlog) Modifier les puces

Les puces sont ces petits carrés 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, il s'agit de modifier toutes les puces du blog. Dans d'autres articles, vous verrez qu'il est possible, ensuite de modifier dans les articles, les pages, les modules ...

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

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;} 

8 commentaires:

  1. Comment changer la couleur de la puce quand on survole le lien qui est sur sa droite ?
    voir ce site http://www.vtt26.com/
    Accueil, les photos....
    Faisable ou pas ?
    Bravo et merci pour tes conseilles

    RépondreSupprimer
  2. Bonjour Iloria, je vois que tu y es arrivée, elle passe de rouge à noir.

    RépondreSupprimer
  3. Comment changer la couleur de la puce quand on survole le lien qui est sur sa droite ?
    voir ce site http://www.vtt26.com/
    Je me suis mal exprimé, comment reproduire le même effet sur mon blog ?
    Faisable ou pas ?
    Merci

    RépondreSupprimer
  4. Ok :)
    Pour changer la couleur de la puce (en rouge) de tous les liens de tes modules, tu rajoutes tout en bas de ton CSS :
    .box-content li:hover {color:red;}

    RépondreSupprimer
  5. Comment rajouter une puce dans le module "Partager ce blog"?
    je ne trouve pas l'article sur ton site.
    Merci

    RépondreSupprimer
  6. Bonjour Iloria :)
    Ce n'est pas une liste, donc il n'est pas possible de rajouter une puce.
    Par contre, on peut tricher en rajouter un background.
    Dans les faits, rajoute tout à la fin de ton CSS :
    .box5 a {background-image:url(http://4.bp.blogspot.com/_RpcwHx8W2XM/TUkxsCGhkGI/AAAAAAAABoQ/_F9osypPBjc/s1600/puce.png);background-repeat:no-repeat;background-position:left;padding-left:10px;margin-left:5px}

    RépondreSupprimer
  7. Bonjour je voulais savoir ou trouver des puces et si pour le module page sur overblog sa pouvez marcher.
    En tous cas bravo pour tous ce que tu fais

    RépondreSupprimer
  8. bonjour IIoria,
    je voulais savoir comment modifier l'espace entre deux gadgets ?
    Merci beaucoup pour tes conseils.

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)