Le CSS de Over-Blog

Publié le 23 mars 2007 par Led Ganache

Détail du topic :

Le code ci-dessous est une feuille de style (il correspond au fichier CSS attribué au blog). C'est à dire qui détient toutes les informations relatives à la mise en page du blog. Le code ci-dessous correspond au design par défaut "red" de Over-Blog.
Le rôle de chaque styles est décrit dans un cadre rouge.
Les propriétés, y figurant en orange, son des liens vers une description. Donc si vous voulez connaître le rôle et les possibilités d'une propriété, cliquez dessus.

Si vous avez besoins de précisions, n'hésitez pas à me poser des questions via les commentaires de cette page.

/* ---------- Elements Principaux ------------- */

Ensemble de la page

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

Titre de niveau 1

h1
{
color: #5B6B7C;
font-size: 20px;
}

Titre de niveau 2

h2
{
color: #5B6B7C;
font-size: 15px;
}

Titre de niveau 3

h3
{
color: #5B6B7C;
font-size: 12px;
}

Lien

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

Lien survolé

a:hover
{
text-decoration:none;
color:#5B6B7C
}

Style de texte légende

legend
{
color:#5675A4;
padding-left:5px;
padding-right:5px;
}

Liste

li
{
list-style-type:none;
}

Image

img
{
border:0px;
}

Champ de saisie de texte

input
{
border:solid 1px #D8D7D7;
font-size:100%;
background:#FFFFFF;
color:#5675A4;
}

/* ---------- Structure ------- */
/* La class main correspond à la structure global du blog
/* le numéro après 'main' correspond au type de structure (1 2 ou trois colonne) */

/* Pour les stuctures avec 2 colonnes */

Cadre "main1", soit la structure globale avec deux colonnes

#main1
{
text-align: left;
margin: 0px auto 50px auto;
}

Cadre "rightnav" contenu dans le cadre "main1", soit la colonne de gauche d'une structure globale avec deux colonnes

#main1 #rightnav
{
padding:10px;
width:210px;
}

Cadre "leftnav" contenu dans le cadre "main1", soit la colonne de gauche d'une structure globale avec deux colonnes

#main1 #leftnav
{
padding:10px;
width:210px;
}

Cadre "content" contenu dans le cadre "main1", soit le cadre dans lequel s'affiche les articles d'une structure globale avec deux colonnes

#main1 #content
{
padding:10px;
border-left:1px solid #B8B8B8;
border-right:1px solid #B8B8B8;
}

Titre de niveau 2 contenu dans le cadre "main1", soit le titre de niveau 2 d'une structure globale avec deux colonnes

#main1 h2
{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
}

/* Pour les stuctures avec une colonne à droite */

Cadre "main2", soit la structure globale avec une colonne à droite

#main2
{
text-align: left;
margin: 0px auto 50px auto;
}

Cadre "leftnav" contenu dans le cadre "main2", soit la colonne de droite d'une structure globale avec une colonne à droite

#main2 #rightnav
{
padding:10px;
width:220px;
}

Cadre "content" contenu dans le cadre "main2", soit le cadre dans lequel s'affiche les articles d'une structure globale avec une colonne à droite

#main2 #content
{
padding: 10px;
border-left:1px solid #B8B8B8;
border-right:1px solid #B8B8B8;
}

Titre de niveau 2 contenu dans le cadre "main2", soit le titre de niveau 2 d'une structure globale avec une colonne à droite

#main2 h2
{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
}

/* Pour les stuctures avec une colonne à gauche */

Cadre "main3", soit la structure globale avec une colonne à gauche

#main3
{
text-align: left;
margin: 0px auto 50px auto;
}

Cadre "leftnav" contenu dans le cadre "main3", soit la colonne de gauche d'une structure globale avec une colonne à gauche

#main3 #leftnav
{
padding:10px;
width:220px;
}

