CSS d'Over-Blog : personnaliser les modules

Voici quelques précisions sur la classe des modules du CSS d’Over-Blog. Les modules sont les petites choses que l’on trouve dans les colonnes : les derniers articles publiés, les liens, la présentation, l’inscription à la newsletter… etc…

Il est souvent indispensable de savoir les modifier afin de les adapter à son choix de design.

Les modules s’identifient dans le CSS par cet identifiant :

.box {}

On peut aussi trouver les éléments suivants :

.box-titre {} _______________________ le texte du titre des module

.box h2 {}  _________________________ l’entête du module où se trouve le titre

.box-content {} _____________________ le contenu des modules

.box-content p {} ___________________ les textes des modules

.box-content ul {} __________________ les listes des modules

.box-content li {} __________________ les puces des modules

.box-footer {} ______________________ les pieds des modules

Ce qui est utile pour mettre une bordure, un cadre, une décoration autour des modules :

.box-top _____________________ le haut des modules

.box-left ____________________ le côté gauche des modules

.box-right ___________________ le côté droit des modules

.box-bottom __________________ le bas de la boîte des modules

.box-topLeft _________________ le coin en haut à gauche des modules

.box-topRight ________________ le coin en haut à droite des modules

.box-bottomLeft ______________ le coin en bas à gauche des modules

.box-bottomRight _____________ le coin en bas à droite des modules

Comment mettre des éléments ou un cadre autour des modules ?

Le haut du module :

Il faut ajouter une image en fond de la classe .box-top

.box-top { background-image: url(http://monimage/haut_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-top { background-image: url(http://monimage/haut_module.png); background-repeat: repeat-x; background-position: top center;}

Il faut ensuite refaire cette opération pour chaque éléments avec chaque image si besoin est. Ce n’est pas nécessaire de mettre une image à chaque endroit possible des modules : vous pouvez n’indiquer qu’une bordure, qu’un titre, qu’un pied…

Mais si vous souhaitez faire la totale, voici un exemple de code :

Le bas du module :

Il faut ajouter une image en fond de la classe .box-bottom

.box-top { background-image: url(http://monimage/bas_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord inférieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-bottom { background-image: url(http://monimage/bas_module.png); background-repeat: repeat-x; background-position: bottom center;}

Encore un autre ?

L’angle en haut à droite du module :

Il faut ajouter une image en fond de la classe .box-topRight

.box-topRight { background-image: url(http://monimage/anglehautdroite_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on ne veut pas qu’elle soit répétée et quelle soit collée à droite :

.box-topRight { background-image: url(http://monimage/ anglehautdroite.png); background-repeat:no-repeat ; background-position: top right;}

Allez, un dernier :

Le côté gauche du module :

Il faut ajouter une image en fond de la classe .box-left

.box-left { background-image: url(http://monimage/cotegauche_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on veut qu’elle soit répétée en hauteur et quelle soit collée à gauche :

.box-left { background-image: url(http://monimage/cotegauche.png); background-repeat:y ; background-position: top left;}