CSS modèle Vinéen (base 102) [V1]

Publié le par Vger

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)
 

*=*=*=*=*

/*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*/
/***************************************/
/* ------ 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 -- */

Publié dans Poubelle

Commenter cet article

Lyra 03/10/2006 01:51

Ton article est super ! ca m'a beaucoup aidé pour modifier ma CSS alors que je n'y connaissais pas grand chose.Merci =)

ste 24/04/2006 17:59

SalutCompliment pour ton travailDommage qu'on ne voit nul part la réalité de tes designs ... une image au moins ... ou des sites qui les ont installer et utiliser.Ste

Vger 03/05/2006 20:47

Pour certain je sais ou ils se trouvent mais pas tous.... en fait il y a un blog de prévu pour mettre des CSS complet avec des "impression d'écran" pour montrer ce à quoi cela ressemble (mais j'avoue être très pris ces derniers temps ^lo^)Merci pour ton com