Vinéa Transparent - Noir

Vinéa Transparent - Noir

Attention :

Ceci est un CSS qui joue avec la transparence.
Il est prévu pour recevoir VOTRE fond - background.
Il est "livré" SANS le fond qui illustre ci-dessous le design.

Pour l'utiliser vous devez suivre les instructions détaillées ici

Ensuite, vous devrez corriger une SEULE partie d'une SEULE ligne, l'emplacement est clairement indiqué par "ICI_L'URL_DE_VOTRE_IMAGE_DE_FOND" que vous remplacez par l'url (l'adresse) de l'image que vous désirez avoir comme fond de blog.

Tant que vous ne corrigez pas correctement la ligne, le fond du blog restera noir !

Pour votre image de fond, vous devez absolument éviter la présence de la couleur blanche et/ou trop claire, sinon vos textes (blanc) seront indéchiffrable à l'emplacement de la partie blanche de votre image et ce malgré "le filtre".





/* ----- Les styles ci-dessous affectent l'ensemble des éléments de la page n'ayant pas de style propre ou hérité ---- */

/*************************************/
/* --- Votre image de fond --------- */
/*************************************/

/* -- Votre image de fond -- */

body, #menuClicDroit, #divNewsletter, #divRecommander, #divTrackBack {
    background-image: url(ICI_L'URL_DE_VOTRE_IMAGE_DE_FOND);
    }

/*=========================================*/
/* ------ CSS de base : Minimaliste ------ */
/* ------ CSS Made In Vinéa by Vger ------ */
/* -------- Vinéa Transparent Noir ------- */
/* ----- http://design.over-blog.fr/ ----- */
/* - Compatible publicités format "Pavé" - */
/*=========================================*/

/*************************************/
/* ----------- Structure ----------- */
/*************************************/


/* --- Largeur totale du blog --- */
#global {
    padding: 0px;
    margin: 0px auto;
    width: 950px;
    }
.ln {
    clear: both;
    }
#ln_1 {
    }
body, html {
    padding: 0px;
    margin: 0px;
    }

/* --- Modèle - Structure --- */

/*=========================================*/
/* ---- 1 colonne principale (à gauche)--- */
/* ----- 1 colonne modules (à droite) ---- */
/* - Compatible publicités format "Pavé" - */
/*=========================================*/

.cl {
    float: left;
    }

/* -- Entête -- */
#cl_0_0 {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    width: 100%;
    }

/* -- Colonne principale (Articles) -- */
#cl_1_0    {
    margin: 0px 10px 0px 0px;
    width: 625px;
    padding: 5px;
    }

/* -- Colonne droite (Modules) -- */
#cl_1_1    {
    text-align: center;
    margin: auto 0px;
    width: 300px;
    float: right;
    }

/* -- Pied de page -- */
#cl_2_0 {
    width: 100%;
    margin:15px 0px 0px 0px;
    }

/* -- Structure modules -- */
.box {
     width: 100%;
    overflow: hidden;
    }

/* -- Structure album photos ("Centrage") -- */
#general #cl_1_0 {
    width: 100%;
    text-align: center;
    }
.clear {
    clear: both;
    }

/*************************************/
/* ------ Éléments Principaux ------ */
/*************************************/

/* -- Corps du blog (Style général du blog) -- */
body {
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFF;
    background-color: #000;
     font-size: small;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    }

/* -- Titre des pages premier niveau -- */
h1 {
    color: #FFF;
    font-size: 20px;
    }

/* -- Titre des pages deuxième niveau -- */
h2 {
    color: #FFF;
    font-size: 15px;
    }

/* -- Titre des pages troisième niveau -- */
h3 {
    color: #FFF;
    font-size: 12px;
    }

/* -- Liens -- */
a {
    text-decoration: underline;
    color: #FFF;
    font-size: 110%;
    }


/* -- Liens sous souris -- */
a:hover {
    text-decoration: none;
    color: #FFF;
    }

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

/* -- Listes -- */
li {
    list-style-type: none;
    }

/* -- Images -- */
img {
    border: 0px none;
    }

/* -- Bouton (Éléments de formulaire) -- */
input {
    border: solid 1px #000;
    font-size: 100%;
    background-color: #FFF;
    color: #000;
    }

/* -- Bouton inscription à la newsletter -- */
#email {
    }

