Présentation

design-css

Pseudo: AlexCatégorie: WebmasterDescription:
Différents codes pour modifier sa css
Fais tourner ce blog!

Commentaires

Aucun article disponible
Mardi 09 Janvier 2007
Premier design css complet mis à disposition, celui du blog Dipoun. Largeur de 100% avec 2 colones et une image en haut...

Faites un copier / coller à la place du code css déjà présent, que vous aurez bien sur préalablement sauvegardé sur votre disque (dans wordpad ou bloc note par exemple).

Changez ensuite les images par les vôtres (l'image du haut est dans /* ------------------entete ---------------------*/ ), les couleurs...

Le code :

/*fichier de structure général externe*/
@import url("/css/commonstruct2.css");/*ne pas enlever cette ligne qui permet l'evolution des css personnalisés*/
/***************************************/
/*---------------- elements principaux ---------------*/
/*---------------- les styles ci-dessous affectes l'ensemble des éléments de la page n'ayant pas de style propre ou hérité --------------*/
body {margin:0px; padding:0px; background-color:#DED2B1; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
h1 {color: #682B01; font-size: 20px;}
/*titre des pages*/
h2 {color: #682B01; font-size: 15px;}
h3 {color: #682B01; font-size: 12px;}
a {text-decoration:underline; color:#7D7D55; font-size:110%;}
/* liens des pages */
a:hover {text-decoration:none; color:#682B01}
/* liens survoles*/
legend {color:#000000; padding-left:5px; padding-right:5px;}
li {list-style-type:none;}
/*listes non ordonnees*/
img {border:0px none;}
/* images */
input {border:solid 1px #DED2B1; font-size:100%; background-color:#FFFFFF; color:#000000;}
/* boutons, champs texte */
/* --------------- Structure -------------------- */
/* les styles ci dessous definissent l'aspect du blog quelque soit la structure (2-3 colonnes...)*/
#centrePage {width:100%;}
/*div contenant la page sert à centrer le blog*/
#global {margin-left:auto; background-color:#FFFFFF; margin-right:auto; position:relative; border:1px solid #682B01;}
/*colonne principale, contient toutes les colonnes du blog*/
#main {margin-bottom:5px;}
/*colonne principale contenant les articles*/
#content {overflow:hidden; margin:0px;}
/*contenu de la colonne main*/
#rightnav {background-color:#DED2B1;}
/*colonne de droite*/
#leftnav {background-color:#DED2B1;}
/*colonne de gauche*/
/********************************************************************************************************/
/*                GESTION DU POSITIONNEMENT SELON LES DIFFERENTES STRUCTURES                            */
/*------------------------------------------------------------------------------------------------------*/
/*/
! Attention la modification des informations ci-dessous peut entrainer la déformation de votre blog */
/********************************************************************************************************/
#global {width:100%;}
/*definie la taille du blog*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à droite~~~~~~~~~~*/
#deuxColDroite #main {position:relative; float:left; overflow:hidden; width:595px;}
/*colonne principale*/
#deuxColDroite #rightnav {position:relative; float:right; margin-bottom:5px; width:195px;}
/*colonne de droite*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#deuxColGauche #main {position:relative; float:right; overflow:hidden; width:595px;}
/*colonne principale*/
#deuxColGauche #leftnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de gauche*/
/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:left; overflow:hidden; width:50%; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:right; margin-bottom:5px; width:25%;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:left; margin-bottom:5px; width:20%;}
/*colonne de gauche*/
/**************************************************************************************************************/
/* ------------------- Box -------------------- */
/*definie le style des modules*/
.box {background-color:transparent; position:relative; margin:0px; padding:0px; margin-bottom:10px;}
.box h2 {color:#682B01; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px;}
/*titre de la boite*/
.box-titre {position:relative; padding:0px; text-align:center;}
/*div contenant le titre*/
.box-content {overflow:auto; padding:2px 5px; color:#C49755;}
/*contenu du module*/
.box-content p {margin:5px 0px 5px 15px; padding:0px;}
/*paragraphe*/
.box-content ul {margin:5px 0px 5px 15px; padding:0px;}
/*liste*/
.box-content li {list-style:square; color:#C49755; margin:5px; padding:0px;}
/*element d'une liste*/
/* ------------------entete ---------------------*/
#header {background-image: url(http://idata.blogmaster.fr/0/00/14/64/aide.jpg); background-repeat: no-repeat; background-position: left bottom; text-align:center; border:0px none; margin-bottom:0px; position:relative;}
/*div contenant l'entete du blog*/
#top {padding:5px; color:#682B01;}
/*entete du blog*/
#top h1 {padding:0px; margin:0px; color:#682B01;}
/*titre du blog /! modifiable*/
.topLien {text-decoration:none;}
/*lien de l'entête vers la home du blog /! modifiable*/
.topLien:hover {text-decoration:underline;}
/*lien de l'entete vers la home du blog survolé /! modifiable*/
/* ---------------------Bas de page----------------*/
#footer {margin-top:10px; position:relative; border:0px none; color:#682B01;}
/*pied de page du blog*/
#footer p {margin:0px; padding: 10px;}
/*paragraphes du pied de page*/
.basLien {text-decoration:underline;}
.basLien:hover {text-decoration:underline;}
/* ---------- Recherche ----------------------- */
#Recherche {padding:0px;}
#WForm {margin:0px; border:0px none; padding:10px;}
#WForm input {border:solid 1px #668CB2; font-size:100%; color:#000000; text-align:center;}
#WForm input:hover {border:solid 1px #668CB2; background-color:#FFFFFF;}
.RNum {font-weight:bold;}
/*numero du resultat*/
.RDesc {padding:10px;}
/*resume du resultat (premieres lignes de l'article)*/
.ROut {font-style:italic; color:#000000;}
/*domaine auquel appartient le resultat*/
.RSize {color:#BFBFBF;}
a.RTitle {text-decoration:none; color:#7D7D55;}
/*titre du resultat*/
a.RTitle:hover {text-decoration:none; color:#000000;}
/*titre du resultat survole*/
#GGResults {text-align:left; margin:0px; color:#000000;}
/*nombre de resultats de la recherche*/
.Result1 {padding:4px; background-color:#999999;}
/*resultat style 1*/
.Result2 {padding:4px; background-color:#FFFFFF;}
/*resultat style 2*/
/*------------------- Articles ----------------------------------*/
.article {margin-top:0px; padding:0px; margin-bottom:5px;}
/*style general d'un article (entete texte et pied)*/
.article p {padding:0px 0px 5px 5px ; margin:0px;}
/*tous les paragraphes composant un article*/
.contenuArticle {margin:1px;}
/*style du texte d'un article*/
.Date {margin-right:10px;}
/*style de la date affichee dans l'entete de l'article*/
.Option {padding:3px 0px; border-top:1px solid #808080; width:100%; text-align:right; font-size:90%; color:#808080;}
/*style du pied de l'article (publie par, categorie, commentaire,recommander)*/
.barreHautArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#685E3D;}
/*entete du blog contient la date*/
.categorieArticle {}
/*categorie de l'article*/
.categorieArticle a {text-transform:lowercase;}
/*lien sur la categorie de larticle*/
.categorieArticle a:hover {text-transform:lowercase;}
/*lien survole sur la categorie de larticle*/
.titreArticle {text-decoration:none;}
/*lien sur le titre de l'article*/
.titreArticle:hover {text-decoration:underline;}
/*lien survole sur le titre de l'article*/
#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:#eee;}
.hitencart {border:1px solid black;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;}

/*style d'un article lors de l'affichage de l'article avec commentaires/trackbacks*/
/*--------------------Liste des articles-------------------------*/
.listArticles {margin-top:0px; margin-bottom:10px; border:0px none;}
/*style d'un article*/
.resumeArticle {}
/*style du resume d'un article*/
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color:#999999;}
.comment {}
.comment hr {}
.linkcomment {font-size:130%; color:#7D7D55;}
/*lien d'ajout d'un commentaire*/
.commentMessage {padding:5px; border:1px dotted #000000; background-color:#EAE2CE; margin:0px;}
/*texte d'un commentaire*/
.commentOption {text-align:right; font-size:90%; color:#000000; margin-bottom:10px;}
/*infos sur le commentaire auteur site...*/
.reponseMessage {background-color: #F6F3EA; text-align: right;}
/*---------------formulaire de saisie d'un commentaire--------------*/
#formComment {background-color:#FFFFFF; border:1px solid #682B01;}
#formComment label {width:70px;}
/*texte associé aux champs de sasie*/
#formComment input {background-color:transparent; border:1px solid #000000;}
/* boutons, champs texte */
#formComment textarea {background-color:transparent; border:1px solid #000000; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:small;}
/*zone de saisie de texte*/
/*-------------------trackback----------------------------------*/
#addTrackback {border:1px dotted #000000; background-color:#EAE2CE; padding:5px;}
/* cadre donnant l'adresse de trackback*/
.affTrackback {padding:5px; border:1px dotted #000000; background-color:#EAE2CE; margin-bottom:10px;}
/**/
.affTrackback h2 {color:#000000;}
/**/
.linkTrackback {font-size:130%; color:#7D7D55;}
/*lien vers la fenetre d'ajout de trackback */
.h2Trackback {color:#999999;}
/**/
/*-----------------fenetre d'ajout d'un trackback---------------------*/
#divTrackBack {background-color:#FFFFFF; border:1px solid #682B01;}
/*style general*/
#divTrackBack input {background-color:transparent; border:1px solid #000000;}
/*champs de texte bouton*/
#divTrackBack textarea {background-color:transparent; border:1px solid #000000; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:small;}
/*zone de saisie de texte*/
/*-------------------fenetre de recommandation---------------------------*/
#divRecommander {background-color:#EAE2CE; border:1px solid #682B01;}
/*style general*/
#divRecommander span {font-size:larger; color:#FFCCCC;}
#divRecommander legend {font-size:larger; color:#000000;}
/*texte du cadre*/
#divRecommander fieldset {padding:3px; margin:5px; background-color:#FFFFFF;}
/*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; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:small;}
/*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*/
#divNewsletter {background-color:#FFF; border:1px solid #682B01;}
/* ---------------------Calendrier--------------------------------- */
.calendarTop1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#000000; font-weight: bold; background-color:transparent;}
/*entete*/
.calendarToday1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color:#DED2B1;}
/* Aujourd'hui */
.calendarDays1 {width:50px; height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#000000; text-align:center;}
.calendarHeader1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#000000;}
/* lettre de la semaine */
.calendarTable1 {border:0px none;}
/* contour du calendrier */
/*-----------------------Pagination-------------------------*/
.pagination {color:#000000;}
.pagination a {}
/*Liens*/
.pagination b {}
/*Page courante*/
/*------------------------Divers-----------------------------*/
.cleaner {clear:both;}
/*-----------------------elements commun a l'accueil et aux pages d'un album------------------------------*/
#bodyAlbum {background-color:#FFFFFF;}
/*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*/
#enteteAlbum {width:100%; background-color:#EAE2CE; font-size:130%; color:#682B01;}
/*ligne sous l'entete du blog contient les liens vers les albums*/
#enteteAlbum a {color:#7D7D55; text-decoration:none;}
#enteteAlbum a:hover {color:#682B01; text-decoration:underline;}
.lienAlbum {text-decoration:none;}
.lienAlbum:hover {text-decoration:underline;}
#piedAlbum {width:100%; text-align:center; margin-top:5px;}
/*pied de page de l'album*/
.h2Album {text-align:center; font-size:12pt; color:#000000;}
/*titre de l'album/la photo*/
.topLienAlbum {text-decoration:none;}
/*lien vers un album*/
.topLienAlbum:hover {}
/*lien survole*/
/*-------------------------------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 {margin:5px 0px; border:1px solid #682B01;}
/*miniature*/
/*-----------------------Album photo--------------------------*/
.nomPhotoAlbum {font-size:large; color:#000000; text-align:center;}
/*nom de la photo affichée*/
.quickNavAlbum {margin:0px; padding:0px; border:1px solid #DED2B1; 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 survole de navigation rapide*/
.precAlbum {float:left; text-decoration:none; position:relative; padding:0px; margin:0px;}
/*liens et titre photo precedente*/
.suivAlbum {float:right; text-decoration:none; position:relative; padding:0px; margin:0px;}
/*liens et titre photo suivante*/
.retourAlbum {position:relative; text-decoration:none; padding:0px; margin:0px auto; width:6em;}
/*liens de retour album photo*/
#centrethumbsAlbum {background-color: #FFFFFF;}
/*contient les miniatures de l'accueil de l'album (non utilise)*/
.thumbsAlbum {padding:2px; width:99%; text-align:center; margin-right:auto; margin-left:auto;}
/*miniatures de l'album contient toutes les miniautures*/
.thumbAlbum {display:inline; margin:3px;}
/*div contenant une miniature*/
.thumbAlbum img {border:1px solid #FFFFFF; border:1px solid #682B01;}
/*miniature*/
.thumbCouranteAlbum {display:inline; margin:3px;}
/*div contenant la miniature de la photo courante*/
.thumbCouranteAlbum  img {border:2px dashed #682B01;}
/*miniature de la photo courante*/
#photo {text-align:center;}
/*div contenant la photo courante*/
#photo img {margin: 2px auto; border:1px solid #000000;}
/*photo courante*/
#descrAlbum {text-align:center; font-size:larger;}
#menuClicDroit {position:absolute; top:0px; left:0px; z-index:1000; visibility:hidden; background-color:#FFFFFF; border:1px solid #74858C; 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;}
Ce design devrait être amélioré prochainement...

a++
Créer un blog sur i-clic.net - Contact - C.G.U. - Reporter un abus