Depuis les post it jusqu’aux termes visibles lors de la rédaction de commentaires, tout est maintenant en français. J’ai ajouté des puces en image pour la liste à puce de la colonne latérale et celle du sommaire en me basant au tutoriel de Openweb.eu sur la création de puces en images.
En premier, une des images du thème a offert un post it, sélectionné et pivoté à 90° environ, sous Gimp, agrandi avec un zoom de 400% pour y placer une bordure grise de sorte à donner l’impression de bords nets, et une fois le fichier enregistré, j’ai redimensionné l’image avec convert et mogrify. (mogrify -resize 50% puce.png).
J’ai adapté le bloc de texte proposé par le tutoriel de Openweb.eu en ajoutant les données trouvées dans le bloc correspondant : à l’origine, il y avait des cercles vides en guise de puces.
Sur le tutoriel :
li {
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: 100%;
color: black;
list-style-type: none;
background-image: url(puce.png);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 15px;
}
Dans la feuille de style d’origine :
#sidebar ul ul li{
list-style: circle;
margin-left: 15px;
color: #000000;
border: 0px;
background: url(”);
padding: 0px;
Dans la feuille de style finale :
#sidebar ul ul li {
list-style-type: none;
margin-left: 5px;
color: #000000;
border: 0px;
padding: 0px;
background-image: url(‘images/puce.png’);
background-repeat: no-repeat;
background-position: 0% 45%;
padding-left: 15px;
}
La phrase list-style-type est là pour suivre le conseil final du tutoriel, «De plus, il faut bien sûr désactiver les puces par défaut à l’aide de list-style-type:none;» pour remplacer «list-style: circle; ». J’ai trouvé une valeur de 5px pour margin-left en faisant plusieurs essais successifs, tout comme la deuxième valeur de 45% pour background-position, qui correspond à l’alignement en hauteur de l’image par rapport au texte.
À noter un tutoriel chez Pompage.net, qui initie aux CSS en 15 leçons.
CSS : on reprend tout à zéro ! Par Joe Gillespie.