Cadre "content" contenu dans le cadre "main3", soit le cadre dans lequel s'affiche les articles d'une structure globale avec une colonne à gauche

#main3 #content
{
padding: 10px;
border-left:1px solid #B8B8B8;
border-right:1px solid #B8B8B8;
}

Titre de niveau 2 contenu dans le cadre "main3", soit le titre de niveau 2 d'une structure globale avec une colonne à gauche

#main3 h2
{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
}

#MainTab
{
margin:0px;
width:100%
}

#MainTab td
{
vertical-align:top;
}

/* entete */

Cadre "top", soit l'entête du blog

#top
{
padding:5px;
background:#FA3900;
color:#FFFFFF;
border-bottom: 1px solid gray;
}

Titre de niveau 1 contenu dans le cadre "top", soit le titre de niveau 1 de l'entête

#top h1
{
padding:0px;
margin:0px;
color:#FFFFFF;
}

Classe "topLien", soit le style appliqué au lien contenu dans l'entête

.topLien
{
text-decoration:none;
}

Classe "topLien" losrqu'il est survolé par le pointeur de la souris, soit le style appliqué au lien contenu dans l'entête losrqu'il est survolé par le pointeur de la souris

.topLien:hover
{
text-decoration:none;
}

/* Bas de page */

Cadre "footer", soit le pieds de page du blog

#footer
{
clear:both;
padding:10px;
background:#FA3900;
color:#FFFFFF;
border-bottom: 1px solid gray;
}

Paragraphe contenu dans le cadre "footer", soit le paragraphe contenu par le pieds de page du blog

#footer p
{
margin:0px; padding: 10px;
}

Lien contenu dans le cadre "footer", soit le lien contenu par le pieds de page du blog

#footer a
{
text-decoration:underline;
color:#FFFFFF; font-size:110%;
}

Lien contenu dans le cadre "footer" losrqu'il est survolé par le pointeur de la souris, soit le lien contenu par le pieds de page du blog losrqu'il est survolé par le pointeur de la souris

#footer a:hover
{
text-decoration:none;
color:#FFFFFF
}

Style du lien contenu dans le cadre "footer", soit le style appliqué au lien contenu par le pieds de page du blog

.basLien
{
}

Style du lien contenu dans le cadre "footer" losrqu'il est survolé par le pointeur de la souris, soit le style appliqué au lien contenu par le pieds de page du blog losrqu'il est survolé par le pointeur de la souris

.basLien:hover
{
}

.cleaner
{
clear:both;
}

/* ---------- Box ---------- */

Classe "box", soit le style appliqué aux boîtes des modules

.box
{
width:100%;
margin-bottom:10px;
}

Titre des modules

.box h2
{
color:#FFFFFF;
}

Classe "box-top", soit le style appliqué au bord supérieur des boîtes des modules

.box-top
{
background:transparent url(/modele/4/pics/box-top-center.png) repeat-x scroll top left;
}

Classe "box-left", soit le style appliqué au bord gauche des boîtes des modules

.box-left
{
background:transparent url(/modele/4/pics/box-middle-left.png) repeat-y scroll top left;
}

Classe "box-right", soit le style appliqué au bord droit des boîtes des modules

.box-right
{
background:transparent url(/modele/4/pics/box-middle-right.png) repeat-y scroll top right;
}

Classe "box-bottom", soit le style appliqué au bordinférieur des boîtes des modules

.box-bottom
{
background:transparent url(/modele/4/pics/box-bottom-center.png) repeat-x scroll bottom left;
}

Classe "box-topLeft", soit le style appliqué au coin supérieur gauche des boîtes des modules

.box-topLeft
{
background:transparent url(/modele/4/pics/box-top-left.png) no-repeat scroll top left;
}

Classe "box-topRight", soit le style appliqué au coin supérieur droit des boîtes des modules

.box-topRight
{
background:transparent url(/modele/4/pics/box-top-right.png) no-repeat scroll top right;
}

