Overblog Suivre ce blog
Administration Créer mon blog
31 octobre 2007 3 31 /10 /octobre /2007 00:07
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 790px 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: Georgia, Helvetica,Verdana,  Arial, sans-serif; font-size:small;background:url(http://www.casimages.com/img/070328024136428076.gif);
background-attachment:fixed; background-position:center ; }
#global {background:none;width:790px;}

a {text-decoration:none; color:#B05300; font-size:110%;}
a:hover {text-decoration:underline; color:#2A2E20;}

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

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


#cl_1_0{width:570px;}
#cl_1_1    {margin:0px;   padding:5px; float:right;}

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

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

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

.commentMessage {padding:5px; border:1px solid #2A2E20; margin:0px;background-color:#BAC2A6;color:#2A2E20;}
.responseMessage {padding:5px; border:1px solid #768254; margin:0px;background-color:#F6D6BC;color:#768254;}
.commentOption {text-align:right; font-size:90%; color:#768254; margin-bottom:10px;}
.h2commentMessage {color:#768254; }

#formComment  {background-color:transparent;border:1px solid #768254;   }
#formComment input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divRecommander { background-color:transparent; border:1px solid #768254;  }
#divRecommander input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divNewsletter { background-color:transparent; border:1px solid #768254;  }
#divNewsletter input {background-color:#F6D6BC;border: 1px solid #2A2E20;}

Si la police ne vous convient pas, effacer ce qui est en rouge ci-dessus.
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 à droite +1 colonne article à droite

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


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="115" cellspacing="1" cellpadding="1" width="780" background="http://www.casimages.com/img/070314020606389302.gif" border="1">
    <tbody>
        <tr>
            <td><br />
            <div align="center"><font size="6"><font color="#b05300">DesignAnnaK :<br />
            le blog de design OB </font></font></div>
            <div align="center">&nbsp;</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.
Repost 0
16 octobre 2007 2 16 /10 /octobre /2007 00:45
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 800px 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: Helvetica,Verdana,  Arial, sans-serif; font-size:small;background:url(http://www.casimages.com/img/070324063048414414.gif);
background-attachment:fixed;background-repeat:repeat-y;background-position:center ;background-color:#B35A66; }
#global {background:none;}

a {text-decoration:none; color:#5A5A42; font-size:110%;}
a:hover {text-decoration:underline; color:#5A5A42;}

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

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

#cl_1_1    {margin:0px;   padding:5px; float:right;}

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

.box { margin:0px; padding:0px; margin-bottom:10px;border: 1px solid #B35A66; }
.box-titre h2 {color:#B35A66; 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:#5A5A42;}
.box-content li {color:#5A5A42;}

.newsletter .box-content {color:#5A5A42;}
.calendarTop1 {color:#5A5A42;}
.calendarHeader1 {color: #5A5A42;}
.calendarToday1 {color:#5A5A42;border: 1px solid #B35A66; }

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

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

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

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




A voir concrétement :

Repost 0
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 :
Repost 0
29 septembre 2007 6 29 /09 /septembre /2007 10:55
Repost 0
Published by Anna K - dans Vie des Blogs
commenter cet article
28 septembre 2007 5 28 /09 /septembre /2007 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. Les colonnes de modules et d'articles font 770 px 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:  Comic Sans MS, Helvetica,Verdana,  Arial, sans-serif; font-size:small;background:url(http://www.casimages.com/img/070401042316439214.gif);
background-repeat:repeat-y;background-position:center left;background-color:#A1ABBD; }
#global {background:none;margin-left:220px;width:770px;}

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

#ln_0{background:none;color:#3C4157;}
#top h1 {padding:0px; margin:0px;}
#top  {margin:0px; padding:0px;  border:0px none;background:none;}

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


#cl_1_0{width:250px;}
#cl_1_1    {margin:0px;   padding:5px; float:left;width:510px;}

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

.box { margin:0px; padding:0px; margin-bottom:10px;border: 1px solid #596479; }
.box-titre h2 {color:#3C4157; 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:#3C4157;}
.box-content li {color:#3C4157;}

.newsletter .box-content {color:#3C4157;}
.calendarTop1 {color:#3C4157;}
.calendarHeader1 {color: #3C4157;}
.calendarToday1 {color:#3C4157;border: 1px solid #596479; }

.commentMessage {padding:5px; border:2px dashed #596479; margin:0px;background-color:#E6E2E2;color:#3C4157;}
.responseMessage {padding:5px; border:2px dashed #596479; margin:0px;background-color:#c5cbd7;color:#3c4157;}
.commentOption {text-align:right; font-size:90%; color:#3C4157; margin-bottom:10px;}
.h2commentMessage {color:#3C4157; }

#formComment  { background-color:#C8CCE0; border:3px dashed #596479;   }
#divRecommander { background-color:#C8CCE0;  border:3px dashed #596479;  }
#divNewsletter { background-color:#C8CCE0;  border:3px dashed #596479;  }

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 cellspacing="1" cellpadding="1" width="765" align="left" bgcolor="#c5cbd7" border="1">
    <tbody>
        <tr>
            <td>
            <div align="center"><font size="5"><br />
            </font>
            <table cellspacing="1" cellpadding="1" width="90%" align="center" bgcolor="#e6e2e2" border="1">
                <tbody>
                    <tr>
                        <td align="center"><font size="5"><font size="6">DesignAnnaK : le blog de design OB</font></font></td>
                    </tr>
                </tbody>
            </table>
            </div>
            <font size="5"><font color="#60767f"><br />
            </font></font></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.


Des exemples

Chez Cricrinou :
Chez maman Bene :
Repost 0
21 septembre 2007 5 21 /09 /septembre /2007 00:09
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 centrales (claires) font 800 px 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:   Helvetica,Verdana,  Arial, sans-serif; font-size:x-small;font-weight:bold;background:url(http://www.casimages.com/img/070324045900415884.gif);background-attachment:fixed;background-position:center; }
#global {background:none;}

a {text-decoration:none; color:#624E56; font-size:110%;}
a:hover {text-decoration:underline; color:#41354C;}

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

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


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

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

.box { margin:0px; padding:0px; margin-bottom:10px;border:1px solid #624E56; }
.box-titre h2 {color:#41354C; 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:#41354C;}
.box-content li {color:#41354C;}

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

.commentMessage {padding:5px; border:1px solid #624E56; margin:0px;background-color:#ACA3B8;color:#41354c;}
.responseMessage {padding:5px; border:1px solid #41354C; margin:0px;background-color:#DED6CE;color:#41354c;}
.commentOption {text-align:right; font-size:90%; color:#41354C; margin-bottom:10px;}
.h2commentMessage {color:#41354C; }

#formComment  { background-color:#ACA3B8; border:4px solid #41354C;   }
#divRecommander { background-color:#ACA3B8;  border:4px solid #41354C6;  }
#divNewsletter { background-color:#ACA3B8;  border:4px solid #41354C;  }

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).

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 cellspacing="1" cellpadding="1" width="800" align="left" background="http://www.casimages.com/img/070319052825402162.gif" border="1">
    <tbody>
        <tr>
            <td><br />
            <div align="center"><font size="5"><font color="#473b5e"><br />
            <font size="6">DesignAnnaK : le blog de design OB</font></font></font></div>
            <font size="5"><font color="#60767f"><br />
            </font></font></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.
Repost 0
20 septembre 2007 4 20 /09 /septembre /2007 00:08

Ce n'est pas tout simple à réaliser. Il faut être un minimum expérimenté pour se lancer dans ces modifications. Il faut travailler, de préférence, avec IE et FF en parallèle pour constater le résultat à chaque modification.

Supposons que vous désiriez mettre le module pavé publicitaire dans l'entête de la partie Articles : 
* à gauche le pavé publicitaire, 
* à droite votre entête
le tout sur la même ligne.

Le contenu de votre entête (bannière, menu ou quoi que ce soit) doit faire environ 750 px de large et 250 px de haut.

1ERE ETAPE :

Dans Configurer - Onglet Articles - 
Vous placez le module Publicité au-dessus de votre module Entête. 
Vous aurez bien sûr pris soin auparavant de configurer le module Publicité pour que ce soit le pavé qui apparaisse.
Vous alignez le contenu de votre module entête sur la droite.

2EME ETAPE :

Dans le Design CSS Articles, vous remontez votre entête 

#top    { margin-top:-250px; }


Le pavé publicitaire fait une hauteur de 250 px, ce qui explique ce chiffre.
Normalement, votre entête doit chevaucher la publicité.

3EME ETAPE :

Le module Publicité est centré, on va le pousser sur la gauche :

#ln_0 .pub{margin-left:-720px;}


Pour ma résolution d'écran (1024*768), 720 px permet de coller le module à gauche de l'écran.

4EME ETAPE :

On fignole :

Il peut être intéressant de fixer la hauteur de l'entête pour que l'ensemble soit bien cadré.

#ln_0{height:255px; }


255 px, correspond à la hauteur du pavé pub + 5px de marge

Si le pavé publicitaire est trop collé à votre entête, on va créer une marge entre les 2.

#ln_0 .pub{margin-left:-720px;margin-right:10px;}


5EME ETAPE :

On vérifie :
* déjà sous sa propre résolution d'écran sous IE et FF
* ensuite chez SCAPTURE

Repost 0
Published by Anna K - dans Archives
commenter cet article
16 septembre 2007 7 16 /09 /septembre /2007 00:44

Vous allez dans Configurer

adminv2.gifMise en Page

adminv2config.gif

Vous cliquez sur Accueil ou Articles selon l'endroit où vous désirez cette configuration (après être passé en mode avancé)
Vous choisissez dans Choix de la Structure (tout en bas de la colonne de gauche) une disposition sur 3 colonnes.
Vous vous rendez ensuite dans Design - Paramètres avancés - le Design de l'endroit choisi (accueil ou articles)

Pour notre exemple, nous décidons de mettre les 2 colonnes de modules sur la gauche et la colonne d'articles sur la droite

On va tout d'abord pousser la colonne centrale sur la droite de 205 px : la taille estimée d'une colonne de module. Ce peut être plus ou moins : jouez avec les px.

#ln_1 #cl_1_1 { margin-left:205px;  } /* colonne centrale */


Vous constatez que votre colonne centrale est passée à droite ; mais aussi que la colonne de modules de droite est passée à gauche, mais en bas. On va donc la remonter

#ln_1 #cl_1_2 { margin-top:-120px;} /* colonne de droite */


Comme dans le cas de la colonne centrale, jouez avec les px pour adapter à votre configuration et qu'elle soit au même niveau que les autres colonnes.

Ensuite, il se peut que cette colonne soit trop collée à la colonne de modules de gauche. On va donc créer une petite marge entre les 2 colonnes en rajoutant margin-left:5px; , ce qui donne

#ln_1 #cl_1_2 { margin-left:5px;margin-top:-120px;} /* colonne de droite */


et voici c'est fini.

AVERTISSEMENT :

Vous constatez que ce n'est pas très difficile à réaliser, mais il y a un bémol.
Il est préférable que vous interveniez le moins possible ultérieurement sur cette page. En effet, toutes modifications de taille des modules ou des articles pourraient faire bouger cette structure.
Il faut donc de préférence utiliser cette configuration en accueil avec des modules dont la taille ne varie pas (donc éviter "articles récents", "commentaires"...) et un article-accueil que vous rédigez une fois pour toutes.
Pensez à regarder sous IE et FF, le résultat sur votre blog, il peut toujours y avoir des différences.
Repost 0
Published by Anna K - dans Archives
commenter cet article
15 septembre 2007 6 15 /09 /septembre /2007 00:29
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 centrales (claires) font 770 px 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:   Helvetica,Verdana,  Arial, sans-serif; font-size:x-small;font-weight:bold;background:url(http://www.casimages.com/img/070316053532394497.jpg);
background-attachment:fixed;background-position:center; }
#global {background:none;width:770px;}

a {text-decoration:none; color:#262626; font-size:110%;}
a:hover {text-decoration:underline; color:#000000;}

#ln_0{background:none;width:770px;}
#top h1 {padding:0px; margin:0px;}
#top  {margin:0px; padding:0px;  border:0px none;background:none;}

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


#cl_1_0{ width:250px;}
#cl_1_1    {margin:0px;  width:505px; padding:5px; float:right;}

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

.box { margin:0px; padding:0px; margin-bottom:10px;border:1px solid #262626; }
.box-titre h2 {color:#262626; 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:#262626;}
.box-content li {color:#262626;}

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

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

#formComment  { background-color:#d2cece; border:8px double #262626;   }
#divRecommander { background-color:#d2cece;  border:8px double #262626;  }
#divNewsletter { background-color:#d2cece;  border:8px double #262626;  }

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).

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 cellspacing="1" cellpadding="1" width="765" align="left" background="http://www.casimages.com/img/070330050548433471.gif" border="1">
    <tbody>
        <tr>
            <td><br />
            <div align="center"><font size="5"><font color="#fcfcfc"><br />
            <font size="6">DesignAnnaK : le blog de design OB</font></font></font></div>
            <font size="5"><font color="#60767f"><br />
            </font></font></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.
Repost 0
9 septembre 2007 7 09 /09 /septembre /2007 00:20
Je me suis amusée à réaliser un design complet en V2. Il 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 centrales (claires) font 800px 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


Pour un premier design, 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:   Verdana, Helvetica, Arial, sans-serif; font-size:x-small;background:url(http://www.casimages.com/img/070317070228395623.gif);
background-attachment:fixed;background-position:center; }
#global {background:none;}

a {text-decoration:none; color:#60767f; font-size:110%;}
a:hover {text-decoration:underline; color:#242734;}

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

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

#cl_1_0{ width:275px;}
#cl_1_1    {margin:0px;  width:515px; padding:5px; float:right;}

.beforeArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#60767f;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;color:#3c4157;text-align:justify;}
.date {margin-right:10px;}
.titreArticle {text-decoration:none;color:#3c4157;}
.titreArticle:hover {text-decoration:underline; color:#232734;}
.afterArticle {color:#60767f;}
.topic a { color:#3c4157; }

.box { margin:0px; padding:0px; margin-bottom:10px; border:1px solid #60767f; }
.box-titre h2 {color:#3c4157; 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:#60767f;}
.box-content li {color:#3c4157;}

.newsletter .box-content {color:#3c4157;}
.calendarTop1 {color:#3c4157;}
.calendarHeader1 {color: #3c4157;}
.calendarToday1 {color:#242734;border:1px solid #242734; }

.commentMessage {padding:5px; border:1px dotted #f5f5dc; margin:0px;background-color:#607b72;color:#f5f5dc;}
.responseMessage {padding:5px; border:1px dotted #607b72; margin:0px;background-color:#f5f5dc;color:#607b72;}
.commentOption {text-align:right; font-size:90%; color:#3c4157; margin-bottom:10px;}
.h2commentMessage {color:#60767f; }

#formComment  { background-color:#627971; border:8px double #f5f5dc;   }
#divRecommander { background-color:#627971;  border:8px double #f5f5dc;  }
#divNewsletter { background-color:#627971;  border:8px double #f5f5dc;  }

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 voulues 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).

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 cellspacing="1" cellpadding="1" width="800" align="center" background="http://www.casimages.com/img/070314014326389226.jpg" border="1">
    <tbody>
        <tr>
            <td>
            <div align="right"><font size="5"><br />
            <br />
            <font color="#60767f">DesignAnnaK : le blog des design OB<br />
            <br />
            </font></font></div>
            </td>
        </tr>
    </tbody>
</table>

DesignAnnaK : le blog des 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.
Repost 0