/* -- Bouton recherche -- */
#recherche {
    }

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

/* ---- Correspond au block des modules ---- */
/* -- Défini le style des modules -- */

/* -- Structure générale des modules-- */

.box {
    background-color: transparent;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    border: 0px none;
    position: relative;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
    }

/*-- Liens dans modules -- */
.box a {
    color: #FFF;
    text-decoration: underline;
    margin: 1px;
    padding: 1px;
    }

/*-- Liens dans modules sous souris -- */
.box a:hover {
    color: #FFF;
    text-decoration: none;
    background-image: none;
    }

/* -- Titre des modules -- */
.box h2 {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    color: #FFF;
    font-size: 14px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 2px;
    padding: 7px;
    }

/* -- Lien sur le titre des modules -- */
.box-titre {
    position: relative;
    padding: 0px;
    text-align: center;
    }

/* -- Contenu du module -- */
.box-content {
    overflow: auto;
    padding: 2px 5px;
    color: #FFF;
    }

/* -- Paragraphe -- */
.box-content p {
    margin: 5px 0px 5px 15px;
    padding: 0px;
    color: #FFF;
    }

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

/* -- Puces -- */
.box-content li {
    list-style: none;
    color: #FFF;
    margin: 5px;
    padding: 0px;
    }

.noListStyle {
    list-style: none !important;
    }

/* -- Bas du module -- */
.box-footer {
    display: none;
    }

.listAll {
    text-align: right;
    padding: 0px 5px 0px 20px;
    display: block;
    }

/*********************/
/* ---- Entête ----- */
/*********************/

/* -- Structure entête -- */
#cl_0_0 {
    border: 1px solid #CCC;
    margin: 0px;
    }
#ln_0 {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);    
    text-align: center;
    border: 1px solid #666;
    margin-bottom: 5px;
    padding: 2px 4px 2px 2px;
    }

/* -- Fond du titre du blog (l'entête) -- */
#top {
    padding: 5px 0px;
    color: #FFF;
    width: 100%;
    margin: 0px;
    border: 0px none;
    }

/* -- Titre du blog -- */
#top h1 {
    padding: 0px;
    margin: 0px;
    color: #FFF;
    }

/* -- Lien sur le titre -- */
#top .box-titre {
    display: none;
    }
#top .box-content {
    padding: 0px;
    color: #FFF;
    }
#top .box-content p {
    margin: auto;
    }
#top .box-content ul {
    margin: auto;
    }
#top .box-content li {
    color: #FFF;
    margin: auto;
    }
#top .box-footer {
    display: none;
    }

/* -- Lien du blog vers l'accueil du blog -- */
.topLien {
    text-decoration: none;
    color: #FFF;
    }
.topLien:hover {
    text-decoration: none;
    color: #FFF;
    }

/**************************/
/* ---- Bas de page ----- */
/**************************/

/* -- Structure bas de page -- */
#ln_2 {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    border: 0px;
    border-top: 1px solid #000;
    margin-top: 10px;
    padding: 0px 0px 8px 0px;
    }

/* -- Pied de page du blog -- */
#footer {
    color: #FFF;
    border: 0px none;
    text-align: center;
    font-size: 16px;
    }

/* -- Paragraphe du pied de page -- */
#footer p {
    margin: 0px;
    padding: 10px;
    }
#footer .box-titre {
    display: none;
    }
#footer .box-content {
    padding: 0px;
    margin: 0px;
    }
#footer .box-content p {
    margin: auto;
    }
#footer .box-content ul {
    margin: auto;
    }
#footer .box-content li {
    color: inherit;
    margin: auto;
    }
#footer .box-footer {
    display: none;
    }
.basLien {
    text-decoration: none;
    }
.basLien:hover {
    text-decoration: none;
    }


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

/* -- Style général d'un article (entête texte et pied de page) -- */
.article {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 15px;
    }

/* -- Liens Articles -- */
.article a {
    color: #FFF;
    }

.article a:hover {
    color: #FFF;
    }

/* -- Tous les paragraphes d'un article -- */
.article p {
    padding: 0px 0px 5px 5px;
    margin: 0px;
    }

/* -- Style du texte d'un article --*/
.contenuArticle {
    margin: 1px 1px 10px 15px;
    }

/* -- Style de la date affichée dans l'entête de l'article -- */
.date {
    margin-right: 10px;
    }

