Aujourd’hui, j’aimerai vous montrer comment modifier la css de Zlio pour avoir des categories plus claires.

Voici comment est la page avant modifications:

Et voici ce que deviendra la page après modifications:

Pour parvenir à ce résultat, nous allons simplement toucher a la classe .product-preview

---

Tout d’abord, ajoutons-lui une largeur pour que les produits soient moins collés entre-eux:

.product-preview {
width:90%;
}

Ensuite, nous allons ajouter un contour de 2px sur le bas nom du produit:

.product-preview a.product-name {
border-bottom:2px solid #a6d003;
}


Puis, nous changeons la couleur et l’épaisseur de la police du descriptif du produit:

.product-preview .product-review {
color:#a6d003;
font-weight:bold;
}


Enfin, nous définissons le survol du nom du produit:

.product-preview a.product-name:hover {
color: black;
background:#a6d003;
border-bottom:2px solid #555555;
}


Et voilà, les produits de la boutique Zlio sont plus clairement affichés, et profitent du roll-over pour se montrer plus vivants !

Cet article a été publié le Mardi 19 juin 2007 à 11.36 am et est classé dans Zlio. Vous pouvez suivre les réponses reçues par cet article grâce au fil RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre site.
Tags: Zlio

Billets pouvant vous intéresser

None