CSS modèle Vinéen (base 102) [V1]
N.B.: Ce modèle Vinéen (basé sur le modèle 102) n'a pas pour but d'être utilisé tel-quel mais de servir de base pour vous montrer ce que l'on peux rajouter pour une personnalisation poussé.
J'ai aussi rajouté un /* -- détail -- */ ligne par ligne (la ou il n'existait pas).
(Plus tard je décortiquerais un peu plus certaines lignes)
*=*=*=*=*
J'ai aussi rajouté un /* -- détail -- */ ligne par ligne (la ou il n'existait pas).
(Plus tard je décortiquerais un peu plus certaines lignes)
*=*=*=*=*
/*fichier de structure générale externe*/
@import url("http://fdata.over-blog.com/css/commonstruct1.css");/*ne pas enlever cette ligne qui permet l'évolution des css personnalisés*/
/***************************************/
@import url("http://fdata.over-blog.com/css/commonstruct1.css");/*ne pas enlever cette ligne qui permet l'évolution des css personnalisés*/
/***************************************/
/* ------ Elements Principaux ------ */
/* ------ CSS Vinéen By Vger ------ */body { margin:0px; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:small; color:#00000; background-color:#FFFFFF; background-image:url(http://idata.over-blog.com.mon-image.png); background-repeat:repeat; background-position:center; background-attachment:fixed; } /* -- Corp du blog (Style general du blog) -- */
h1 { color:#5675A4; font-size:20px; } /* -- Titre des pages premier niveau -- */
h2 { color:#5675A4; font-size:15px; } /* -- Titre des pages deuxieme niveau -- */
h3 { color:#5675A4; font-size:12px; } /* -- Titre des pages troisieme niveau -- */
a { text-decoration:underline; color:#5675A4; font-size:110%; } /* -- Liens -- */
a:hover { text-decoration:none; color:#9E9E9E; } /* -- Liens sous souris -- */
a:visited { color:#code_couleur; } /* -- Liens après un clic -- */
legend { color:#5675A4; padding-left:5px; padding-right:5px; }
li { list-style-type:none; } /* -- Listes -- */
img { border:0px; } /* -- Images -- */
input { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* -- Bouton (Elements de formulaire) -- */
#email { background:#code_couleur; color:#code_couleur; } /* -- Bouton inscription à la newsletter -- */
#recherche { background:#code_couleur; color:#code_couleur; } /* -- Bouton recherche -- */
/* ------ 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 (une a droite & une a gauche) ---- */
#main1 { text-align: left; margin: 0px auto 50px auto; } /* -- Stucture generale -- */
#main1 #rightnav { padding:10px; width:210px; } /* -- Colonne de droite -- */
#main1 #leftnav { padding:10px; width:210px; } /* -- Colonne de gauche -- */
#main1 #content { padding:10px; border-left:1px solid #B8B8B8; border-right:1px solid #B8B8B8; } /* -- Colonne principale -- */
#main1 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; } /* -- Titre des articles -- */
/* ---- Pour les stuctures avec une colonne à droite ---- */
#main2 { text-align:left; margin:0px auto 50px auto; } /* -- Structure generale -- */
#main2 #rightnav { padding:10px; width:220px; } /* -- Colonne de droite -- */
#main2 #content { padding:10px; border-left:1px solid #B8B8B8; border-right:1px solid #B8B8B8; } /* -- Colonne principale -- */
#main2 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; } /* -- Titre des articles -- */
/* ---- Pour les stuctures avec une colonne à gauche ---- */
#main3 { text-align:left; margin:0px auto 50px auto; } /* -- Structure generale -- */
#main3 #leftnav { padding:10px; width:220px; } /* -- Colonne de droite -- */
#main3 #content { padding:10px; border-left:1px solid #B8B8B8; border-right:1px solid #B8B8B8; } /* -- Colonne principale -- */
#main3 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; } /* -- Titre des articles -- */
#MainTab { margin:0px; width:100%; } /* -- Mise en forme -- */
#MainTab td { vertical-align:top; } /* -- Propriété de la mise en forme -- */
/* ------ Entete ------ */
#top { padding:0px; border-bottom: 1px solid gray; color:#code_couleur; background: url(http://fdata.over-blog.com/modele/2/pics/top.png) repeat-x scroll top left; } /* -- Fond du titre du blog (l'entete) -- */
#top a { Les_paramètres_que_vous_voulez_utiliser; }
#top a:hover { Les_paramètres_que_vous_voulez_utiliser; }
#top a:visited { Les_paramètres_que_vous_voulez_utiliser; }
#top p { } /* -- Paragraphe de l'entete -- */
#top h1 { padding:0px; margin:0px; color:black; } /* -- Titre du blog -- */
.topLien{ text-decoration:none; color:#code_couleur; } /* -- Lien du blog vers l'accueil du blog -- */
.topLien:hover { text-decoration:none; } /* -- Lien du blog vers l'accueil sous souris -- */
/* ------ Bas de page ------ */
#footer { clear:both; color: #333; border-top: 1px solid gray; border-bottom: 1px solid gray; } /* -- Pied de page du blog -- */
#footer a { text-decoration:underline; color:code_couleur; font-size:110%; } /* -- Liens (dans bas de page) -- */
#footer a:hover { text-decoration:none; color:#code_couleur} /* -- Liens sous souris --*/
#footer a:visited { text-decoration:underline; color:code_couleur; font-size:110%; } /* -- Liens apres clic -- */
#footer p { margin:0px; padding: 10px; background:#ddd; } /* -- Paragraphe du pied de page -- */
.basLien { } /* -- (non utilise ?) -- */
.basLien:hover { } /* -- (non utilise ?) -- */
.cleaner {clear:both;} /* -- Mise en forme -- */
/* ------ Colonnes ------ */
#rightnav { } /* -- Colonne de droite -- */
#leftnav { } /* -- Colonne de gauche -- */
/* ------ Box ------ */
/* ---- correspond au block des modules ---- */
/* -- Defini le style des modules -- */
.box { width:100%; margin-bottom:10px; } /* -- Stucture generale -- */
.box a { color:#code_couleur; } /*-- Liens dans modules -- */
.box a:hover { color:#code_couleur; } /*-- Liens dans modules sous souris -- */
.box a:visited { color:#code_couleur; } /*-- Liens dans modules apres clic -- */
.box h2 { } /* -- Titre des modules -- */
.box-top { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-top-center.png) repeat-x scroll top left; } /* -- Cadre module haut-milieu -- */
.box-left { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-middle-left.png) repeat-y scroll top left; } /* -- Cadre module milieu-gauche -- */
.box-right { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-middle-right.png) repeat-y scroll top right; } /* -- Cadre module milieu-droit -- */
.box-bottom { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-bottom-center.png) repeat-x scroll bottom left; } /* -- Cadre module bas-milieu -- */
.box-topLeft { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-top-left.png) no-repeat scroll top left; } /* -- Cadre module haut-gauche -- */
.box-topRight { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-top-right.png) no-repeat scroll top right; } /* -- Cadre module haut-droite -- */
.box-bottomLeft { background:transparent url(http://fdata.over-blog.com/modele/2/pics/box-bottom-left.png) no-repeat scroll bottom left; } /* -- Cadre module bas-gauche -- */
.box-bottomRight { background:url(http://fdata.over-blog.com/modele/2/pics/box-bottom-right.png) no-repeat scroll bottom right; padding:3px; } /* -- Cadre module bas-droite -- */
.box-content { overflow:auto; padding:0px 10px 15px 5px; color: #5675A4; } /* -- Contenu du module -- */
.box-content p { margin:5px 0px 5px 15px; padding:0px; color:#code_couleur; } /* -- Paragraphe -- */
.box-content ul { margin:5px 0px 5px 15px; padding:0px; } /* -- Liste -- */
.box-content li { list-style:square; color:#b6b6b6; margin:5px; padding:0px; } /* -- Puces -- */
/* ------ Box/Modules ------ */
#ArticleRecent { } /* -- Module Articles récent -- *
#Categorie { } /* -- Module Categories -- */
#Lien { } /* -- Module Liens -- */
#Archive { } /* -- Module Archives -- */
#CommentRecent { } /* -- Module Commentaires -- */
#Recherche { padding:0px; } /* -- Module Recherche -- */
#Newsletter { } /* -- Module News Letter (lettre d'information) -- */
#LeftPart { } /* -- Module Texte libre (module gauche) -- */
#RightPart { } /* -- Module Texte libre (module droit) -- */
#Concour { } /* -- Module Concour - Parrainage -- */
#Calendrier { } /* -- Module Calendrier -- */
#Recommand { } /* -- Module Recommander -- */
#W3C { } /* -- Module W3C -- */
/* ------ Recherche ------ */
#WForm { margin:0px; border:solid 1px #D8D7D7; padding:10px; background: #F3F7FC; }
#WForm input { border:solid 1px #D8D7D7; font-size:100%; background:#f4f4f4; color:#5675A4; }
#WForm input:hover { border:solid 1px #5675A4; background:#fff; }
.RNum { font-weight:bold; } /* -- Numero du resultat -- */
.RDesc { padding:10px; } /* -- Resume du resultat (Premieres lignes de l'article) -- */
.ROut { font-style:italic; color:#A0B8CB; } /* -- Domaine auquel appartient le resultat -- */
.RSize { color:#BFBFBF; }
a.RTitle { text-decoration:none; color:#00275E; } /* -- Titre du resultat -- */
a.RTitle:hover { text-decoration:none; color:#834141; } /* -- Titre du resultat sous souris -- */
#GGResults { text-align:left; margin:0px; color:#000000; } /* -- Nombre de resultats de la recherche -- */
.Result1 { padding:4px; background:#F7FAFD; } /* -- Resultat style 1 -- */
.Result2 { padding:4px; background:#FBFBFB; } /* -- Resultat style 1 -- */
/* ------ Articles ------ */
.article { margin-top:10px; padding:0px; border-bottom:1px dotted #808080; } /* -- Style general d'un article (entete texte et pied de page) -- */
.article h1 { Les_paramètres_que_vous_voulez_utiliser; }
.article h2 { Les_paramètres_que_vous_voulez_utiliser; }
.article p { padding:0px 0px 5px 5px; margin:0px; } /* -- Tous les paragraphes d'un article -- */
.Date { width:100%; margin-right:10px; } /* -- Style de la date affichee dans l'entete de l'article -- */
.Option { padding:5px 0px 0px 0px; margin:5px 0px 5px 0px; border-top:1px dotted #808080; width:100%; text-align:right; font-size:85%; color:#code_couleur; } /* -- Style du pied de l'article (Publie par... - Categorie - Commentaire - Recommander) -- */
.categorieArticle { } /* -- Categorie de l'article -- */
.categorieArticle a { text-transform:lowercase; } /* -- Categorie de l'article (couleur du lien) -- */
.categorieArticle a:hover { } /* -- Categorie de l'article (couleur du lien sous souris) -- */
.categorieArticle a:visited { } /* -- Categorie de l'article (couleur di lien apres clic) -- */
.barreHautArticle { padding:0px 0px 5px 0px; margin-bottom:4px; border-bottom:1px solid #808080; width:100%; } /* -- Entete de l'article qui contient la date -- */
.titreArticle{ text-decoration:none; } /* -- Lien sur le titre de l'article -- */
.titreArticle:hover { text-decoration:none; } /* -- Lien sous souris sur le titre de l'article -- */
.titreArticle:visite { } /* -- Lien sur le titre de l'article apres clic -- */
.contenuArticle { } /* -- Style du texte d'un article --*/
.contenuArticle a { color:#code_couleur; } /* -- Liens articles -- */
.contenuArticle a:hover { color:#code_couleur; } /* -- Liens articles sous souri -- */
.contenuArticle a:visited { color:#code_couleur; } /* -- Liens articles apres clic -- */
/* ---- Liste des articles ---- */
.listArticles { margin-top:0px; margin-bottom:10px; border:1px solid #666666; background-color:#FFFFFF; } /* -- Style d'un article -- */
.resumeArticle { background-color:#F9F8FA; border-top:1px solid #F4F4F4; } /* -- Style du resume d'un article -- */
/* ---- Pagination ---- */
.pagination { font-size:small; } /* -- Numérotation pages dans liste complete -- */
.pagination a { color:#code_couleur; } /* -- Numérotation pages dans liste complete -- */
.pagination a:hover { color:#code_couleur; } /* -- Numérotation pages dans liste complete sous souris -- */
.pagination a:visited { color:#code_couleur; } /* -- Numérotation pages dans liste complete apres clic -- */
.pagination b { } /* -- Page courante -- */
/* ---- Style par articles ---- */
#articleAccueil { background-image:url(http://data.over-blog.com.mon-image.png); background-repeat:repeat; background-position:center; } /* -- Article d'accueil -- */
#article1 { Les_paramètres_que_vous_voulez_utiliser; } /* -- Premier article -- */
#article2 { Les_paramètres_que_vous_voulez_utiliser; } /* -- Deuxieme article -- */
/* -- (Rem.: Vous pouvez aller jusqu'à 10) -- */
#articleSeul {} /* -- Style d'un article lors de l'affichage de l'article ou de ses commentaires/trackbacks -- */
/* ------ Commentaires ------ */
#Comment { } /* -- non utilise ? -- */
.h2commentMessage { color:#3366CC; }
.comment { }
.comment hr { }
.linkcomment { font-size:130%; color:#0099FF; } /* -- Lien d'ajout d'un commentaire -- */
.commentMessage { padding:5px; border:1px dotted #999999;background:#F8F8F8; margin:0px; } /* -- Texte d'un commentaire -- */
.commentOption { text-align:right;font-size:85%;color:#808080; margin-bottom:10px; } /* -- Infos sur le commentaire (Auteur - Site, ...) -- */
/* ---- Formulaire de saisie d'un commentaire ---- */
#formComment p { color:#code_couleur; } /* -- Couleur dans cases (Nom, Adresse,..) -- */
#formComment label { width:70px; } /* -- Texte associé aux champs de sasies -- */
#formComment input { } /* -- Boutons, champs texte -- */
#formComment textarea { } /* -- Zone de saisie de texte -- */
/* ------ Trackback ------ */
#addTrackback { border:1px dotted #999999; padding:5px; } /* -- Cadre donnant l'adresse de trackback -- */
.affTrackback { padding:5px; border:1px dotted #999999; margin-bottom:10px; }
.affTrackback h2 { }
.linkTrackback {font-size:130%; }
.h2Trackback {color:#3366CC; }
#addTrackback, .h2Trackback, .linkTrackback { display:none; } /* -- Empeche trackback -- */
/* ---- Fenetre d'ajout d'un trackback ---- */
#divTrackBack { } /* -- Style general -- */
#divTrackBack input { background-color:transparent; border:1px solid #000000; } /* -- Champs de texte bouton -- */
#divTrackBack textarea { background-color:transparent; border:1px solid #000000; } /* -- Zone de saisie de texte -- */
/* ------ Fenetre recommander ------ */
#divRecommander { } /* -- Style general -- */
#divRecommander span { font-size:larger; }
#divRecommander legend { font-size:larger; } /* -- Texte du cadre -- */
#divRecommander fieldset { padding:3px; margin:5px; } /* -- Conteneur des champs -- */
#divRecommander input { background-color:transparent; border:1px solid #000000; } /* -- Champs de texte bouton -- */
#divRecommander textarea { background-color:transparent; border:1px solid #000000; } /* -- Zone de saisie de texte -- */
/* ------ Newsletter ------ */
#divNewsletter h2 { text-align:center; font-size:12pt; } /* -- Titre de la page -- */
#divNewsletter input { background-color:transparent; border:1px solid #000000; } /* -- Champs de texte checkbox -- */
#divNewsletter .newsletter { } /* -- Texte des checbox -- */
/* ------ Calendrier ------ */
.calendarTop1 { font-family:Verdana, Arial, Helvetica; font-size:10px; font-style:normal; color:#5675A4; font-weight: bold; background-color:#FFFFFF; } /* -- Entete -- */
.calendarToday1 { font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; color:#FFFFFF; background-color:#A2B4CE; } /* -- 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:#5675A4; color:#FFFFFF; } /* -- Lettre de la semaine -- */
.calendarTable1 { background-color:#F4F4F4;border:0px solid #5675A4; } /* -- Contour du calendrier -- */
/* ------ Divers ------ */
.cleaner {clear:both;} /* -- Mise en forme -- */
/* ------ Accueil album ------ */
#centreAccAlbum { } /* -- Contient les thumbnails de l'accueil de l'album (non utilise) -- */
.AccAlbum { text-align:center; } /* -- Contient les thumbnails de l'accueil de l'album -- */
.thumbAccAlbum { display:inline; margin:5px; } /* -- Div contenant une miniature -- */
.thumbAccAlbumimg { padding:5px 0px; } /* -- Miniature -- */
/* ------ Album photo (Elements commun a l'accueil et aux pages d'un album) ------ */
#bodyAlbum { background-color:#FFFFFF; background-image:url(http://idata.over-blog.com.mon-image.png); } /* -- Style general de la page de l'album -- */
#generalAbum { width:100%; } /* -- Div contenant tout l'album peut etre utilise à la place de bodyAlbum -- */
.topAlbum { } /* -- Entete de l'album contient l'entete du blog -- */
.h2Album { text-align:center; font-size:12pt; } /* -- Titre de l'album/la photo -- */
.lienAlbum { text-decoration:none;}
.lienAlbum:hover { text-decoration:underline; }
.topLienAlbum { text-decoration:none; } /* -- Lien vers un album -- */
.topLienAlbum:hover { } /* -- Lien vers un album sous souris -- */
.topLienAlbum:visited { } /* -- Lien vers un album apres clic -- */
/* ----Album photo ---- */
.nomPhotoAlbum { text-align:center; font-size:large; } /* -- Nom de la photo affichée -- */
/* ---- Navigation rapide precedent suivant retour ---- */
.quickNavAlbum { margin:0px; padding:0px; border:1px groove #666666; width:100%; text-align:center ; } /* -- Liens de navigation rapide (precedent suivant retour) -- */
.quickNavAlbum a { text-decoration:none; } /* -- Liens de la navigation rapide -- */
.quickNavAlbum a:hover { text-decoration:underline; } /* -- Liens sous souris de la navigation rapide -- */
.precAlbum { float:left; text-decoration:none; position:relative; padding:0px; margin:0px; } /* -- Liens et titre photo precedente -- */
.retourAlbum { position:relative; text-decoration:none; padding:0px; margin:0px auto; width:6em; } /* -- Liens de retour album photo -- */
.suivAlbum { float:right; text-decoration:none; position:relative; padding:0px; margin:0px; } /* -- Liens et titre photo suivante -- */
/* ---- Miniatures de l'album ---- */
#centrethumbsAlbum { } /* -- Contient les miniatures de l'accueil de l'album (non utilise) -- */
.thumbsAlbum {padding:2px; width:550px; margin-right:auto; margin-left:auto; } /* -- Miniatures de l'album contient toutes les miniatures -- */
.thumbAlbum { display:inline; margin:3px; } /* -- Div contenant une miniature -- */
.thumbAlbum img { } /* -- Miniature -- */
/* ---- Miniature de la photo courante ---- */
.thumbCouranteAlbum { display:inline; margin:3 px;} /* -- Div miniature de la photo courante -- */
.thumbCouranteAlbum img { } /* -- Miniature de la photo courante -- */
#photo{ text-align:center; } /* -- Div contenant la photo courante -- */
#photo img {margin: 0px auto; } /* -- Photo courante -- */
/* ---- Entete de l'album placee en haut de la fenetre, comune à celle du blog ---- */
#enteteAlbum { width:100%; border-bottom:1px solid #222222; font-size:130%; } /* -- Ligne sous l'entete du blog contient les liens vers les albums -- */
#enteteAlbum a { } /* -- Liens vers les albums -- */
#enteteAlbum a:hover { } /* -- Liens vers les albums sous souris -- */
#enteteAlbum a:visited { } /* -- Liens vers les albums apres clic -- */
/* ---- Pied de page de l'album ---- */
#piedAlbum { width:100%; text-align:center; margin-top:5px; } /* -- Pied de page de l'album -- */