Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
7 octobre 2007 7 07 /10 /octobre /2007 00:10
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. Les colonnes de modules et d'articles font 825px de large.



CHOIX DU DESIGN :

Dans la barre de menu, cliquez sur Design

adminv2.gif
Puis sélectionnez le thème graphique Pretty in pink 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 {margin:0px; padding:0px;font-family:  Book Antiqua, Helvetica,Verdana,  Arial, sans-serif; font-size:small;background:url(http://www.casimages.com/img/070315055044392337.jpg);
background-repeat:repeat-y;background-position:center left;background-color:#757168; }
#global {background:none;margin-left:150px;width:825px;}

a {text-decoration:none; color:#747065; font-size:110%;}
a:hover {text-decoration:underline; color:#3C4157;}

#ln_0{background:none;}
#top h1 {padding:0px; margin:0px;}
#top  {margin:0px; padding:0px;  border:0px none;background:none;padding-left:10px;}

#footer {margin-top:10px; position:relative; color:#747065; background-color:transparent;}
#footer p {margin:0px; padding: 10px;}


#cl_1_0{margin-left:10px;}
#cl_1_1    {margin:0px;   padding:5px; float:right;}

.beforeArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#747065;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;color:#747065;text-align:justify;border: 1px solid #588126;}
.date {text-align:center;}
.titreArticle {text-decoration:none;color:#747065;}
.titreArticle:hover {text-decoration:underline; color:#747065;}
.divTitreArticle{text-align:center;}
.afterArticle {color:#747065;}
.topic a { color:#747065; }

.box { margin:0px; padding:0px; margin-bottom:10px;border: 1px solid #588126; }
.box-titre h2 {color:#747065; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px;}
.box-titre {padding:0px; text-align:center;}
.box-content {overflow:auto; padding:2px 5px; color:#747065;}
.box-content li {color:#747065;}

.newsletter .box-content {color:#747065;}
.calendarTop1 {color:#747065;}
.calendarHeader1 {color: #747065;}
.calendarToday1 {color:#747065;border: 1px solid #588126; }

.commentMessage {padding:5px; border:1px solid #588126; margin:0px;background-color:#B3C9B3;color:#747065;}
.responseMessage {padding:5px; border:1px solid #588126; margin:0px;background-color:#B2ACA6;color:#747065;}
.commentOption {text-align:right; font-size:90%; color:#747065; margin-bottom:10px;}
.h2commentMessage {color:#747065; }

#formComment  {background-color:transparent;border:2px solid #747065;   }
#divRecommander { background-color:transparent; border:2px solid #747065;  }
#divNewsletter { background-color:transparent; border:2px solid #747065;  }

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 modules à gauche+1colonne article à droite

Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans la colonne de gauche.


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) - 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><br />
<table height="130" cellspacing="1" cellpadding="1" width="812" align="center" background="http://www.casimages.com/img/070316065329394765.gif" border="1">
    <tbody>
        <tr>
            <td>
            <div><br />
            <div><font size="6"><font color="#ded0b4"><br />
            </font></font>
            <div align="right"><font size="6"><font color="#ded0b4">DesignAnnaK : le blog de design OB &nbsp;</font></font></div>
            </div>
            </div>
            </td>
        </tr>
    </tbody>
</table>

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.




Un exemple concret chez :

Partager cet article

Repost 0

commentaires

atalante 17/03/2008 08:50

Bonjour Anna j'ai tester ton fond et j'adore le desing. par-contre j'aurai voulu garder mon propre dessin comment puis-je remplacer la maison par mon propre dessin,Mille mercipour tes précieux conseil j'adore!

Anna K 18/03/2008 10:25

Je passe

Annette & Jacques 29/11/2007 14:42

bonjour AnnaBon je suis parvenu à changer de desing...! Enfin!!!Par contre après j'ai voulu essayé le desing mauve mais pas moyen...mais peut-être faut-il attendre un bon moment pour que cela soit pris en compte...je te tiens au courant et encore merciAnnette

Anna K 29/11/2007 15:00

Si si, il est passé :) pense à faire CTRL+F5 sur ton blog quand tu modifies le design

Annette & Jacques 28/11/2007 22:59

bonsoiroui Anna les 4 cases sont bien cochéesmerciAnnette

Annette & Jacques 28/11/2007 12:10

bonjour
J'ai bien suivi tes conseils pour changer le design de mon blog. Mais en prévisualisation, ça fonctionne et quand j'affiche mon blog, l'ancien design apparait . J'ai tenté plusieurs fois mais rein à faire...

Merci pour ton aide

Annette

Anna K 28/11/2007 19:01

Bonjour Annette, les 4 cases héritages sous le CSS sont-elles bien cochées ?

Arc-en-ciel 13/10/2007 01:37

Bonsoir Anna, je viens de tester ce joli design pour mon nouveau blog, j'aime énormément sa couleur et sa sobriété. Je me suis permise de  faire une autre en tête en texte libre, si cela t'ennuis, je modifierais. Je suis vraiment débutante et très hésitante dans les "manips" !petite question: j'ai ouvert donc, ce second blog avec une autre adresse email que le 1er (obligé?), quand j'ai cliqué pour écrire ce commentaire, mon adresse du premier blog est apparue et je l'ai modifiée, quand je contacterais mes liens pour les avertir de la création de ce blog dois-je automatiquement modifier l'adresse? ou sinon seront-ils dirigés sur l'autre?Merci pour ton aide, bonsoir, bizou. Arc-en-ciel.

Anna K 13/10/2007 13:51

Réponse chez toi