/* ***** BEGIN LICENSE BLOCK ***** * This file is part of DotClear. * Copyright (c) 2004 Maurice Svay and contributors. All rights * reserved. * * DotClear is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * DotClear is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with DotClear; if not, write to the Free Software * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA * * ***** END LICENSE BLOCK ***** * * Contributor(s): * Maurice Svay */ /* Ce fichier d?finit le style visuel pour les diff?rents ?l?ments du blog. * Dans l'ordre, vous trouverez les r?gles qui d?finissent l'apparence pour: * - les ?l?ments HTML en g?n?ral * - la page * - l'ent?te * - le pr?lude * - le contenu * - la barre de navigation * - le pied de page * * L'agengement des blocs est d?fini dans le fichier layout.css * Pour mettre la barre de navigation ? gauche, d?commentez l'appel ? * layout-gauche.css */ @import "layout.css"; /* @import "layout-gauche.css"; */ /* Les ?l?ments HTML en g?n?ral -------------------------------------------------------- */ body{ color: #dbaa2c; font-size: 80%; line-height: 1.6em; font-family: Verdana; background-image: url(img/bords.gif); background-repeat: repeat-y; background-attachment: scroll; background-position: center top; } h1, h2, h3, h4, h5, h6{ color: #DBAA2C; font-family: Georgia; } h1{ color: #DBAA2C; font-size: 1.3em; font-family: Georgia; } h2{ color: #DBAA2C; font-size: 1.1em; font-family: Georgia; } h3{ color: #DBAA2C; font-size: 1em; font-family: Georgia; } h4{ color: #DBAA2C; font-size: 0.9em; font-family: Georgia; } h5{ color: #DBAA2C; font-size: 0.8em; font-family: Georgia; } h6{ color: #DBAA2C; font-size: 0.7em; font-family: Georgia; } h7{ margin-top: 0; color: #a6a6a6; font-size: x-small; font-family: Georgia; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-decoration: none; text-align: center; letter-spacing: 1px; padding-bottom: 1ex; /*border-bottom: 1px solid #FC0;*/ } pre, code{ color: #DBAA2C; font-size: 1.2em; font-family: Verdana; } pre{ color: #DBAA2C; font-family: Verdana; width: 100%; overflow: auto; border: solid 1px #ccc; } fieldset{ color: #DBAA2C; font-family: Verdana; border: none; } label{ color: #DBAA2C; font-family: Verdana; cursor: pointer; cursor: pointer; } .field label{ color: #DBAA2C; font-family: Verdana; display: block; } input,textarea{ color: #4a4a4a; font-family: "Times New Roman"; background-color: #e9c44e; margin-left: 10px; border: solid 1px #999; } textarea{ color: #4a4a4a; width: 100%; font-size: 1em; font-family: "Times New Roman"; } a{ color: #DBAA2C; text-decoration: none; } a:visited{ color: #DBAA2C; text-decoration: none; } a:hover{ color: #ffe972; } .icons:link { color: #fff; font-size: small; font-family: Arial } .icons:visited { color: #fff; font-size: small; font-family: Arial } .icons:hover { color: #DBAA2C; font-size: small; font-family: Arial } .left{ color: #E9C44E; float: left; margin-right: 1em; } .right{ color: #E9C44E; float: right; margin-left: 1em; } /* La page -------------------------------------------------------- */ #page{ color: inherit; background: #fff url(img/bords.gif) repeat-y center top; } /* Le contenu -------------------------------------------------------- */ .day-date{ color: #EFB20E; font-size: small; font-family: "Times New Roman"; font-weight: bold; font-variant: small-caps; background-repeat: no-repeat; background-attachment: scroll; background-position: left center; text-align: center; letter-spacing: 10px; } .menu-haut{ color: #5A508F; font-size: small; font-family: Gloria; font-weight: bold; font-variant: small-caps; background-repeat: no-repeat; background-attachment: scroll; background-position: left center; text-align: center; letter-spacing: 2px; } .post-title{ color: #AF350A; font-size: x-large; font-family: Georgia; background-image: none; font-variant: small-caps; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: center; margin-bottom: 0; } .post-title a{ color: #AF350A; font-size: x-large; font-family: Georgia; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-decoration: none; margin-bottom: 0; } .post-info{ margin-top: 0; color: #a6a6a6; font-size: x-small; font-family: Georgia; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-decoration: none; text-align: center; letter-spacing: 2px; padding-bottom: 1ex; /*border-bottom: 1px solid #FC0;*/ } .post-info a{ color: #e7a62f; font-size: x-small; font-family: Verdana; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-decoration: none; } .post-content{ color: #3F3F3F; font-size: small; font-family: Arial; text-align: justify; } .post-content blockquote{ color: #3F3F3F; font-size: small; font-family: Arial; font-style: italic; } .post-info-co{ color: #3F3F3F; font-size: small; font-family: Arial; font-variant: small-caps; text-align: center; vertical-align: 100px; } #trackbacks blockquote, #comments blockquote{ color: #4a4a4a; font-size: x-small; font-family: Verdana; background-color: #fdfdf1; text-align: justify; margin: 1em 0 0 0; padding: 1ex 1em 60px 1em; height: auto; } .me { border : solid 1px #e7a62f; color: #4a4a4a; font-family: Verdana; background-color : #ffeea4; text-align: justify; margin: 1em 0; height: auto; } /* Le pied de page -------------------------------------------------------- */ #footer{ margin: 0; text-align: center; padding: 1em; background: #fff; color: #666; } #footer a{ color: #999; text-align: center; font-family: Verdana; font-size: xx-small; } /* L'ent?te -------------------------------------------------------- */ #top{ height: 120px; /*padding-top: 20px;*/ background: #FFF url(http://legrumph.org/VP/Matrice.jpg) no-repeat left top; } #top h1{ height: 80px; line-height: 80px; margin: 0 0 0 40px; padding-top: 20px; color: #FFFFFF; } #top h1 a{ text-decoration: none; color: #FFFFFF; } /* nav-box -------------------------------------------------------- */ /* Paramètres généraux de la boite (div) qui contient la liste : pas de marge, * indication essentielle pour IE qui en met par défaut ; définition de la couleur * du fond. Je réduis un peu la taille des caractères à une valeur de neuf * dixièmes et je demande que le contenu soit aligné à droite : */ #nav-box { color: #fff; margin : 0; padding : 0; background-color: #fff; font-weight : bold; font-size :0.9em; text-align: right; } /* Paramètres généraux de la liste (ul). Toujours mes marges à zéro, * le padding (marge intérieure) servira à dégager le texte en haut et en * bas de 5 pixels tout en le décollant également de 1em du bord droit * ce dernier point est indispensable pour Internet Explorer, comme on * le verra pour #nav-box ul li a { }. list-style-type : none; déclare que * je ne place pas de puces devant chaque item. */ #nav-box ul { margin : 0; padding : 1px 1em 1px 0; list-style-type : none; } /* Paramètres des liens. display : inline; donne comme instruction de ne * pas faire de saut de ligne pour chaque item. Je redonne également une * marge intérieure haute et basse de 5 pixels pour que les items occupent * toute la place verticale créée pour la liste */ #nav-box ul li { display: inline; padding : 1px 0; } /* On retrouve le padding haut et bas de 5 pixels (car sinon Internet Explorer * va n'en faire qu'à sa tête) et j'ajoute un espace latéral de 1em de chaque * côté des liens. J'indique également la couleur des caractères des liens et je * place un bord gauche continu et blanc de 1 pixel de large. text-decoration : * none; indique que je ne veux pas que les liens soient soulignés (ce qui serait * le cas par défaut. */ #nav-box ul li a { color: #fff; text-decoration: none; padding : 1px 1em; border-left: 1px solid #fff; } /* Ici, ce qui se passe au survol des liens : changement de la couleur du fond, * de la couleur des caractères, je n'oublie pas de remettre à ce lien survolé le * bord gauche que j'ai défini pour les liens « au repos ». */ #nav-box ul li a:hover { background-color: #fff; color: #fff; border-left: 1px solid #fff; } /* Le comportement des liens activés. Pour l'instant ne marche pas : le lien une * fois cliqué ne semble pas acquérir l'état actif... Si quelqu'un sait pourquoi ? .me { background-color : #ffeea4; border : solid 1px #e7a62f; } */ #nav-box a:active { border-left: 1px solid #fff; } #header{ color: #fff; background-image: url(include/images/bandeau.gif); width: 1028px; text-align: left; height: 121px; margin-right: auto; margin-left: auto; } #navbox{ color: #fff; background-color: #fff; width: 910px; text-align: left; margin-right: auto; margin-left: auto; } .lettrine { display:block; float: left; margin: 10px 5px 0; } .retroDate { color : #666; font-size : 0.5em; } #zim { float: left; margin: 15px 10px 0 5px; padding: 0 0 0 0; } #tabnav { list-style-type: none; padding-bottom: 24px; margin: 0; } #tabnav a { float: left; display: block; color: #777777; text-decoration: none; padding: 4px; } #tabnav a.active { float: left; display: block; color: black; text-align: center; text-decoration: none; padding: 4px; } #tabnav a:hover { background: #fff; }