Overblog Suivre ce blog
Administration Créer mon blog
3 août 2008 7 03 /08 /août /2008 00:19
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: Helvetica,Verdana,  Arial, sans-serif; font-size:small; color:#ABB2C1;background:url(http://www.casimages.com/img/070315053157392294.jpg);
background-repeat:repeat-y;background-color:#4A5263;}
#global { min-width: 870px;margin-left:120px;}

#cl_1_0 {margin:0px; width:70%;}
#cl_1_2 {margin:0px; width:20%;}
#cl_1_1    {margin:0px 0,5%; width:25%; padding:0 0.5% 0 0.5%;}

a         { text-decoration:underline; color:#ABB2C1; font-size:110%; }
a:hover { text-decoration:none; color:#ABB2C1;}
input {color:#3C3F4B;background-color:#ABB2C1;}

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

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

.box{margin:auto; margin-bottom:15px; padding:0px;}
.box-titre  {background:none; margin:0px; padding:0px; overflow: hidden;}
.box-titre h2{height:auto; background:none;margin:0px; padding:0 0 0 5px; color:#373B45;text-align:center;border:1px solid #ABB2C1;border-bottom:0px solid #524A3A;background-color:#ABB2C1; }
.box-titre span{background:none; display:block;margin:0px; padding:0px; }
.box-content { border:1px solid #ABB2C1;  padding-left:5px; }
.box-content li {color:#ABB2C1;}
.box-footer  {background:none; margin:0px; padding:0px; font-size:6px;display:none;}
.box-footer h2{background:none;margin:0px; padding:0px; }
.box-footer  span{background:none ; display:block;margin:0px; padding:0px; }

.beforeArticle {padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:0px solid #4C3A30; width:100%; }
.date     { width:100%;text-align:center; }
.article h2 {text-align:center;}
.titreArticle{text-decoration:none;color:#ABB2C1;font-size:120%;}
.titreArticle:hover {text-decoration:none;}
.article    { margin-top:10px; padding:0px; color:#ABB2C1;border:1px solid #ABB2C1;}
.article p  { padding:0px 0px 5px 5px; margin:0px; }
.afterArticle {border:0px;}

.h2commentMessage {color:#ABB2C1;}
.commentMessage  { padding:5px; border:1px solid #ABB2C1;margin:0px; background-color:#3C3F4B; color:#ABB2C1;}
.responseMessage  { padding:5px;border:1px solid #4C3A30;background-color:#ABB2C1;margin:0px;color:#3A442E;}
.commentOption   {text-align:right;font-size:85%;color:#ABB2C1; margin-bottom:10px;}
.afterReactions .linkAddComment {color:#ABB2C1;font-size:90%;}

.calendarTop1 { background-color:#4A5263;color:#f5f5dc;}
.calendarTable1 {background-color:#BDCBB1;}
.calendarDays1 {background-color:#4A5263;}
.calendarHeader1 {background-color:#4A5263;}
.calendarToday1 {background-color:#4A5263;}

#newsletter {border:1px solid #ABB2C1;background-color:#373B45; }
#formComment {border:1px solid #ABB2C1;background-color:#373B45; }
#divRecommander {border:1px solid #ABB2C1;background-color:#373B45; }

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

Ensuite, vous mettez le module d'entête tout en haut. Vous gardez 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 TexteLibre au-dessus de l'article) - 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="780" align="center" background="" border="10">
    <tbody>
        <tr>
            <td align="right">
            <div align="center"><font size="8">DesignAnnak : </font><br />
            <font size="8">blog de designs OB </font></div>
            </td>
        </tr>
    </tbody>
</table

Vous ne mettez pas de titre.
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
2 août 2008 6 02 /08 /août /2008 00:54
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: Helvetica,Verdana,  Arial, sans-serif; font-size:small; color:#4C3A30; background-color:#FFF1D4;font-size:small;}
#global { min-width: 1005px;}

#cl_1_0 {margin:0px; width:20%;}
#cl_1_2 {margin:0px; width:20%;}
#cl_1_1    {margin:0px 1%; width:56%; padding:0 0.5% 0 0.5%;}

a         { text-decoration:underline; color:#4C3A30; font-size:110%; }
a:hover { text-decoration:none; color:#4C3A30;}
input {color:#4C3A30;background-color:#FBF1D9;}

#top    {padding:0px; border-bottom: 0px solid gray; margin-bottom: 10px;}
#top h1 { padding:0px; margin:0px;color:#4C3A30; }

#footer   { clear:both; color: #4C3A30; border-top: 0px solid gray; }
#footer p { margin:0px; padding: 10px; }

.box{margin:auto; margin-bottom:15px; padding:0px;border:1px solid #4C3A30;border-top:0px solid ;}
.box-titre  {background:none; margin:0px; padding:0px; overflow: hidden;background-color:#C8CDA5;border-top:1px solid #4C3A30;}
.box-titre h2{height:auto; background:none;margin:0px; margin-top:5px;padding:0 0 0 5px; color:#4C3A30;text-align:center;border-bottom:1px solid #4C3A30;}
.box-titre span{background:none; display:block;margin:0px; padding:0px; }
.box-content { border:0px none;  padding:5px; }
.box-content li {color:#4C3A30;}
.box-footer  {background:none; margin:0px; padding:0px; font-size:6px;display:none;}
.box-footer h2{background:none;margin:0px; padding:0px; }
.box-footer  span{background:none ; display:block;margin:0px; padding:0px; }

#articleAccueil {border:0px;}
.beforeArticle {padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:0px solid #4C3A30; width:100%; }
.date     { width:100%;text-align:center; }
.article h2 {text-align:center;}
.titreArticle{text-decoration:none;color:#4C3A30;}
.titreArticle:hover {text-decoration:none;}
.article    { margin-top:10px; padding:0px; color:#4C3A30;border:1px solid #4C3A30;width:98%;}
.article p  { padding:0px 0px 5px 5px; margin:0px; }
.afterArticle {border:0px;}

.h2commentMessage {color:#4C3A30;}
.commentMessage  { padding:5px; border:1px solid #4C3A30;margin:0px; background-color:#FFF1D4; color:#4C3A30;}
.responseMessage  { padding:5px;border:1px solid #4C3A30;background-color:#C8CDA5;margin:0px;color:#4C3A30;}
.commentOption   {text-align:right;font-size:85%;color:#3D430A; margin-bottom:10px;}
.afterReactions .linkAddComment {color:#4C3A30;font-size:90%;}

.calendarTop1 { background-color:#FFF1D4;color:#4C3A30;}
.calendarTable1 {background-color:#4C3A30;}
.calendarDays1 {background-color:#fff1d4;}
.calendarHeader1 {background-color:#4C3A30;}
.calendarToday1 {background-color:#4C3A30;}

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 au centre + 1 colonne module à droite

Ensuite, vous mettez le module d'entête au-dessus de l'article (et non tout en haut). Vous gardez le pied de page et placez les modules voulus dans les colonnes latérales.


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 TexteLibre au-dessus de l'article) - 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>
<table bordercolor="#4c3a30" height="117" cellspacing="1" cellpadding="1" width="542" align="center" bgcolor="#c8cda5" border="1">
    <tbody>
        <tr>
            <td>
            <table height="67" cellspacing="1" cellpadding="1" width="472" align="center" background="http://www.casimages.com/img/070303075545362429.jpg" border="1">
                <tbody>
                    <tr>
                        <td align="right">
                        <div align="center"><font size="5">DesignAnnak : </font><br />
                        <font size="5">blog de designs OB </font></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

Vous ne mettez pas de titre.
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
26 juin 2008 4 26 /06 /juin /2008 00:23

26 juin 2008

 

Aujourd'hui, cela fait 2 ans que j'ai créé ce blog. Je fais donc le point :

Nombre de visiteurs 381.000
100.000ème visiteur le 20 juin 2007
200.000ème visiteur le 7 janvier 2008 
300.000ème visiteur le 10 avril 2008
Passage des 1000 visiteurs/jour le 30 janvier 2008
Nombre de pages vues 2.169.000 
1.000.000ème page vue le 4 novembre 2007
2.000.000ème page vue le 20 mai 2008
Ratio Visiteur/pages vues 5,6 
Nombre d'articles publiés 915 
Nombre de commentaires 6995 
Nombre d'inscrits à la newsletter 155 
100ème abonné à la newsletter 4 septembre 2007
Journée record : nombre de visiteurs 20 mai 2008 : 2.054
Journée record : nombre de pages vues 2 février 2008 : 10.343
Mois record : nombre de visiteurs mai 2008 : 38.730
Mois record : nombre de pages vues mai 2008 : 175.339
Page Rank 4
Repost 0
Published by Anna K - dans Vie des Blogs
commenter cet article
26 juin 2008 4 26 /06 /juin /2008 00:03

J'ai trouvé l'idée chez CREATION DE SITE

Cette astuce ne fonctionne que sous IE malheureusement.

Ce code peut être utilisé pour mettre en valeur une liste de liens sans recourir à un programme plus lourd tel que Snap. Au survol de la souris, l'image représentative de la destination apparaît :

Vronski Beat
La Déco d'Anna K.
Château féodal et ruine médiéval
Soviet Suprem



Pour chaque lien, vous préparez une image de petit format qui représente la destination de ce lien : avatar ou saisie d'écran de la page d'accueil.

Puis vous collez en HTML :

<script type="text/javascript">
<!-- script créé par le webmaster de : -->
<!-- www.creation-de-site.net -->
<!-- vous y trouverez des javascripts, des images, des tutoriaux et des ressources gratuites. -->
<!--
var img = new Array()
img[1]='<img src="ADRESSE ICONE BLOG 1">'
img[2]='<img src="ADRESSE ICONE BLOG 2">'
img[3]='<img src="ADRESSE ICONE BLOG 3">'
img[4]='<img src="ADRESSE ICONE BLOG 4">'
img[5]='<img src="ADRESSE ICONE BLOG 5">'

function souris_on(contenu)
{
 if (document.all)
  image.innerHTML=contenu;
}
function souris_off()
{ image.innerHTML = defaut; }
//-->
</script>

</p><a onmouseover="souris_on(img[1]);" onmouseout="souris_off();" href="ADRESSE BLOG 1">NOM BLOG 1</a> </p>
<p><a onmouseover="souris_on(img[2]);" onmouseout="souris_off();" href="ADRESSE BLOG 2">NOM BLOG 2</a> </p>
<p><a onmouseover="souris_on(img[3]);" onmouseout="souris_off();" href="ADRESSE BLOG 3">NOM BLOG 3</a> </p>
<p><a onmouseover="souris_on(img[4]);" onmouseout="souris_off();" href="ADRESSE BLOG 4">NOM BLOG 4</a> </p>
<p><a onmouseover="souris_on(img[5]);" onmouseout="souris_off();" href="ADRESSE BLOG 5">NOM BLOG 5</a> </p>

<table>
<tr>
<td>
<div id="image">
<img src="http://accel7.fdata.over-blog.com/0/37/17/67/avatar-blog-50320-tmpphp3apTG9.jpeg">
</div>
</table>

<script type="text/javascript">
<!--
if(document.all)
 var defaut = image.innerHTML;
//-->
</script>



En rouge, vous remplacez par l'adresse du lien
En bleu, vous remplacez par l'adresse du blog ou du site
En vert, vous remplacez par le nom du blog ou du site.
En violet, l'adresse de l'image qui apparaît lorsqu'aucun lien n'est survolé

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 juin 2008 7 15 /06 /juin /2008 00:13
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 Ray Lime 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


/* ray article 7 */
#top {    border-bottom:5px solid #000;background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/267/lime/article/7/pics/bg-header.gif);
}
#header {font-size: 1.2em;background-repeat: no-repeat;    background-position: top;min-height: 83px;height:auto!important;height:83px;    background-color: #93dd00;background-image:url(http://fdata.over-blog.com/99/00/00/01/templates/267/lime/article/common/pics/bg-top.gif);
}
#ln_1 {    background-image:none;border-left:5px solid #000;border-bottom:5px solid #000;}
#cl_1_0 {width:625px;}
#ln_2 {    background-image:none;padding:20px 0 5px 10px;}

/* @group user */
body {    background-color: #232323;color: #E3E3E3;font-family: Arial,Helvetica,sans-serif;background-image:url(http://nsm01.casimages.com/img/2008/02/16//08021606325362651726134.jpg);background-repeat:no-repeat;background-attachment:fixed;}
}

a {color: #a7d625;}
#top {padding: 20px 20px 30px;text-align: left;    color: #000;}
#footer {}

.date {}
.titreArticle {}
.beforeArticle {padding: 0;margin: 25px 0 0 0;width: 100%;text-align: right;
border-bottom: 1px solid #3D3D3D;}
.article {margin-top: 5px;padding: 0 0 0 0;font-size: 1.2em;line-height: 1.3em;}
.contenuArticle {padding: 0px 0px 5px 5px;margin: 0px;text-align: justify;background-color:#232323;color:#7D821E;font-size:110%;}

.beforePage {padding: 0;margin: 25px 0 0 0;width: 100%;    text-align: right;    border-bottom: 1px solid #3D3D3D;}

.page {    margin-top: 5px;padding: 0 0 0 0;font-size: 1.2em;line-height: 1.3em;}

.box-titre {    padding-bottom: 5px;}
.box-titre h2 {color:#7D821E;}
.box-content {}
.box {    margin: auto auto 15px;    background-color: #333232;}

.commentMessage {}
.commentOption {font-size: 10px;color: #9c9c9c;}
.extraitArticle {}
.dateExtrait {}
.extrait {}
.plusExtrait {}

/* @end */

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 au centre + 1 colonne module à droite

Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans les colonnes latérales.


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 TexteLibre) - 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="100%" align="center" border="0">
    <tbody>
        <tr>
            <td><img class="noAlign"  src="http://nsm01.casimages.com/img/2008/02/16//08021606425562651726263.gif"  /></td>
            <td><font size="6">DESIGN ANNA K</font></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.
Repost 0
1 juin 2008 7 01 /06 /juin /2008 00:54
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 Ray Fuschia 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


/* ray article 5 */
#ln_0 {border-bottom:5px solid #000000;margin-top:-5px;}
#top {    background:none;padding: 20px 20px 30px;text-align: left;color: #000000;}
#header {background-color: #FCE5EB;    background-image: url(http://nsm01.casimages.com/img/2008/02/16//08021605201662651725698.jpg);
    border-bottom-color: #e21898;    font-size: 1.2em;
    background-repeat: no-repeat;    background-position: top right;
    min-height: 83px;    height:auto!important;    height:83px;}

#ln_2 {    background: none;padding:20px 0 5px 10px;}
#footer {}

/* @group user */
body {    background-color: #000000;color: #E3E3E3;font-family: Arial,Helvetica,sans-serif;
background:url(http://nsm01.casimages.com/img/2008/02/16//08021605045862651725628.jpg);
background-attachment:fixed;background-repeat:no-repeat; }
#global {width:700px;margin-left:300px;}
#ln_1 {background:none;}
#cl_1_0 {width:68%;border:5px solid #FCE5EB;}
#cl_1_1{width:26%;margin-top:0px;border:5px solid #FCE5EB;}

a {color: #e11898;}
input {background:none;background-color:#FCE5EB;}

.beforeArticle {padding: 0;margin: 25px 0 0 0;width: 100%;text-align: right;
border-bottom: 1px solid #3D3D3D;font-size: 12px;color:#000000;}
.date {}
.titreArticle {}
.article {margin-top: 5px;padding: 0 0 0 0;line-height:1.3em;}
.contenuArticle {padding: 0px 0px 5px 5px;margin: 0px;    text-align: justify;
background:
url(http://fdata.over-blog.com/99/00/00/01/templates/267/fuchsia/article/common/pics/bg-box.gif);}

.beforePage {    padding: 0;margin: 25px 0 0 0;    width: 100%;
text-align: right;border-bottom: 1px solid #3D3D3D;}

.page {    margin-top: 5px;padding: 0 0 0 0;font-size: 1.2em;line-height: 1.3em;}

.box-titre {padding-bottom: 5px;}
.box h2 {color:#FCE5EB;}
.box-content {}
.box {    margin: auto auto 15px;background-color:#333232;}

.commentMessage {}
.commentOption {font-size: 10px;color: #9c9c9c;}
.extraitArticle {}
.dateExtrait {}
.extrait {}
.plusExtrait {}

/* @end */

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 au centre + 1 colonne module à droite

Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans les colonnes latérales.


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 TexteLibre) - 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="6">DESIGN ANNA K.</font></div>

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.
Repost 0
15 mai 2008 4 15 /05 /mai /2008 00:41




AVANT TOUTES ACTIONS :

  • Dans Design, vérifiez que vous avez bien sélectionné le modèle JACKYE BROWN
  • En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.


Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style
Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style

POUR ENLEVER LA COULEUR DE FOND BEIGE DANS LES MARGES EXTERIEURES


La ligne existe déjà

body {margin:0px; padding:0px; background-color:#DED2B1; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}

vous modifiez ce qui est en bleu

body {margin:0px; padding:0px; background:none; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}

POUR ENLEVER LA COULEUR DE FOND DANS LES COMMENTAIRES ET REPONSES


La ligne existe déjà

.commentMessage {padding:5px; border:1px dotted #000; background-color:#EAE2CE; margin:0px;}

Vous modifiez ce qui est en rouge

.commentMessage {padding:5px; border:1px dotted #000; background:none; margin:0px;}

Repost 0
Published by Anna K - dans Archives
commenter cet article
30 avril 2008 3 30 /04 /avril /2008 00:27


AVANT TOUTES ACTIONS :

  • Dans Design, vérifiez que vous avez bien sélectionné le modèle A CLOCKWORK ORANGE
  • En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.


Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style
Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style

POUR ENLEVER LE FOND ORANGE DANS L'ENTETE


La ligne existe déjà

#top {padding:5px; color:#FFF; background-color:#DE7008; border:1px solid #DE7008;  margin-bottom:10px;}

Vous modifiez ce qui est en rouge

#top {padding:5px; color:#FFF; background:none; border:1px solid #DE7008;  margin-bottom:10px;}

POUR ENLEVER L'ENCADREMENT ORANGE DANS L'ENTETE


Toujours dans la même ligne

#top {padding:5px; color:#FFF; background-color:#DE7008; border:1px solid #DE7008;  margin-bottom:10px;}

Vous modifiez ce qui est en bleu

#top {padding:5px; color:#FFF; background-color:#DE7008; border:0px solid #DE7008;  margin-bottom:10px;}

POUR ENLEVER LE FOND ORANGE DANS LE PIED DE PAGE


La ligne existe déjà

#footer {margin-top:10px; position:relative; color:#F5DEB3; background-color:#DE7008; width:800px;}

Vous modifiez ce qui est en rouge

#footer {margin-top:10px; position:relative; color:#F5DEB3; background:none; width:800px;}

POUR ENLEVER LA COULEUR DE FOND JAUNE ORANGE DANS LES COMMENTAIRES


La ligne existe déjà

.commentMessage {padding:5px; border:1px dotted #000; margin:0px; background-color:#F5E39E;}

Vous modifiez ce qui est en rouge

.commentMessage {padding:5px; border:1px dotted #000; margin:0px; background:none;}

Repost 0
Published by Anna K - dans Archives
commenter cet article
22 avril 2008 2 22 /04 /avril /2008 00:54
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 Shades of grey - Blue 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


#global {min-width:990px; }
body {font-family: Verdana, sans-serif;font-size:12px;
background:url(http://www.casimages.com/img/jpg/07102801093562651363501.jpg);
background-attachment:fixed;background-position:top center;}
#cl_1_0,#cl_1_2 {margin:0px; width:20%;}
#cl_1_1    {margin:0px 1%; width:56%; padding:0 0.5% 0 0.5%;}

a     { text-decoration:none; color:#FFF; }
a:hover { text-decoration:underline; color:#A6A6A6; }

#top    {padding: 15px 10px 15px 10px;text-align: center;font-weight: normal;font-size: 36px; font-family:Viner Hand ITC;}
#cl_0_0 {border-top:15px solid #2F485D;border-bottom:15px solid #2F485D;margin-top:-15px;}

#footer p{background-color:#2F485D;}

.box {margin:auto;margin-bottom:15px;background-color: #EBEBEB;border-bottom: 1px solid #666666;color:#2F485D;}
.box-titre {margin:0px;    padding: 4px 5px 2px 5px;border-top: 7px solid #2F485D;border-bottom: 1px dashed #7B7B7B;background-color: #434343;}
.box-titre span{display:block;margin:0px;padding:0px;}
.box-titre h2 {padding:0px; margin:0px;}
.box-content { padding:5px; }
.box-content ul {margin: 0 0 0 16px; padding:0px;}
.box-content ul li {color:#2F485D;}    
.box-content a {color:#2F485D;}    

.beforeArticle {padding:0px 0px 5px 0px; margin:0px; border-bottom:1px solid #808080; width:100%; }
.article    { margin-top:10px; padding:0px;  }
.contenuArticle {background-color:#EBEBEB;}
.article p  { padding:0px 0px 5px 5px; margin:0px; }
.date     {padding: 0 0 3px 5px;color: #2F485D;font-size: 12px;}
.titreArticle        { text-decoration:none; color:#FFF; }
.titreArticle:hover    { text-decoration:underline; color:#FFF; }
.divTitreArticle h2 {border-top: 10px solid #2F485D;}
#articleSeul h2 {border-top: 10px solid #2F485D;}
.afterArticle {background-color:#EDF3F7;color:#000;}
.topic a {color:#000;}
.h2commentMessage {color:#000;}
.afterReactions a {color:#000;}

.commentMessage  {margin:0px;padding:5px;border-top: 1px solid #2898FF;    background-color: #8BA9C1;}
.responseMessage {background-color:#DDE6ED;}
.commentOption   {text-align:right;margin-bottom:10px;padding: 3px 5px 2px 5px;background-color: #EDF3F7;    font-size: 10px;color: #363636;    }

.extraitArticle { margin-top: 10px; margin-bottom: 20px; border-bottom: 1px solid #7B7B7B;}
.extrait {padding: 5px;    background-color: #D9D9D9;}
.plusExtrait {padding: 2px 5px 2px 5px;    background-color: #EDF3F7;text-align: right;font-size: 10px;    color: #D9D9D9;}

.beforePage {padding:0px 0px 5px 0px; margin:0px; border-bottom:1px solid #808080; width:100%; }
.page    { margin-top:10px; padding:0px;  }
.page p  { padding:0px 0px 5px 5px; margin:0px; }
.divPageTitle h2        { text-decoration:none; color:#FFF; }
.divPageTitle h2:hover    { text-decoration:underline; color:#FFF; }

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 module à gauche+1colonne article au centre + 1 colonne module à droite

Ensuite, vous mettez le module d'entête tout en haut. Vous gardez le pied de page et placez les modules voulus dans les colonnes latérales.


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 TexteLibre au-dessus de l'article) - 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 width="950" height="100" cellspacing="1" cellpadding="1" border="0"
background="http://www.casimages.com/img/jpg/07102905085262651367497.jpg"
align="center">

<tbody>

<tr>

<td align="center">

DesignAnnak : les Design Over-Blog

</td>

</tr>

</tbody>

</table>


Vous ne mettez pas de titre.
 DesignAnnak : les Design Over-Blog: 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 Photo-Suisse :

Repost 0
18 avril 2008 5 18 /04 /avril /2008 00:45

Ce texte (encadré en rouge) est obligatoire, mais supposons que votre lectorat  ne soit pas de langue française et que vous  vouliez donc écrire une traduction de ce texte.

PREMIERE ETAPE :

On efface ce qu'il y a d'écrit. Dans le CSS Global, vous rajoutez

#divNewsletter .legalNotice {display:none;}

 


DEUXIEME ETAPE :

On crée avec un logiciel de dessin le texte qui remplacera. Pour qu'il puisse occuper l'espace vide, il lui faut des dimensions de 450*100 px.
Soit vous lui mettez un fond transparent (en gif de préférence), soit vous l'écrivez sur le même fond que votre blog.


Vous hébergez cette image.

TROISIEME ETAPE :

Dans le CSS Global, vous complétez la ligne ou vous la rajoutez si elle n'existe pas :

#divNewsletter {background-image:url(adresse de votre image);background-repeat:no-repeat;background-position:bottom center;}




Repost 0
Published by Anna K - dans Archives
commenter cet article