Classe "box-bottomLeft", soit le style appliqué au coin inférieur gauche des boîtes des modules

.box-bottomLeft
{
background:transparent url(/modele/4/pics/box-bottom-left.png) no-repeat scroll bottom left;
}

Classe "box-bottomRight", soit le style appliqué au coin inférieur droit des boîtes des modules

.box-bottomRight
{
background:url(/modele/4/pics/box-bottom-right.png) no-repeat scroll bottom right;
padding:3px;
}

Classe "box-content", soit le style appliqué au contenu des boîtes des modules

.box-content
{
overflow:auto;
padding:0px 10px 15px 5px; color: #5675A4;
}

Paragraphes de classe "box-content", soit le style des paragraphes des boîtes des modules

.box-content p
{
margin:5px 0px 5px 15px; padding:0px;
}

Liste énumérative de classe "box-content", soit le style des listes énumératives des boîtes des modules

.box-content ul
{
margin:5px 0px 5px 15px; padding:0px;
}

Liste de classe "box-content", soit le style des listes des boîtes des modules

.box-content li
{
list-style:square;
color:#b6b6b6;
margin:5px;
padding:0px;
}

/* ---------- Recherche --- */

Cadre "Recherche", soit le module "Rechercher"

#Recherche
{
padding:0px;
}

Cadre "WForm", soit le formulaire de recherche du module "Rechercher"

#WForm
{
margin:0px;
border:solid 1px #D8D7D7;
padding:10px;
background: #F3F7FC;
}

Bouton contenu dans le cadre "WForm", soit le bouton "OK" du module "Rechercher"

#WForm input
{
border:solid 1px #D8D7D7;
font-size:100%;
background:#f4f4f4;
color:#5675A4;
}

Bouton contenu dans le cadre "WForm" lorqu'il est survolé, soit le bouton "OK" du module "Rechercher" lorqu'il est survolé

#WForm input:hover
{
border:solid 1px #5675A4;
background:#fff;
}

.RNum
{
font-weight:bold;
}

.RDesc
{
padding:10px;
}

.ROut
{
font-style:italic;
color:#A0B8CB;
}

.RSize
{
color:#BFBFBF;
}

a.RTitle
{
text-decoration:none;
color:#00275E;
}

a.RTitle:hover
{
text-decoration:none;
color:#834141;
}

#GGResults
{
text-align:left;
margin:0px;
color:#000000;
}

.Result1
{
padding:4px;
background:#F7FAFD;
}

.Result2
{
padding:4px;
background:#FBFBFB;
}

/*------------------- Articles ----------------------------------*/

Classe "article", soit la classe qui définit un cadre comme article

.article
{
margin-top:10px;
padding:0px;
}

Paragraphe contenu par la classe "article"

.article p
{
padding:0px 0px 5px 5px;
margin:0px;
}

Classe "Date", soit le style de la date de l'article

.Date
{
width:100%;
margin-right:10px;
}

Classe "Option", soit le style appliqué aux quelques lignes figurant au bas de l'article (publié par...)

.Option {
padding:5px 0px 0px 0px;
margin:5px 0px 5px 0px;
border-top:1px dotted #808080;
width:100%;
text-align:right;
font-size:85%;
}

Classe "catégorieArticle", soit le style appliqué aux quelques lignes figurant au bas de l'article (catégorie...)

.categorieArticle
{
}

Lien contenu dans la classe "catégorieArticle", soit le style appliqué au lien menant à la catégorie de l'article

.categorieArticle a
{
text-transform:lowercase;
}

Classe "barreHautArticle", soit le style appliqué à la barre qui sépare l'article de son titre

.barreHautArticle
{
padding:0px 0px 5px 0px;
margin:0px;
border-bottom:1px solid #808080;
width:100%;
}

