(OverBlog) Encadrer les articles avec des textures

Après les modules, voici comment encadrer les articles avec des textures.

1ère étape : vous fixez la largeur de vos articles.

Dans mon exemple, je choisis 600px.

Vous allez dans le CSS - Design > Mode CSS, vous rajoutez (au choix)

Pour la colonne d'articles à droite

#cl_1_2 {width:600px; }

Pour la colonne d'articles au centre

#cl_1_1 {width: 600px;}

Pour la colonne d'article à gauche

#cl_1_0 {width: 600px;}

2ème étape : vous réalisez les bordures latérales avec un logiciel de dessin, d'une largeur de 600px. La hauteur n'a pas beaucoup d'importance, elle va se répéter.

Un exemple :



Une fois hébergée, cette image va être placée dans le CSS - Design > Mode CSS :

.contenuArticle {background:url(adresse de l'image); background-position:center;}

Ce qui donne :



Si vous constatez que le texte mord sur la bordure, vous rajoutez des marges à droite et à gauche :

.contenuArticle { background:url(adresse de l'image); background-position:center; padding-left:30px;padding-right:30px;}

3ème étape : vous créez l'entête de l'article

Elle doit toujours faire 600px de large, largeur de l'article.

Par contre, elle devra être haute de 20px, 2* la largeur de labordure. Car nous allons faire un retour vers le bas.

Ainsi :



Une fois hébergée, cette image va aussi être placée dans le CSS - Design > Mode CSS.

Il faudra peut-être la positionner en rajoutant des marges : margin-left:-25px; padding-top:20px;

.before_Article {background-image:url(adresse de l'image);background-repeat:no-repeat;width:600px;margin-left:-25px;padding-top:20px;}

Pour ce résultat :



4ème étape : vous créez le pied de page. Côté conception, c'est tout simple : il suffit, avec le logiciel de dessin, de faire une rotation de 180° de l'entête.

Le voici donc :



Une fois hébergée, cette image va aussi être placée dans le CSS - Design > Mode CSS :

.afterArticle {background:url(adresse de l'image);height:50px;
background-repeat:no-repeat;background-position:bottom; padding-left:-30px;padding-right:-30px; }

Pour bien la positionner, il faudra peut-être comme moi, rajouter :

• height:50px une hauteur
• padding-left:-30px;padding-right:-30px des marges à droite et gauche

Voilà, ce n'est pas bien difficile, il faut seulement être attentif et précautionneux.