03 avril 2013

Afficher les articles dans des boîtes

Il peut être intéressant d'afficher chaque article de son blog dans une boîte. Cela permet de bien repérer où il commence et où il finit. C'est le choix que j'ai fait pour le blog que vous êtes en train de lire, vous pouvez donc voir ce que cela donne.

La boîte en question doit pouvoir s'afficher aussi bien avec un article entier qu'avec un article sous forme d'extraits (nouvelle possibilité offerte par Canalblog).

Pour cela, pas besoin d'ajouter quoi que ce soit dans les pages HTML, il faudra juste ajouter le sélecteur .blogbody .item_div dans la feuille de style (n'importe où, cela n'a pas d'importance). Ce qui donnera par exemple pour l'affichage d'une boîte grise (valeur hexadécimale de la couleur : #353B36) :

 

.blogbody .item_div {
    background-color: #353B36;
}

 

On pourra bien sûr ajouter d'autres précisions comme la marge intérieure (padding), la marge extérieure inférieure (margin-bottom) et des coins arrondis (border-radius) :

 

.blogbody .item_div {
   background-color: #353B36;
   padding: 10px;
   margin-bottom: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
}

 

N'oubliez pas d'adpater la couleur des caractères en fonction de la couleur de fond choisie :

Modifiez la propriété color (couleur des caractères) dans les sélecteurs suivants :

 

.blogbody
.blogbody h2
.blogbody h3
.blogbody p
.blogbody
.itemfooter
.dateheader

Posté par Michal53 à 10:00 - - Permalien [#]
Tags : , , , , , , ,