Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
21 décembre 2008 7 21 /12 /décembre /2008 00:51
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.



CHOIX DU DESIGN :

Dans la barre de menu, cliquez sur Design

adminv2.gif
Puis sélectionnez le thème graphique FUNKY 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
Dans mon style, collez le CSS suivant


body    { font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#2B2319; background:#2B2319; }
html { scrollbar-track-color: #2B2319;scrollbar-shadow-color: #2B2319;scrollbar-highlight-color:#2B2319;scrollbar-face-color: #776339;scrollbar-darkshadow-color: #2B2319;scrollbar-3dlight-color: text-decoration:underline;;scrollbar-arrow-color: #2B2319 ; }
#global {background:url(http://nsm01.casimages.com/img/2008/09/20//080920013856249682516163.gif);
background-repeat:no-repeat;background-position : top center;width:945px;padding-left:20px;}

a         { text-decoration:none; color:#2B2319; font-size:x-small; }
a:hover { text-decoration:none; color:#2B2319;}
input {color:#2B2319;background-color:#FAFCD7;}

#cl_1_0 {width:450px;height:490px;overflow:auto;}
#cl_1_0 .column_content {width:95%;}
#cl_1_1 {width:200px;height:490px;overflow:auto;}
#cl_1_1 .column_content {width:90%;}
#cl_1_2 {width:200px;height:490px;overflow:auto;}
#cl_1_2 .column_content {width:90%;}

#top    { padding:0px; border-bottom: 0px solid gray; background:none;margin-bottom: 10px;}
#top h1 { padding:0px; margin:0px;color:#2B2319; }

#footer   { clear:both; color: #2B2319; border-top: 0px solid gray; }
#footer p { margin:0px; padding: 10px; background:none; }

.box-titre  {background:none; margin:0px; padding:0px; overflow: hidden;}
.box-titre h2{background:none; margin:0px; padding:0 0 0 5px;color:#2B2319;font-size:x-small;border:1px solid #2b2319;height:15px;}
.box-titre span{background:none; display:block;margin:0px; padding:0px;}
.box-footer  {background:none;margin:0px; padding:0px; height:0px; font-size:6px;}
.box-footer h2{background:none;margin:0px; padding:0px; }
.box-footer  span{background:none; display:block;margin:0px; padding:0px;  }
.box{margin:auto; margin-bottom:5px; padding:0px;}
.box-content { border:0px none; border-right:0px solid #6D87DC; border-left:0px solid #6D87DC; border-top:0px solid #6D87DC; padding:5px }
.box-content li {color:#2b2319;}

#articleAccueil h2{display:none;}
#articleAccueil {font-family: Chiller;}
#articleAccueil .afterArticle {border:0px;}

.beforeArticle {padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:0px solid #808080; width:100%;height:0px; }
.date     { width:100%; margin-right:10px;}
.titreArticle{text-decoration:none;}
.titreArticle:hover {text-decoration:none;}
.divTitreArticle h2{height:15px;border:1px solid #2B2319;padding-bottom:5px;padding-left:5px;}
.article    { margin-top:10px; padding:0px; }
.article p  { padding:0px 0px 5px 5px; margin:0px; }

.h2commentMessage {color:#2B2319;}
.commentMessage  { padding:5px; border:0px dotted #999999;background:#776339;text-decoration:underline;color:#f5f5dc; margin:0px;}
.commentOption   {text-align:right;font-size:85%;color:#2B2319; margin-bottom:10px;}
.afterReactions .linkAddComment {color:#2B2319;}

#formComment {background-color:#FAFCD7;}

.beforePage {padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:0px solid #808080; width:100%; }

.divPageTitle h2{color:#2B2319;text-decoration:none;height:15px;border:1px solid #2B2319;padding-bottom:5px;padding-left:5px;}
.divPageTitle h2:hover {text-decoration:none;height:15px;border:1px solid #2B2319;padding-bottom:5px;padding-left:5px;}
.page    { margin-top:10px; padding:0px; }
.page p  { padding:0px 0px 5px 5px; margin:0px; }

.calendrier  .box-content { background-color:#FDFCE8;}
.calendarTop1     {  background-color:#FDFCE8;color:#2B2319;}
.calendarToday1 {  background-color:#FDFCE8;color:#000;}
.calendarDays1     {  background-color:#FDFCE8;}
.calendarHeader1{  background-color:#FDFCE8;}
.calendarTable1 {  background-color:#FDFCE8;width:90%;}

#general #global {height:600px;}
#general #cl_1_0 {width:900px;background-color:#FDFCE8;height:480px;margin-top:20px;border:0px solid #2b2319;}
.h2Album {color:#2B2319;}
#galeries {margin-top:20px;}

Enregistrez.

CHOIX DE LA CONFIGURATION

Dans la barre de menu, cliquez sur Configurer

adminv2.gif

Cliquez sur Mise en page dans la colonne de gauche, tout en bas.
Choisissez une structure 1 colonne article à gauche+2 colonnes module à droite

Ensuite, vous ne gardez ni l'entête, ni le pied de page. Placez les autres modules voulus .


PERSONNALISATION :

Vous êtes toujours dans la partie Configurer : cliquez sur le pavé qui représente l'entête (ci-dessus celui où il est écrit designannak au dessus de l'article) - contenu personnalisé.

Cliquez sur HTML

Copiez dans la source

<div style="text-align: right;">Design by <a href="http://annak.over-blog.com/" target="_blank">Anna K</a>.<br /></div>
<table style="text-align: center;" border="0" cellspacing="1" cellpadding="1" width="100%">
<tbody style="text-align: center;">
<tr style="text-align: center;">
<td style="text-align: center;"><span style="font-size: 32pt;">Les Design d'Anna K</span></td>
</tr>
</tbody>
</table>

DesignAnnaK : 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.

Partager cet article

Repost 0

commentaires

miriel 06/04/2009 17:37

Coucou Anna, c'est encore moi, en fait ce n'est pas trop petit, j'ai changé la résolution et c'est bon, mais impossible d'acceder aux archives, sais-tu pourquoi ?

Prends ton temps et si tu es en vacances, profites en bien chère Anna.

Amitié

miriel 05/04/2009 17:57

cela me plait mais c'est trop petit, puis-je y remédier, changer la résolution peut-être, je ne sais pas.

J'attends ton conseil, quand tu auras le temps, bien sur.....

gros bisouuuuu

Lolo 18/02/2009 09:45

Coucou Anna K
je vais utiliser ce design, c'est tout à fait celui que je voulais !
En tout cas bravo pour tout tes design, le choix a été difficile , en plus ça nous aide bien , nous qui n'y comprenons rien au CSS.

Lyly 26/01/2009 09:29

Bonjour Anna,

je voulais vous remercier de mettre si gentiment à disposition vos idées et conseils si précieux. Je cherchais depuis un bon moment, en vain, ce fameux design de "livre". grâce à vous, je vais pouvoir m'adonner réellement à l'avancement de mon blog (je suis néophyte...). je n'hésiterai à venir trouver des astuces sur votre blog.
Encore une fois merci et n'hésitez pas à venir voir le rendu sur mon blog. Peut-être, mais alors vraiment si vous en avez le temps et l'envie, pourriez-vous me dire ce que vous en pensez !
A bientôt j'espère
Lyly

agathe 05/01/2009 16:44

encore agathe
suis désolée de vous ennuyer
mais sur le spirale mauve, j'ai bien mis les 2colonnes en place, mais la seconde colonne se place en dessous,
j'ai certainement fait quelque chose de pas normal , pourriez vous venir à mon secours
merci Annak