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://votreimage.jpg); }

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://votreimage.jpg); background-repeat: repeat-x; background-position: top center;}
Remplacer votreimage.jpg par l'adresse URL de votre image !!!