Merci à zoélie pour cet article

Première chose à savoir, les contours des modules sont des images , ils ne se traitent donc pas tout à fait comme le reste...


Vous devez donc créer des images sur votre ordinateur avec Photoshop ou The Gimp, de préférence en .png . Il en faut pour le bord supérieur, le bord inférieur, le bord droit et le bord gauche, et, éventuellement pour les 4 coins. Elles peuvent être identiques ou differentes en taille et en apparence.


Deux solutions s'offrent à vous :

- Soit vous créer l'image de la taille exact de vos modules : par exemple, votre module fait 200px en largeur, donc les bords haut et bas devront faire 200px. Ce n'est pas une très bonne solution, d'une part parce que si la largeur n'est pas bien fixée, chez certains de vos lecteurs, les modules n'auront pas la même largeur et l'image dépassera ou sera trop petite. D'autre part, si vous ajoutez des lignes dans vos modules, la hauteur des bords devra être modifier à chaque fois (= refaire l'image...).

- Soit vous créer un motif de petite taille (en largeur pour les bords haut et bas et en hauteur pour les bords droite et gauche) qui pourra se répéter à l'infini. Vous n'aurez donc pas le 2 problèmes cités ci-dessus, mais ca restreint le choix du design.

Je conseille cependant cette derniere solution, sachant que si vous voulez une image complexe dans votre contour (par exemple un petit schtroumpf...), vous avez la possibilité de mettre celle-ci dans l'image des coins. Les coins (uniques) resteront fixes et l'image de la bordure entre les coins sera un motif répété en nombre variable...

Pour trouver de jolis motifs, Google Images, par exemple, est votre ami... Faire des recherches avec le mot-cle "textures" est efficace aussi.
Pour avoir des formes autres qu'un rectangle pour chaque bord (notament pour le bord haut), vous pouvez télécharger une texture - vous aurez un motif rectangulaire et avec votre logiciel, vous "creusez" dans l'image pour faire le design qui vous plait, en prenant bien soin qu'il soit symétrique, puisqu'il va se répéter...
De même, c'est la méthode pour faire des coins arrondis.


Une fois que vous avez chargé toutes vos images de bordures dans vos fichiers Over-Blog, il faut les insérer dans le CSS.

1ere étape :

- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box désigne les modules).


.box-top désigne la bordure supérieure, .box-bottom : la bordure inférieure, .box-left : le bord gauche et .box-right : le bord droit .
.box-topLeft est le coin supérieur gauche, .box-bottomRight est le coin inférieur droit, ...etc

ATTENTION, il ne faut pas modifier le .box (le module dans son ensemble) !

Si vous avez choisi un motif à répéter, vous faites :
- pour les bordures horizontales ( = haut et bas) :



Et idem pour le haut en remplacant tous les bottom par top.

- pour les bordures verticales ( = droite et gauche) :



Idem pour right.

Pour les coins, qui ne se répètent pas, ou si vous avez choisi un motif de la taille du module. vous faites :



Idem pour les 3 autres coins.



2eme étape :

Pour placer correctement vos bordures par rapport au texte contenu dans le module, il faut jouer sur le padding et le margin.
Attention : Le padding d'un .objet est "l'indentation", la marge de ce qu'il y a à l'interieur de l'objet. Le padding est donc un attribut des .box.
Le margin est la marge de l'objet lui-même. Dans notre cas, ce sera donc un attribut du .box-content.


Le plus simple est d'utiliser le padding-top pour l'emplacement du titre des modules, à mettre dans le .box-top, et le margin pour le texte du module.

- Si vous voulez que le titre du module soit sur l'image du contour, il faudra donc, pour un contour d'une hauteur de 50px, par exemple, mettre un padding de 5px dans .box-top.

- Si vous voulez qu'il soit sous l'image, il faut mettre



padding-top est le décalage par rapport au bord haut du .box (le module dans son ensemble) . Il existe aussi padding-bottom, padding-right et padding-left. Vous pouvez leur donner à chacun une valeur différente.

padding: 0px 5px 10px 5px; est exactement équivalent à, dans cet ordre (sens des aiguilles d'une montre):
padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;


Si vous voulez la même valeur de padding pour chaque coté du texte (n'oubliez pas que le padding dans le .box-top influence le texte contenu), il suffit de mettre padding: xxx px;


- Ensuite, vous placez le texte du module grace au margin dans le .box-content (contenu du module):



Pour voir le resultat enfin de vous fixer les idées :
http://zoelie.over-blog.com/