Design 20 - beige - largeur fixe - Spécial pavé de pub

Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel de dessin.
Il vous suffira de suivre les indications pour le mettre sur votre blog.
Ce design a été réalisé avec Fire Fox sous résolution 1024*768. Je l'ai vérifié sous résolution 800*600 et  1280*1024 et sous IE.

Ci-dessous, son aspect sous résolution 1024*768.

Il est conçu pour accueillir un module Pub dans la colonne centrale, celle-ci fait donc 300px de large. La colonne de modules de droite fait 180px de large et la colonne d'articles, 445px.

CHOIX DU DESIGN :

Dans la barre de menu, cliquez sur Design

Puis sélectionnez le thème graphique Nacre - Metal en cliquant dessus

J'ai choisi de rester en mode normal : le design sera le même dans toutes les pages et donc un seul CSS.

Cliquez sur Mode avancé (CSS) à droite.
Cochez Je souhaite modifier et appliquer la feuille de style à mon blog
Dans mon style, collez le CSS suivant

/* OVER-BLOG Template "NACRE" */
/* Morgan Thomas 2007 - bwoup.com */

body {    color: #000;background:url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/rock082.jpg);}
a { text-decoration:none; color:#6E6E6E; }
a:hover { text-decoration:underline; color:#353535; }

#ln_1 {background-image: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/t2.gif);margin-top:20px;}
#cl_1_0 {width:445px;}
#cl_1_0 .box {background-image: none;}
#cl_1_0 .box-titre {background-image: none;}
#cl_1_0 .box-footer {background-image: none;}
#cl_1_0 .box-content {background-image: none;}
#cl_1_1 {background-image: none;margin-right:5px;}
#cl_1_2 {background-image: none;width:180px;}
#cl_2_0  {background-image: none;}

#top {    padding: 5px 12px 5px 12px;text-align: left;    font-size: 24px;color: #353535;    }
#cl_0_0 {background-image:url(http://www.casimages.com/img/070404090321447782.gif);font-family:Monotype Corsiva;height: 170px;}

#footer {clear:both;padding: 5px 12px 5px 12px;    color: #656565;    }
    
.contenuArticle, .extrait {margin: 0 5px 0 5px;    color: #000;}
.date {    font-size: 12px;color: #6E6E6E;font-family:Monotype Corsiva;    font-size:150%;}
.titreArticle, .titreExtrait a     { text-decoration:none; color:#89795F;font-family:Monotype Corsiva;font-size:150%;  }
.titreArticle:hover, .titreExtrait a:hover    { text-decoration:underline; color:#000;}
.divTitreArticle h2, .infoExtrait {background:none;}

.box {border-right:1px solid #40392E;border-left:1px solid #40392E;}
.box-titre {margin:0px;padding: 4px 10px 5px 10px;height: 17px;background: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/rock022.jpg);font-family:Monotype Corsiva;}
.box-titre h2 {color:#40392E;font-size:150%;}

.commentMessage {background-image: url(http://idata.over-blog.com/0/37/17/67/css/thumb-revmur006.jpg);border-top: 1px solid #B6B6B6;border-bottom: 1px solid #6E6E6E;color: #131313;}
.commentOption {font-size: 10px;color: #9C9C9C;    }
.responseMessage {background-image: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/ros3.gif);}
.afterReactions a {font-size:90%;}

.pagination {background-image: none;text-align: center;}

.divTitreArticle h2 , #articleSeul h2, .infoExtrait {background-image: none;}
.contenuArticle, .extrait {background-image: none;}
.afterArticle, .plusExtrait {background-image: none;}
.listArticles {background-image: none;    }
.resumeArticle {background-image: none;    }
.divPageTitle h2     { text-decoration:none; color:#131313; }
.divPageTitle h2:hover    { text-decoration:underline; color:#000; }
.divPageTitle h2 {background-image: none;}

.pageContent {background-image: none;}

.afterPage {background-image: none;}

.calendrier .box-content{margin-left:-5px;}
.calendarTop1     {  background:none;}
.calendarToday1 {   background:none;color: #40392E;}
.calendarDays1     {   background:none;text-align:left; }
.calendarHeader1{  background:none;color:#40392E;text-align:left; }
.calendarTable1 {  background:none;}

.newsletter {font-size: 90%; }

#formComment  { background-image: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/t2.gif); border:5px double #131313;   }
#divRecommander { background-image: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/t2.gif);  border:5px double #131313;  }
#divNewsletter { background-image: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/t2.gif);  border:5px double #131313;  }

Enregistrez.

CHOIX DE LA CONFIGURATION

Dans la barre de menu, cliquez sur Configurer

Cliquez sur Mise en page dans la colonne de gauche, tout en bas.
Choisissez une structure 1 colonne Articles à gauche+1 colonne module large au centre+1 colonne module plus étroite à droite

Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans les 2 colonnes de droite, sans oublier de mettre le module de Pub dans la colonne centrale.

PERSONNALISATION :

Vous êtes toujours dans la partie Configurer : cliquez sur le pavé qui représente l'entête  - contenu personnalisé.

Cliquez sur Editer la source

Copiez dans la source

<div style="text-align: right;"><span style="font-size: 8pt;">Design by <a href="http://annak.over-blog.com/" target="_blank">Anna K</a>.</span><br /></div>
<div align="center"><font size="10">DesignAnnak : blog de designs OB</font></div>

DesignAnnaK : le blog de design OB : remplacez par le titre de votre blog et validez.

Je crois que j'ai fait le tour. Si vous le testez, dîtes-moi ce que ça donne. Je ferais une saisie d'écran de votre blog que je rajouterai à cet article.

Comments

[Nadège]

je viens tous les jours sur ton blo que je trouve très chouette et très pratique. Tes conseils me sont souvent utiles même si je suis encore néophyte en configuration de blog. J'aime beaucoup ce design. Cependant, j'aurai aimé en trouvé un autre un peu plus dans les tons bleus (comme mon blog) et avec la colonne principale au milieu, je n'ai trouvé encore mon bonheur parmis toutes tes réalisations.

[Mélie]

Super !
c'est reglé les largeurs de colonnes !
Vraiment ton site est une mine d'or ! Je n'ai toujours pas fini de visiter toutes les pages de ton site !
J'ai hâte que tu crée un jour le design du genre Jardin /fleurs ou bien féérique /pastels...
Tiens moi au courant si ce Design voit jour !
Bizzzz...

[Anna K]

Bonjour :)
Si tu me décris le design que tu aimerai : nbre de colonnes, couleurs dominantes.... assez précisément, je peux le réaliser.

[Mélie]

J'ai trouvé !!! Il fallait que je décoche les cases des fenêtres en dessous de la 1ère fenêtre ! C'est beaucoup mieux ! Ouf !
J'ai très envie de faire un peu plus large la colonne article, moins large la 2è colonne.

[Anna K]

Normalement, les cases des autres fenêtres sont décochées, je n'avais donc pas pensé à ça.
Je passe voir.

[Mélie]

Dans Design/Mode avancé/Onglet "Mon style"

1ère fenêtre "definition d'affichage basique" :
Escatement le même que là haut, car j'ai copié collé dans cette fenêtre

Tous les autres fenêtres "définitions avancés", comme "définition d'affichage du template", "definition d'affichage de la variation" etc... Ils sont strictement identique que dans l'onglet "Original" (Design / Mode avancé / onglet "original")

Faut il que je les vide toutes de sorte qu'il n'y ait que le programme dans la 1ère fenêtre et rien dans d'autres ? J'avais essayé et prévisualisé, mais il n'y alors plus de colonnes hormis uniquement l'article.

J'ai repris beaucoup d'espoir que mon blog soit joli et présentable grâce à toi !

Bonne soirée !

[Mélie]

Coucou Anna, suite au commentaire que tu as laissé dans mon blog, je suis venue ici, et j'ai choisi ce modèle.
J'ai suivit tout ce que tu as écrit, copié collé tout le CSS.
Voici ce que ça donne : encore une sorte de bug, je voici mes anciens modèles ! J'ai pourtant mis le modèle Nacre Métal !
Mais peut être que si tu jetes un coup d'oeil à mon blog, que l'affichage sera différent que sur mon ordinateur ?
Vivement que ce petit problème sera réglé !
Il est super ton site avec le choix de module ! Continues d'en créer !

[Anna K]

Je passe sur ton blog