/* -- Après article -- */
.afterArticle {
    padding: 3px 0px;
    border-top: 0px;
    width: 100%;
    text-align: right;
    font-size: 90%;
    color: #FFF;
    }

/* -- Avant article -- */
.beforeArticle {
    padding: 0px 0px 5px 0px;
    margin: 0px;
    width: 100%;
    color: #FFF;
    }

/* -- Catégorie de l'article -- */
.categorieArticle {
    }

/* -- Catégorie de l'article (couleur du lien) -- */
.categorieArticle a {
    text-transform: lowercase;
    }

/* -- Catégorie de l'article (couleur du lien sous souris) -- */
.categorieArticle a:hover {
    text-transform: lowercase;
    }

/* -- Lien sur le titre de l'article -- */
.titreArticle {
    text-decoration: none;
    color: #FFF;
    }

/* -- Liens titre d'articles sous souris -- */
.titreArticle:hover {
    text-decoration: underline;
    color: #FFF;
    }
#articleSeul {
    }
.GcheTexte {
    float: left;
    margin: 3px;
    }
.DrteTexte {
    float: right;
    margin: 3px;
    }
.CtreTexte {
    margin: 3px auto;
    display: block;
    }
.hitcitation {
    font-style: italic;
    text-align: justify;
    padding: 5px 20px;
    background-color: #FFF;
    }
.hitencart {
    border: 1px solid #000;
    text-align: justify;
    font-weight: bold;
    margin: 5px 0px;
    padding: 5px 5px;
    }
.hitimportant {
    font-weight: bold;
    color: red;
    font-weight: bold;
    font-size: 120%;
    }
.hitperso1 {
    font-style: italic;
    }
.hitperso2 {
    font-weight: bold;
    }


/*----- Liste des articles ---- */

/* -- Style d'un article -- */
.listArticles {
    margin: 5px 5px 10px 10px;
    border: 0px none;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }

/* -- Style du résumé d'un article -- */
.resumeArticle {
    margin: 10px 8px 10px 10px;
    }

/* ---- Commentaires ----- */
.h2commentMessage {
    color: #FFF;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }
.afterReactions .linkAddComment {
    font-size: 130%;
    color: #FFF;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }
.commentMessage {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    padding: 5px;
    border: 0px;
    margin: 0px;
    }
.commentOption {
    text-align: right;
    font-size: 90%;
    color: #FFF;
    margin-bottom: 10px;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }

/* ---- Réponse commentaires ----- */
.reponseMessage {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    color: #FFF;
    text-align: left;
    background-color: transparent;
    }

/* ---- Formulaire de saisie d'un commentaire ----- */
#formComment {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    background-color: transparent;
    }

/* ---- Confirmation d'ajout d'un commentaire ----- */
#formComment .ok {
    color: #FFF;
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }

/* -- Texte associé aux champs de saisies -- */
#formComment label {
    width: 70px;
    }

/* -- Boutons, champs texte -- */
#formComment input {
    background-color: #FFF;
    border: 1px solid #000;
    }

/* -- Zone de saisie de texte -- */
#formComment textarea {
    background-color: #FFF;
    border: 1px solid #000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: small;
    }

/************************/
/* ----- Communauté --- */
/************************/

/*----- Liste des communautés ---- */


/*-- Titre Liste des communautés -- */
.community_list paddedForSpacing, .community_information {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }

/*-- Texte Liste des communautés -- */
.community_description {
    background-color: transparent;
    }

/************************/
/* ----- Trackback ---- */
/************************/

/* -- Cadre donnant l'adresse de trackback -- */
#addTrackback {
    border: 1px solid #000;
    padding: 5px;
    color: #FFF;
    }
.affTrackback {
    padding: 5px;
    border: 1px solid #000;
    margin-bottom: 10px;
    }
.affTrackback h2 {
    color: #FFF;
    }
.afterReactions .linkAddTrackback {
    font-size: 130%;
    color: #58A;
    }
.h2Trackback {color:#FFF;}

/* ---- fenêtre d'ajout d'un trackback ----- */

/* -- Style général -- */
#divTrackBack {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    background-color: transparent;
    }

/* -- Champs de texte bouton -- */
#divTrackBack input {
    background-color: #FFF;
    border: 1px solid #000;
    }

