AIDE : Comment changer les contours des modules

J'ai fait une aide pour la FAQ d'Over-blog (c'est Fabrice qui me l'a demandée, c'est la gloire !)

Le voici :

Pour changer les contours des modules:


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 .


ATTENTION: Ce qui suit n'est malheureusement valable que pour les modèles de blogs type 101, 102, 103, 104; les modèles type 2.. ne possèdent qu'une seule classe pour le contour des modules, .box { }, et seule celle-ci est appelée dans le code HTML: donc, pour une fois, il ne sert à rien de rajouter les classes ad hoc dans le CSS, puisqu'elles ne seront pas utilisées par le code HTML ... *
Pour connaitre le type de votre modele, regardez dans l'onglet Design a quel numero correspond le design de base que vous avez choisi.



Il faut des images 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éez l'image de la taille exacte 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éez 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 les 2 problèmes cités ci-dessus, mais ça restreint le choix du design.

Je conseille cependant cette dernière 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-clé "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 plaît, en prenant bien soin que le fond soit transparent et qu'il soit symétrique, puisqu'il va se répéter...


Exemple :
et pas .

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.

1ère étape :

- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box designe 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) :

.box-bottom {
background:transparent url(http://idata.over-blog.com/0/05/85/46/image-bottom.png)
repeat-x scroll bottom left;
border-left: none 0px;
border-right: none 0px;
border-top: none 0px;
}

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

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

.box-left {
background: transparent url(http://idata.over-blog.com/0/05/85/46/utilitaires/image-left.png)
repeat-y scroll top left;
margin:0px;
border-right: none 0px;
border-bottom: none 0px;
border-top: none 0px;
}

Idem pour right.

Pour les coins, qui ne se repetent pas, ou si vous avez choisi un motif de la taille du module. vous faites :

.box-topLeft {
background:transparent url(http://idata.over-blog.com/0/05/85/46/image-box-top-left.png)
no-repeat scroll top left;
}

Idem pour les 3 autres coins.



2ème é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 a l'interieur de l'objet.
Le padding est donc un attribut des .box-.
Le margin est la marge de l'objet lui-meme par rapport à son contenant. 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

.box-top {
background:transparent url(http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/...)
repeat-x scroll top left;

padding-top: 50px;
}

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 :

padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;


Si vous voulez la même valeur de padding pour chaque côté du texte, il suffit de mettre padding: xxx px;

On se réveille, c'est pas fini (mais presque !)
- Ensuite, vous placez le texte du module grâce au margin dans le .box-content (contenu du module):

.box-content {
background:#BC8F8F;
color: #FF3E96;
overflow:hidden;
padding:0px 5px 10px 5px;
/* Ceci est le decalage du texte dans la boite interieure du module .*/

/* Type de la bordure de la boite interne (box-content):
none si vous n'en voulez pas */
border-left: solid #FFD375 2px;
border-bottom: solid #FFD375 2px;
border-top: solid #FFD375 2px;
border-right: solid #FFD375 2px;
margin: 37px 28px 37px 28px;
/* Ceci est le décalage de la boîte intérieure du module (box-content), par rapport au contour que vous venez de créer.*/ 
(= Decalage de 15px en haut, 5px à droite, 10px en bas et 15px à gauche )
}


Pour voir le résultat enfin de vous fixer les idées : regardez mes modules!


* EDIT : Pour les modeles type 2.., la methode est un peu differente, parce qu'il n'y a pas les 8 classes permettant 4 bords + 4 coins differents, mais seulement .box (un cadre autour du module) , .box-titre (un cadre autour du titre) et .box-content (un cadre sous le titre).
Pour faire des contours avec ca, il faut mettre des images adaptees dans ces cadres (pour bien visualiser : le cadre .box-content + le cadre .box-titre = le cadre .box) . Il faut donc mettre le bord haut dans .box-titre, le bord bas dans .box-content (avec background-position : bottom left ;), mais il faut faire une image de la bonne largeur (si vous n'avez pas modifie la largeur des colonnes : 195px ou moins) qui represente les bords gauche et droit, avec du blanc au milieu, que vous mettrez dans .box avec background-repeat : repeat-y; pour qu'elle se repete verticalement et s'adapte a la hauteur de chaque module.

Sinon, une solution toute simple valable pour tous les modeles consiste a mettre un contour constitue d'une ligne simple, en faisant uniquement :
.box { [ce qu'il ya deja] border : Xpx solid #couleur-de_la _ligne ; }
X represente l'epaisseur de la ligne de contour, et a la place de solid (le "style" du contour) qui fait un trait plein, vous pouvez aussi mettre :

• dashed : tirets
• dotted : pointillés
• double : double traits pleins, la largeur définie par “border-width” correspondra à la taille des 2 traits et de l’espaces entre ceux-ci
• groove : effet 3D gravée dans la page, opposé de ridge
• ridge : effet 3D opposé de groove, sort de la page
• inset : rentrante, inverse de outset, élément incrusté dans la page

A vous de tester les differents effets ...

Vous n'avez rien compris ?
Notre Maitre Es Tutoriaux a fait un article similaire, allez le voir:
Peut-Etre Une Réponse : Bordures et Fonds de modules.