Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

8 février 2008 5 08 /02 /février /2008 16:58
Vous souhaitez modifier la mise en page de votre blog ? Et bien voilà comment procéder...
Pour commencer, il suffit d'aller dans votre administration, puis dans "design", puis dans "mode avancé", puis d'aller en bas de la fenêtre de css, et de cliquer sur "Expert en CSS ? Cliquez ici pour définir les héritages de votre blog…" 
Maintenant vous allez définir les héritages de votre blog. 


héritage css

Décocher les trois premières cases vous ouvre les portes de la liberté !



Les classes CSS que vous pouvez trouver sans décocher les cases d'héritage :

Généralités sur le corps du blog
body {}

Liens (hover = survolés)
a {}
a:hover {}

Entête du blog : (H1 = titre)
#top  {}
#top h1 {}

Pied de page du blog :
#footer {}

Modules :
.box {}

Articles :
.article {}
.date {}
.titreArticle {}

Commentiares :
.commentMessage {}
.commentOption {}

Pages : (H2 = titre)
.page {}
.divPageTitle h2 {}

C'est peu...


Si vous décochez les deux premières cases (Feuille générale pour le template Feuille générale pour une variation) et  vous pourrez accéder aux variations suivantes (qui complètent les précédentes)

/* ////////////////////////////// */
/* Feuille générale pour une variation */
/* ------------------------------ */

Généralité du corps du blog
body {}
h1 {}
h2 {}
h3 {}
a {}
a:hover {}
legend {}
li {}
img {}
input {}

Ensemble du blog :
#global {}

Entête du blog :
#header{} 
#top  {}
#top h1 {}
#top .topLien {}
#top .topLien:hover {}

Pied de page :
#footer {}
#footer p {}

Règlementation over-blog :
#reglementBlog h1 {}

Configuration des articles :
.article {}
.article p {}
.contenuArticle {}
.date {}
.afterArticle {}
.afterArticle .options {}
.linkComment{}
.linkTrackback{}
.linkRecommend{}
.linkAddComment{}
.beforeArticle {}
.topic {}
.topic a {}
.topic a:hover { }
.titreArticle {}
.divTitreArticle {}
#articleSeul {}
.GcheTexte {}
.DrteTexte {}
.CtreTexte {}
.plusExtrait {}
.hitcitation {}
.hitencart {}
.hitimportant {}
.hitperso1 {}
.hitperso2 {}

Listes des articles (si le blog est configuré pour avoir les résumés à l'accueil) :
.listArticles {}
.resumeArticle {}

Affichage des commentaires :
.h2commentMessage {}
.comment {}
.comment hr {}
.afterReactions {}
.afterReactions .linkAddComment {}
.commentMessage {}
.commentOption {}
.reponseMessage {}

Formulaire de saisie d'un commentaire :
#formComment {}
#formComment h2 {}
#formComment label {}
#formComment input {}
#formComment textarea {}

Trackback :
#addTrackback {}
#addTrackback h2 {}
.showTrackback {}
.showTrackback a {}
.showTrackback a:hover {}
.showTrackback h2 {}
.afterReactions .linkAddTrackback {}
.h2Trackback {}
.nocomm

Fenêtre d'ajout d'un trackback :
#divTrackBack {}
#divTrackBack h2 {}
#divTrackBack input {}
#divTrackBack textarea {}

Fenêtre de recommandation
#divRecommander {}
#divRecommander span {}
#divRecommander h2 {}
#divRecommander input {}
#divRecommander textarea {}

Pagination du blog :
.pagination {margin:10px;}

Modules :
.box {}
.box-titre {}
.box-titre h2 {}
.box-content {}
.box-content p {}
.box-content ul {}
.box-content li {}
.box-footer {}
.basLien {}
.basLien:hover {}
.box-content .listAll {}
.box-content .listAll a {}

Module de présentation
#Presentation span {}
#Presentation .box-titre {}
#Presentation strong {}

Module du calendrier
#Calendrier .box-content {}
.calendarTop1 {}
.calendarToday1 {}
.calendarDays1 {}
.calendarHeader1 {}
.calendarTable1 {border:0px none;}

Module Newsletter
#divNewsletter h2 {}
#divNewsletter input {}
#divNewsletter .newsletter li {}
#divNewsletter {}
#Newsletter {}
#Newsletter form {}
#Newsletter {}
#Newsletter form {}

Module recherche
#Recherche {}
#Recherche form {}

Mise en page des pages
.page {}
.page p {}
.pageContent {}
.afterPage {}
.afterPage .options {}
.beforePage {}
.divPageTitle h2 {}
.divPageTitle {}


En décochant la troisième case (Feuille de structure générique) vous pourrez modifier la taille des colones et de la mise en page des éléments du blog :

/* ////////////////////////////// */
/* Feuille de structure générique */
/* ------------------------------ */

body, html {}
#global {}
.ln {}
.cl {}

#ln_1 {}
#cl_0_0 {}
#cl_1_0,#cl_1_2 {}
#cl_1_1 {}
#cl_2_0 {}

 

La dernière croix ne sert à rien... un mystère d'Over-blog !

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

alda 25/03/2008 17:59

Bonjour, j'aimerais juste savoir comment vous avez fait pour avoir une page d'accueil aussi magique. j'essaye mais je n'y arrive pas. je souhaiterai vraiment avoir votre aide. Merci
Alda

Christelle Vinsonneau 02/05/2008 15:05


Pour commencer il faudrait lire les article sur le css, et si c'est déjà fait alors il faudrait me dire là où il y a un problème...


melodye 09/02/2008 17:39

merci pour ce nouvel article! maintenant, je comprends de nouveaux trucs! ;) comme par exemple qu'il faut que je decoche la troisième case pour mes colonnes, par contre j'attends de nouveaux conseils pour savoir ce que je dois changer!lool mais c'est deja un peu plus clair!!