Classe "listArticles", soit le style de la liste complète des article (http://votreblog.over-blog.com/liste-article-blog.php)

.listArticles
{
margin-top:0px;
margin-bottom:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}

Classe "resumeArticle", soit le style appliqué aux résumés des articles dans la liste complète des articles

.resumeArticle
{ background-color:#F9F8FA;
border-top:1px solid #F4F4F4;
}

Classe "titreArticle", soit le style appliqué aux titres des articles dans la liste complète des articles

.titreArticle
{
text-decoration:none;
}

Classe "titreArticle" lorqu'il sont survolés par le pointeur de la souris, soit le style appliqué aux titres des articles dans la liste complète des articles lorsqu'ils sont survolés par le pointeur de la souris

.titreArticle:hover
{
text-decoration:none;
}

Cadre "articleSeul", soit le style d'un article lors de l'affichage d'un seul article ou de ses commentaires/trackbacks

#articleSeul
{
}

.GcheTexte
{
float:left; margin:3px;
}

.DrteTexte
{
float:right;
margin:3px;
}

.CtreTexte
{
margin:3px auto;
display:block;
}

Classe "hitcitation", soit le style "citation" disponible dans l'éditeur d'articles

.hitcitation
{
font-style:italic;
text-align:justify;
padding:5px 20px;
background-color:#eee;
}

Classe "hitencart", soit le style "encadré" disponible dans l'éditeur d'articles

.hitencart
{
border:1px solid black;
text-align:justify;
font-weight:bold;
margin:5px 0px;
padding:5px 5px;
}

Classe "hitimportant", soit le style "important" disponible dans l'éditeur d'articles

.hitimportant
{font-weight:bold;
color:red;
font-weight:bold;
font-size:120%;
}

Classe "hitperso1", soit le style "hitperso1" disponible dans l'éditeur d'articles

.hitperso1
{
font-style:italic;
}

Classe "hitperso2", soit le style "hitperso2" disponible dans l'éditeur d'articles

.hitperso2
{
font-weight:bold;
}

/*--------------------Commentaires---------------------------- */

Classe "h2commentMessage", soit le style appliqué aux titres dans les commentaires

.h2commentMessage
{
color:#3366CC;
}

.comment
{
}

Barre de classe ""comment", soit le style appliqué à la barre qui sépare l'article de ses commentaires

.comment hr
{
}

.linkcomment
{
font-size:130%;
color:#0099FF;
}

Classe "commentMessage", soit le style appliqué aux commentaires

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

Classe "commentOption", soit le style appliqué à la dernière ligne d'un commentaire (Commentaire n°...)

.commentOption
{
text-align:right;
font-size:85%;
color:#808080;
margin-bottom:10px;
}

Label contenu dans le cadre "formComment", soit le style appliqué aux trois premiers champs du formulaire de saisie de commentaire (Nom, email, site web)

#formComment label
{
width:70px;
}

Bouton contenu dans le cadre "formComment", soit le bouton "Publier" du formulaire de saisie de commentaire

#formComment input
{
}

Champ de saisie de texte contenu dans le cadre "formComment", soit la zone où l'on tape son commentaire dans le formulaire de saisie de commentaire

#formComment textarea
{
}

/*-------------------trackback----------------------------------*/

#addTrackback
{
border:1px dotted #999999;
padding:5px;
}

.affTrackback
{
padding:5px;
border:1px dotted #999999;
margin-bottom:10px;
}

.affTrackback h2
{
}

.linkTrackback
{
font-size:130%;
}

.h2Trackback
{
color:#3366CC;
}

/*-------------------Recommander--------------------------------*/

Cadre "divRecommander", soit le cadre contenant le formulaire intitulé "Recommander à un ami" pour qu'il visite votre blog

#divRecommander
{
}

#divRecommander span
{
font-size:larger;
}

#divRecommander legend
{
font-size:larger;
}

#divRecommander fieldset
{
padding:3px;
margin:5px;
}

/*-----------------Newsletter-----------------------------------*/

Titre de niveau 2 contenu dans le cadre "divNewsletter", soit le titre du formulaire d'abonement à la Newsletter

#divNewsletter h2
{
text-align:center;
font-size:12pt;
}

/*-------------- Calendrier -----------------------------------*/

.calendarTop1
{
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
font-style: normal;
color:#FFFFFF;
font-weight: bold;
background-color:#F92E00;
} /*entete*/

.calendarToday1
{
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
font-weight: bold;
color:#FFFFFF;
background-color:#F92E00;
} /* Aujourd'hui */

.calendarDays1
{
width:50px;
height:15px;
font-family:Verdana, Arial, Helvetica;
font-size: 10px;
font-style: normal;
color:#000000;
background-color: #FFFFFF;
text-align:center;
}

.calendarHeader1
{
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
background-color:#F92E00;
color:#FFFFFF;
} /* lettre de la semaine */

.calendarTable1
{
background-color:#F4F4F4;
border:0px solid #5675A4
}/* contour du calendrier */

/*------------------------Divers-----------------------------*/

.cleaner
{
clear:both;
}

/*-------------------------------Accueil album------------------------*/

#centreAccAlbum
{
}

.AccAlbum
{
text-align:center;
}

.thumbAccAlbum
{
display:inline;
margin:5px;
}

.thumbAccAlbumimg
{
padding:5px 0px;
}

/*-----------------------Album photo--------------------------*/

#bodyAlbum
{
background-color:#FFFFFF;
}

.topAlbum
{
}

#generalAbum
{
width:100%;
}

.h2Album
{
text-align:center;
font-size:12pt;
}

/*en tete de l'album placee en haut de la fenetre, meme que celle du blog*/

#enteteAlbum
{
width:100%;
border-bottom:1px solid #222222;
font-size:130%;
}

#enteteAlbum a
{
}

#enteteAlbum a:hover
{
}

.nomPhotoAlbum
{
font-size:large;
}

.lienAlbum
{
text-decoration:none;
}

.lienAlbum:hover
{
text-decoration:underline;
}

/*navigation rapide precedent suivant retour*/

.quickNavAlbum
{margin:0px;
padding:0px;
border:1px groove #666666;
width:100%;
text-align:center;
}

.quickNavAlbum a
{
text-decoration:none;
}

.quickNavAlbum a:hover
{
text-decoration:underline;
}

.precAlbum
{
float:left;
text-decoration:none;
position:relative;
padding:0px;
margin:0px;
}

.retourAlbum
{
position:relative;
text-decoration:none;
padding:0px;
margin:0px auto;
width:6em;
}

.suivAlbum
{
float:right;
text-decoration:none;
position:relative;
padding:0px;
margin:0px;
}

/*miniatures de l'album*/

#centrethumbsAlbum
{
}

.thumbsAlbum
{
padding:2px;
width:99%;
text-align:center;
margin-right:auto;
margin-left:auto;
}

.thumbAlbum
{
display:inline;
margin:3px;
}

.thumbAlbum img
{
}

.thumbCouranteAlbum
{
display:inline;
margin:3 px;
}/*miniature de la photo courante*/

.thumbCouranteAlbum img
{
}

.topLienAlbum
{
text-decoration:none;
}

.topLienAlbum:hover
{
}

#photo
{
text-align:center;
}

#photo img
{
margin: 0px auto;
}

.nomPhotoAlbum
{
text-align:center;
}

#piedAlbum
{
width:100%;
text-align:center;
margin-top:5px;
}

#descrAlbum
{
text-align:center;
font-size:larger;
}

#menuClicDroit
{
position:absolute;
top:0px;
left:0px;
z-index:500;
visibility:hidden;
background-color:#FFFFFF;
border:1px solid #FA3900;
padding:3px;
}

#menuClicDroit li
{
list-style-type:none;
margin:0px;
padding:0px
}

#menuClicDroit ul
{
margin:0px;
padding:0px
}