/* -- Zone de saisie de texte -- */
#divTrackBack textarea {
    background-color: #FFF;
    border: 1px solid #000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: small;
    }

/* -- Texte de confirmation -- */
#divTrackBack .ok {
    color: #FFF;
    }

/****************************************/
/* ---- Fenêtre de recommandation ----- */
/****************************************/

/* -- Style général -- */
#divRecommander {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    background-color: transparent;
    }
#divRecommander span {
    font-size: larger;
    color: #FFF;
    }

/* -- Texte du cadre -- *
#divRecommander legend {
    font-size: larger;
    color: #000;
    }

/* -- Conteneur des champs -- */
#divRecommander fieldset {
    padding: 3px;
    margin: 5px;
    background-color: #FFF;
    }

/* -- Champs de texte bouton -- */
#divRecommander input {
    background-color: #FFF;
    border: 1px solid #000;
    }

/* -- Zone de saisie de texte -- */
#divRecommander textarea {
    background-color: #FFF;
    border: 1px solid #000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: small;
    }

/* -- Texte de confirmation d'envois -- */
#divRecommander .ok{
    color: #FFF;
    }

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

/* -- Style général -- */
#divNewsletter {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    }

/* -- Titre de la page -- */
#divNewsletter h2 {
    text-align: center;
    font-size: 12pt;
    }

/* -- Champs de texte checkbox -- */
#divNewsletter input {
    background-color : #FFF;
    border: 1px solid #000;
    }

/* -- Texte des checbox -- */
#divNewsletter .newsletter {
    }

/* -- Texte légal -- */
#divNewsletter .legalNotice {
    color: #FFF;
    }

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

/* -- Entete -- */
.calendarTop1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
    font-style: normal;
    color: #FFF;
    font-weight: bold;
    background-color: transparent;
    }

/* -- Aujourd'hui -- */
.calendarToday1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
    font-weight: bold;
    color: #000;
    }
.calendarDays1 {
    width: 50px;
    height: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #FFF;
    text-align: center;
    }

/* -- Lettre de la semaine -- */
.calendarHeader1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFF;
    }

/* -- Contour du calendrier -- */
.calendarTable1 {
    border: 0px none;
    }

/************************/
/* ---- Pagination ---- */
/************************/

/* -- Numérotation pages dans liste complète -- */
.pagination {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    color: #FFF;
    }

/* -- Numérotation pages dans liste complète -- *
.pagination a {
    }

/* -- Page courante -- */
.pagination b {
    }

/* -- Pagination avant article -- */
.before_articles .pagination {
    margin: 30px 0px;
    }

/* -- Pagination après article -- */
.after_articles .pagination {
    margin-bottom: 30px;
    }

/************************/
/* ---- Clic droit ---- */
/************************/

#menuClicDroit {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    visibility: hidden;
    border: 1px solid #000;
    padding: 3px;
    }
#menuClicDroit li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
#menuClicDroit ul {
    margin: 0px;
    padding: 0px;
    }
#menuClicDroit span {
    display: block;
    margin-top: 5px;
    margin-bottom: 1px;
    }

.w100prct {
    width: 100%;
    }
.w20prct {
    width: 20%;
    }
.w80prct {
    width: 80%;
    }

/********************/
/* ---- Pages ----- */
/********************/

/* -- Structure générale des pages -- */
.page {
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 15px;
    }

/* -- Tous les paragraphes d'une page -- */
.page p {
    padding: 0px 0px 5px 5px ;
    margin: 0px;
    }

/* -- Contenu d'une page -- */
.pageContent {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    margin: 1px;
    }
.afterPage {
    padding: 3px 0px;
    border-top: 1px solid #000;
    width: 100%;
    text-align: right;
    font-size: 90%;
    color: #FFF;
    }
.beforePage {
    padding: 0px 0px 5px 0px;
    margin: 0px;
    width: 100%;
    color: #FFF;
    }
.divPageTitle h2 {
    background-image: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif);
    text-decoration: none;
    color: #FFF;
    }
.divPageTitle h2:hover {
    text-decoration: underline;
    color: #FFF;
    }

body #legals {
    background: url(http://idata.over-blog.com/1/00/41/57/Design/OpacityVinea01.gif) !important;
    color: #FFF !important;
    }

/* -- Fin du CSS --- */