Personnaliser les modules dans Over-Blog

Je reçois des questions par commentaires, par formulaire de contact, par mail aussi. Il y a peu j’ai reçu la question suivante : comment personnaliser ses modules ?

Je me suis dis : « et bien il suffit de suivre la méthode exposée dans l’article correspondant » et c’est là que je me suis aperçue que je n’avais jamais fait cet article alors que j’en étais persuadée.

Alors aujourd’hui, je comble ce trou : voici comment personnaliser un (ou tous) ses modules.

Pour commencer voici toutes les classes du module :

.box

C’est la classe générale de tout le module

.box a

Concerne les liens des modules non survolés par la souris

.box a:hover

Concerne les liens des modules survolés par la souris

.box-content

Les textes contenus dans les modules

.box-content ul

Les listes présentent dans les modules

.box-content ul li

Les puces des listes dans les modules

.box-titre

Concerne la cellule qui contient le titre du module

.box-titre h2

Concerne le texte du titre du module

.box-footer

Concerne le pied du module

Et maintenant, un petit exemple :

Je veux que mes modules soient encadrés d’une bordure épaisse en pointillés de 3px de couleur blanche et qu’il y ait une image en arrière plan sur un fond noir. Je veux que le texte à l’intérieur des modules soit écrit en rouge, en arial en 13px avec un espace de 3px sur les côtés pour éviter qu’il touche ma bordure blanche en pointillés et que mes liens soient en blanc et que survolés par la souris ils soient soulignés. Je veux que mes puces soit jaunes et rondes, que les liens présents dans les modules soient bleu et que quand je passe ma souris ils deviennent noir. Je veux que mon titre ait une autre image en fond présente en haut à droite qu’une fois et donc qui ne se répète pas et que mon titre soit écrit en blanc, en majuscule et soit souligné et pour terminer, je veux que mon pied de module fasse 10 px de hauteur et qu’il contienne une troisième image répétée en largeur.

Ce qui fait :

.box {border : 3px dashed #FFFFFF ; background: #000000 url(http://monimage.jpg);}

.box a {color :#FFFFFF ;}

.box a:hover {text-decoration:underline;}

.box-content {color :#FF0000; font-family:arial ; font-size :13px ; padding :3px ;}

.box-content ul li {list-style-type:disc; color:#FFFF00;}

.box-titre { background: #000000 url(http://monimage2.jpg) no-repeat top right;}

.box-titre h2 {color:FFFFFF; font-variant: small-caps; text-decoration:underline;}

.box-footer { background: #000000 url(http://monimage3.jpg) background-repeat : repeat-x;}

C'est article peut aussi vous intéresser : Dissocier les modules over-blog