Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

Publié dans : Design et Mise en page - OB
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: Fine Hand, Helvetica,Verdana,  Arial, sans-serif; font-size:small;background:url(http://www.casimages.com/img/070401045429439355.gif);
background-attachment:fixed; background-position:center left;background-repeat:repeat-y;background-color:#979DAF;}
#global {background:none;margin-left:150px;}

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

#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:#5A547A; 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:#5A547A;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;color:##5A547A;text-align:justify;border: 2px solid #5A547A;background-color:#D9DBE1;}
.date {text-align:center;}
.titreArticle {text-decoration:none;color:#5A547A;text-decoration:underline;}
.titreArticle:hover {text-decoration:underline; color:#5A547A;}
.divTitreArticle{text-align:center; }
.afterArticle {color:#5A547A;}
.topic a { color:#5A547A; }

.box { margin:0px; padding:0px; margin-bottom:10px;border: 2px solid #5A547A;background-color:#D9DBE1; }
.box-titre h2 {color:#5A547A; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px;text-decoration:underline; }
.box-titre {padding:0px; text-align:center;}
.box-content {overflow:auto; padding:2px 5px; color:#5A547A;}
.box-content li {color:#5A547A;}

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

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

#formComment  {background-color:transparent;border:1px solid #5A547A;   }
#divRecommander { background-color:transparent; border:1px solid #5A547A;  }
#divNewsletter { background-color:transparent; border:1px solid #5A547A;  }

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 à gauche+1colonne 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="790" background="http://www.casimages.com/img/jpg/07090912460662651190865.jpg" border="1">
    <tbody>
        <tr>
            <td>
            <table cellspacing="1" cellpadding="1" width="95%" align="center" bgcolor="#d9dbe1" border="1">
                <tbody>
                    <tr>
                        <td align="center"><font size="6"><font color="#434959">DesignAnnaK : le blog de design OB</font></font></td>
                    </tr>
                </tbody>
            </table>
            </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 grandeur nature chez :
Voir les 15 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Commentaires

Superbe design  encore une fois , c'est sympas de proposer ce service css " rapide " à tes visiteurs.

Passe une bonne soirée bisous :)
Commentaire n° 1 posté par Jean Michel le 14/11/2007 à 18h50
bonsoir Annack 

me donnez vous l'autorisation d'utiliser votre design pour mon second blog , j'ai essayé de tout mettre en place , je voudrais faire un blog avec uniquement des vieilles cartes postales . . .
cela fait longtemps que j'admirais le style carnet mais je n'étais pas capable de le mettre en place , il me semble que là j'y arrive , 
si vous m'autorisez je vous mettrais en lien naturellement 
je vous remercie 

Commentaire n° 2 posté par agathe le 18/11/2007 à 00h02
Pas de pb Agathe :)
Réponse de Anna K le 18/11/2007 à 10h23
merci Annack 

vous etes super adorable 

Commentaire n° 3 posté par agathe le 18/11/2007 à 10h51
je fais un nouvel essai , suis pas douée
Commentaire n° 4 posté par agathe le 18/11/2007 à 10h55
Annak 
je trouve superbe , pour une personne qui comme moi , a beaucoup de mal, , j'adore , dites moi ce que vous , vous en pensez . 
.et puis je voudrais pouvoir avoir plus de place comme sur mon autre blog , où dois je m'adresser pour pouvoir m'abonner comme pour le blog d'agathe 
excusez moi de vous ennuyer 
belle journée à vous
Commentaire n° 5 posté par agathe le 18/11/2007 à 12h06
Je t'ai rajouté en exemple dans l'article :)
Réponse de Anna K le 18/11/2007 à 15h35

bonjour Anna

Je débute en blog.Après avoir demandé un avis sur mon blog, Thomas , sur le forum m'a conseillé de changer de design, après avoir changé la bannière et m'a dirigé entre autres vers ton blog d'aide.Je l'en remercie car j'ai trouvé des choses bien sympathiques.J'ai repéré notamment le modèle "cahier bleu , largeur fixe" mais j'ai 2 questions avant de me lancer : suis-je obligée de passer en design"pretty in pink" et dois je repasser en mode normal, maintenant que j'ai dû passer en mode avancé pour la bannière?Merci par avance.

Commentaire n° 6 posté par senga le 30/12/2007 à 15h31
Bonjour Senga :) ce design est concçu avec un CSS de Pretty in Pink ; sur un autre CSS, ça risque de te mettre les colonnes sens dessus dessous.
Pour le monde avancé, il suffira de recopier le CSS dans chaque CSS : accueil, articles...
Réponse de Anna K le 31/12/2007 à 08h18
Annak, je te souhaite une bonne et heureuse année 2008,pleine de bonnes choses.Quant à moi, je suis sûre d'au moins 1 chose pour 2008 : je risque de te demander encore conseil.Encore merci pour ta gentillesse.
Agnès
Commentaire n° 7 posté par agnès le 02/01/2008 à 14h51
Bonjour Anna K.


J'avais une idée précise de l'apparence que je voulais donner à mon blog et après de longues recherches, c'est ici que j'ai trouvé les moyens techniques de la réaliser.
Ayant utilisé ce CSS comme base sur laquelle j'ai adapté le fond de ton cahier à spirale jaune et appliqué nombre de tes ficelles pour la personnaliser, on peut dire que je te dois mon design.

Et pour tout cela, je tiens à te dire un grand merci !

J'ai écrit une petite page pour l'indiquer et donner les liens correspondants afin que mes (futurs, parce-que je démarre tout juste) lecteurs le sachent d'une part car cela me paraît être la moindre des choses de le dire et qu'ils puissent aussi avoir recours éventuellement au travail précieux dont tu fais ici cadeau.


Loba.
Commentaire n° 8 posté par Loba le 27/03/2008 à 19h19
je passe voir, j'aime bien qu'on réinterprète les design
Réponse de Anna K le 29/03/2008 à 15h24
Bonjour Anna K.


J'avais une idée précise de l'apparence que je voulais donner à mon blog et après de longues recherches, c'est ici que j'ai trouvé les moyens techniques de la réaliser.
Ayant utilisé ce CSS comme base sur laquelle j'ai adapté le fond de ton cahier à spirale jaune et appliqué nombre de tes ficelles pour la personnaliser, on peut dire que je te dois mon design.

Et pour tout cela, je tiens à te dire un grand merci !

J'ai écrit une petite page pour l'indiquer et donner les liens correspondants afin que mes (futurs parce-que je démarre tout juste) lecteurs le sachent d'une part car cela me paraît être la moindre des choses et qu'ils puissent aussi avoir recours éventuellement au travail précieux dont tu fais ici cadeau.


Loba.
Commentaire n° 9 posté par Loba le 27/03/2008 à 19h30
Coucou, il me fallait rapidement un blog au fond plus sobre... alors je me suis à nouveau tournée vers toi... et avec un peu de ton css magique, en quelques clics j'ai installé ton cahier sur mon blog. Merci beaucoup, vraiment.
Commentaire n° 10 posté par frezzia67 le 30/06/2008 à 14h54
Je passe voir
Réponse de Anna K le 01/07/2008 à 15h49
Hello Anna. Je te remercie pour tous tes précieux conseils. J'ai une question, comment puis-je passer ce désign en 3 colonnes, avec colonne article au milieu ? Je n'y arrive pas. les 2 clonnes restent à gauche. Je rate un truc c'est sur. En principe, je finis par retomber sur mes pattes mais là, je sèche !!! Te remerciant par avance ! Mu
Commentaire n° 11 posté par Mu le 19/11/2008 à 00h54
Rehello Anna. Bon, j'ai trouvé une solution sous Firefox, mais dans IE, la colonne du milieu est trop à gauche. Aurais-tu une astuce, STP ? merci d'avance Bon we
Commentaire n° 12 posté par Mu le 22/11/2008 à 11h21
Et bien, finalement, j'ai changé de design, j'en ai pris un dans la rubrique des carnets à spirales, lien en cuir. Avec quelques bidouillages, je suis parvenue à insérer mes 3 colonnes, visibles sous IE (reste un léger décalage à doite) et FF. Nous sommes ravis du rendu. Merci Anna et passes nous voir à l'occase. Mu
Commentaire n° 13 posté par Mu le 26/11/2008 à 10h07
Bonjour Anna, juste pour te dire que j'ai essayé un de tes jolis design pour la 1ère fois. Tout a bien fonctionné de mon côté cependant il y a un problème dont j'aimerais avoir ton conseil stp. Si tu peux passer sur mon blog et vérifier... Voilà, c'est que lorsque je tasse pour aller vers ma colonne droite la boîte du centre ainsi que l'entête « bougent » vers la gauche, elles ne reste pas fixent au centre. Merci de me donner ton avis et j'espère que ce sera pas un problème où je devrai laisser tomber ce design que tu as fait car je l'aime beaucoup pour ce blog. Mirella
Commentaire n° 14 posté par Mirella le 15/01/2009 à 06h23
Bonsoir, je tiens d'abord à vous remercier pour ce que vous faite pour nous. Vos design sont sublimes, et justement j'ai mis celui là sur mon blog. Je vous remercie encore pour le temps que vous consacrez pour nous faire plaisir. Je vous souhaite une bonne soirée. nel
Commentaire n° 15 posté par nel le 03/02/2009 à 21h23

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Commentaires

Publicité

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus