Voici ma feuille de style en entier.
Et en effet dans la suite de ma feuille de style j'ai des tailles définies en px mais je pensais que le body gerais la taille en général sauf pour des cas particuliers ou l'on précise une autre taille.
/**
* @auteur Wee Keat Chin
* @url www.visualdensity.com
* @email weekeat@visualdensity.com
* @traduction Lexel / Zen Air Cashmere / Dragon Company
* Version FR 1.00 du 17-05-2004
*/
/**
* Styles de Base pour Mambo
* Ces styles CSS sont souvent utilisés avec la plupart des thèmes graphiques
* pour les sites mambo car ils sont presque toujours présent dans un thème graphique.
*/
/* =====================================================
* STYLES SPECIFIQUES AU TEMPLATE : mise en page
* ----------------------------------------------------- */
#centre {
margin-left:auto;
margin-right:auto;
width:1001px;
text-align: left; /* on rétablit l'alignement normal du texte */
}
html {
font-size: 100%; /* Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement pour éviter un bug de redimensionnement du texte dans Internet Explorer.*/
}
body {
font-family:Arial,sans-serif;
font-size:.75em;
line-height:1.25;
margin: 0;
padding: 0;
background-repeat:repeat-y;
background-image :url('../images/fond.png');
background-position:center;
background-color:#e0e0e0;
text-align: center; /* pour corriger le bug de centrage IE */
}
a img{ border: none; }
p {
margin: 0 0 10px 0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
.contentheading h1 {
font-size:15px;
}
li,dd {
/*margin-left:1em;*/
}
fieldset {padding:.5em;}
a {
color:#f10066;
/*padding:5px;*/
text-decoration:none;
}
a:hover {
color:#008edd;
text-decoration:underline;
font-weight:bold;
}
a:link {
color:#f10066;
}
input{
/*border: solid;
border-color:#e0e0e0;
border-width: 1px;*/
width:auto;
margin-left:5px;
}
.button {
cursor:pointer;
}
label{margin-left:5px;}
#photo{
margin-left:auto;
margin-right:auto;
width:288px;
height:99px;
}
/* =====================================================
* STYLES SPECIFIQUES AU menu utilisateur
* ----------------------------------------------------- */
#active_menu {
background-position:5% 50%;
}
#active_menu {
background:transparent url(../images/arrow_red.png) no-repeat scroll 0 0;
color:#CC0000;
}
a.mainlevel_user:hover {
background-position:5% 50%;
padding:0;
text-decoration:none;
}
a.mainlevel_user:link, a.mainlevel_user:visited {
background-position:5% 50%;
border-bottom:1px solid #CCCCCC;
display:block;
font-weight:bold;
height:30px;
/*line-height:30px;*/
padding:0;
text-decoration:none;
text-indent:27px;
}
a.mainlevel_user:hover {
background-position:5% 50%;
background:transparent url(../images/arrow_red.png) no-repeat scroll 0 0;
color:#CC0000;
}
a.mainlevel_user:link, a.mainlevel_user:visited {
background-position:5% 50%;
background:transparent url(../images/arrow_grey.png) no-repeat scroll 0 0;
color:#000000;
}
.mainlevel_user {
font-weight:bold;
/*line-height:22px;*/
}
/* =====================================================
* STYLES SPECIFIQUES AU module recherche
* ----------------------------------------------------- */
.search input {
background-color:#008EDD;
color:white;
}
/* =====================================================
* STYLES SPECIFIQUES AU module login
* ----------------------------------------------------- */
.moduletable_login {
margin-top:14px;
margin-left:4px;
}
.moduletable_login h3 {
color:#0066FF;
}
.moduletable_login a {
color:#F10066;
}
/* =====================================================
* STYLES SPECIFIQUES AU MENU TOP
* ----------------------------------------------------- */
#menuTop {
float:right;
font-weight: bold;
}
.menutabs {
font:Arial, sans-serif;
font-size: 15px;
font-weight: bold;
float:right;
}
.menutabs ul {
list-style:none;
float:left;
margin:0;
padding:0;
width:100%;
}
.menutabs li {
float:left;
background:url(../images/menuBleu.jpg) no-repeat;
margin:0;
width:133px;
}
.menutabs li a:hover {
background:url(../images/menuGris.jpg) no-repeat;
width:133px;
text-align: center;
font-family:Arial, sans-serif;
color:#ffffff;
font-weight: bold;
}
.menutabs a:link,.menutabs a:visited {
float:left;
display:block;
font-family:Arial, sans-serif;
color:#ffffff;
font-weight: bold;
background:url(../images/menuBleu.jpg) no-repeat;
text-decoration:none;
margin:0;
padding:3px 0px 7px 0px;
width:133px;
text-align: center;
}
/*Droit : */
#rightMenuItem {
background:url(../images/menuBleuDroit.jpg) no-repeat;
width:144px;
}
#rightMenuItem a{
background:url(../images/menuBleuDroit.jpg) no-repeat;
width:144px;
}
#rightMenuItemActive {
background:url(../images/menuBlancDroit.jpg) no-repeat;
width:144px;
font-family:Arial, sans-serif;
color : #0592de;
}
#rightMenuItemActive a{
background:url(../images/menuBlancDroit.jpg) no-repeat;
width:144px;
font-family:Arial, sans-serif;
color : #0592de;
}
#rightMenuItem:hover{
background:url(../images/menuGrisDroit.jpg) no-repeat;
width:144px;
font-family:Arial, sans-serif;
color:#ffffff;
}
#rightMenuItemActive a:hover{
background:url(../images/menuGrisDroit.jpg) no-repeat;
width:144px;
font-family:Arial, sans-serif;
color:#ffffff;
}
/** Gauche : **/
#leftMenuItem {
background:url(../images/menuBleuGauche.jpg) no-repeat;
width:135px;
}
#leftMenuItem a{
background:url(../images/menuBleuGauche.jpg) no-repeat;width:135px;
}
#leftMenuItemActive {
background:url(../images/menuBlancGauche.jpg) no-repeat; width:135px;
font-family:Arial, sans-serif;
color : #0592de;
}
#leftMenuItemActive a{
background:url(../images/menuBlancGauche.jpg) no-repeat;width:135px;
font-family:Arial, sans-serif;
color : #0592de;
}
#leftMenuItem:hover{
background:url(../images/menuGrisGauche.jpg) no-repeat;width:135px;
font-family:Arial, sans-serif;
color:#ffffff;
}
#leftMenuItemActive a:hover{
background:url(../images/menuGrisGauche.jpg) no-repeat;width:135px;
font-family:Arial, sans-serif;
color:#ffffff;
}
/* =====================================================
* STYLES SPECIFIQUES POUR Les 4 images pour le fond des modules
* ----------------------------------------------------- */
div.module-grey, div.moduletable-grey {
/*background: url(../images/jos_box_grey_tl.png) 0 0 no-repeat;*/
background: url(../images/jos_box_grey_tl.png) 0 0;
background-repeat:repeat-y;
margin: 0px;
padding: 0px;
/*margin-bottom: 8px;*/
}
.in1{
/*background: url(../images/jos_box_grey_tr.jpg) 100% 0 no-repeat;*/
background: url(../images/jos_box_grey_tr.jpg) 100% 0 ;
background-repeat:repeat-y;
}
.in2 {
background: url(../images/jos_box_grey_bl.png) 0 100% no-repeat;
}
.in3 {
background: url(../images/jos_box_grey_br.jpg) 100% 100% no-repeat;
padding: 4px;
padding-top: 6px!important;
padding-top:8px;
width: auto !important;
width: 100%;
}
.headerWhite {
background-image : url("../images/header-article.gif") ;
background-repeat:no-repeat;
}
/** Pour les modules **/
.moduletable form{margin-left:5px;}
.moduletable h3 {
width: auto;
color:#008edd;
font: Arial, sans-serif;
font-size:15px;
font-weight: normal;
text-decoration: none;
padding-left:17px;
margin-top:6px;
margin-bottom:15px;
font-weight: bold;
/*text-align:center;*/
}
.moduletable label{color:#008edd;}
/* =====================================================
* STYLES SPECIFIQUES AU module avatar
* ----------------------------------------------------- */
.moduletable_avatar h3{
width: auto;
color:#008edd;
font: Arial, sans-serif;
font-size:15px;
font-weight: normal;
text-decoration: none;
padding-left:17px;
margin-top:6px;
/*margin-bottom:15px;*/
font-weight: bold;
/*text-align:center;*/
}
.moduletable_avatar a{
color:#F10066;
/*color:#777777;*/
text-decoration:none;
}
.moduletable_avatar a:hover{
color:#008edd;
text-decoration:underline;
font-weight:bold;
}
/* =====================================================
* STYLES SPECIFIQUES AU module derniers messages du forum
* ----------------------------------------------------- */
.moduletablefb h3{
width: auto;
color:#008edd;
font: Arial, sans-serif;
font-size:15px;
font-weight: normal;
text-decoration: none;
padding-left:17px;
margin-top:6px;
margin-bottom:15px;
font-weight: bold;
/*text-align:center;*/
}
.moduletablefb a{
color:#F10066;
/*color:#777777;*/
text-decoration:none;
}
.moduletablefb a:hover{
color:#008edd;
text-decoration:underline;
font-weight:bold;
}
.lastfb{
color:#777777
}
.sujetfb{
font-size:12px;
}
/* =====================================================
* STYLES SPECIFIQUES AU module TAGS
* ----------------------------------------------------- */
.moduletable_tags h3{
width: auto;
color:#008edd;
font: Arial, sans-serif;
font-size:15px;
font-weight: normal;
text-decoration: none;
padding-left:17px;
margin-top:6px;
margin-bottom:15px;
font-weight: bold;
/*text-align:center;*/
}
.moduletable_tags a{
color:#008edd;
/*color:#777777;*/
text-decoration:none;
}
.moduletable_tags a:hover{
color:#008edd;
text-decoration:underline;
font-weight:bold;
}
/* =====================================================
* STYLES SPECIFIQUES AU module SHOPPING
* ----------------------------------------------------- */
.moduletable_shopping h3{
width: auto;
color:#008edd;
font: Arial, sans-serif;
font-size:15px;
font-weight: normal;
text-decoration: none;
padding-left:17px;
margin-top:6px;
/*margin-bottom:15px;*/
font-weight: bold;
/*text-align:center;*/
}
.moduletable_shopping a{
color:#F10066;
/*color:#777777;*/
text-decoration:none;
}
.moduletable_shopping a:hover{
color:#008edd;
text-decoration:underline;
font-weight:bold;
}
.contentpaneopen_shopping{
/*margin-left:10px;*/
}
/***======== La mise en forme des contenus ==========***/
.sectiontableentry2{
/*width:90%;*/
}
.contentpaneopen P{
padding:5px;
}
.sectiontableheader{
background:#F0F0F0 none repeat scroll 0%;
border-bottom:1px solid #DDDDDD;
color:#333333;
font-weight:bold;
line-height:20px;
padding:4px;
/*background-color: gray;*/
}
div.module-grey ul, div.moduletable-grey ul {
padding-left: 8px;
}
.contentpagetitle {
text-decoration:none;
color:#F10066;
}
.contentpagetitle a{
text-decoration:none;
color:#008EDD;
}
/* =====================================================
* STYLES SPECIFIQUES AU module NEWS
* ----------------------------------------------------- */
.dn-title a{
color:#000000;
text-decoration:none;
}
.dn-title a:hover{
color:#F10066;
text-decoration:underline
}
.dn-whole{
margin-left:10px;
color:#777777;
margin-bottom:10px;
}
.dn-date{
color:#777777
}
hr {}
hr.separator {}
.pagenavbar {} /* il n’est pas utilisé dans la page nav bar mais pour l’affichage des noms sur le forum Simple Board? */
.pagenav {/* comme son nom l’indique, ce style correspond aux liens << Premier < Précédent 1 Suivant > Dernier */
border:1px solid #515151;
/*color:#666666;*/
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
padding:2px 4px;
}
/*td {} /* style des cellules normales des tableaux */*/
/* *
* Styles de Formulaires pour Mambo
* --------------------------------
* Voici les 2 styles que Mambo utilise pour les contrôles des utilisateurs
* (boutons et champs de saisies)
*/
.button {}
.inputbox {}
/**
* Interface de Navigation pour Mambo
* ---------------------------------
* Les styles CSS que voici définissent l’affichage des interfaces de navigation
*/
.ontab {}/* Pour modifier l'apparence des "Onglet" dans l'editeur d'article en "frontend" ( quand vous etes logger en admin ). Ce style .ontab correspond aux éléments actifs ou après un clique*/
.offtab {} /* La même chose que précédemment Celui-ci correspond aux cases qui ne sont pas actives ou il n’y a pas eu de clique */
.tabpadding {} /* Ce style est utilisé pour fixer la taille des cases en question */
.tabheading {} /* Je ne suis pas sur que ce soit utilisé. Je n’ai pas trouvé d’exemple concernant ce style. */
.pagetext {} /* Ce style est utilisé pour le contenu des formulaire d’éditions, de saisie des articles (ce que l’ont fait avec htmlarea par exemple) */
/**
* Style du menu Mambo
* -------------------
* Vous pouvez contrôler l'apparence et la disposition du menu principal
* en utilisant les paramètres CSS suivant
*/
a.mainlevel{}/*ce style correspond aux liens du menu principal*/
a.sublevel{}/*ce style correspond aux articles du sous-menu*/
/**
* Style général dans Mambo des Sections / Catégories / Contenu?
* -------------------------------------------------------------
* Ces styles sont le plus souvent utilisés à travers des Sections,
* Catégories et Contenus. Ils méritent donc d'être séparés des autres.
*/
.creadate{}/*ce style correspond à la date figurant au-dessous du titre du contenu/article*/
.modifydate{}/*ce style correspond à la date figurant en fin de contenu/article «dernière modification»*/
.readon{}/*ce style correspond au texte «lire la suite…" figurant dans la page principale ou en fin de résumé (contenu)*/
/**
* Style du contenu dans Mambo
* l'ensemble des styles pour le contenu est listé ci-après.
*/
.contentpane{}/* ce style correspond principalement aux tableaux contenus dans les SECTIONS telles que les news. Quand vous créez un lien vers une section et quand vous cliquez dessus, cela vous montrera le “News” avec une description et une image (si vous en choisissez une), et une liste de catégorie des news. */
.contentpaneopen{/*ce style a été utilisé par Phil dans son Shambo 2?. Pas d'autre idée d'utilisation dans mambo.*/
width:100%;
}
.contentheading{/* ce style est employé dans plusieurs endroits ; le titre du contenu de la page principale (index.php), il est également utilisé pour l'entête de Section “News” (voir ci-dessus pour l'explication) ; ou tout autre titre vous employez.*/
background-image : url("../images/header-article.png");
background-repeat:no-repeat;
height:35px;
/*width: 805px;*/
width: 100%;
padding-left:17px;
font: Arial, sans-serif;
font-size: 15px;
padding-bottom:5px;
font-weight: bold;
/*color:#f10066;*/
color:#008EDD;
}
.contentdescription{}/*?*/
table.contenttoc{}/*ce style correspond au tableau (<table>) reprenant la liste des matières (ou “jump to box” ? -> connais pas ;( ) quand cela est possible dans une multiple pagination de contenu/articles.*/
table.contenttoc td{}/*idem mais pour les cellules de tableaux (<td>)*/
.content_rating{}/*ce style correspond au texte utilisé pour noter un article ou le commenter*/
.content_vote{}/*ce style correspond au texte utilise pour les votes (celui avec une case à cocher)*/
/**
* Style des Sections dans Mambo
* -----------------------------
* Style des “tableaux” (<table>) dans les Sections
*/
.sectiontableheader{}/*ce style correspond aux entêtes des tableaux (<table>) dans les pages Section. Un exemple serait celui de la liste des articles quand vous cliquez sur “News” ou autre avec l'entête de tableau (<table>)comme “date”, “titre de l'article”, “auteur” et “hits”. C'est l'entête que vous pourrez contrôler avec ce style.*/
.sectiontableentry1{}/* ce style est employé quand il y a une liste entière de données à fournir et que vous devez créer des couleurs alternatives pour chaque rangée des données. C'est le 1ère des couleurs.
.sectiontableentry2{}/*ce style correspond à la seconde couleur pour les rangées. Ainsi, le générateur de table, alternera le style entre sectionableentry1 et sectiontableentry2 en formant un cycle pour chaque rangée des données. Semblable aux listes de “posts” dans les forums.*/
/**
* Style des Categories / Category Mambo
* -------------------------------------
* Les styles suivant configurent l'affichage des objets «Category / Categories»
* generée à partir de la zone “Sections”
*/
.category {} /*Cette classe definit le titre de la Categorie */
a.category:link, a.category:visited {} /*meme chose qu'au dessus mais pour les titres Liens*/
a.category:hover {} /* meme chose qu'au dessu mais avec le curseur pointé dessu*/
/**
* Style du Blog Mambo
* --------------------
* Ce n'est pas certain que cette classe soit encore utilisée.
* n'esitez à nous envoyer un mail si vous avez des info sur cette partie
*/
.blogsection{} /*à mettre à jours */
/**
* Style des «Components / Composants» Mambo
* -----------------------------------------
* Ces style CSS definissent la maniere dont le titre des «Composant / Component» est affiché
*/
.componentheading {} /* Cette class est utilisée pour l'affichage du titre du composant, quand il est affiché sur la page principal */
/**
* Format des modules Mambo
* -----------------------------
* Ces styles configurent l'affichage des modules,
* ceci concerne principalement l'affichage des table
*/
table.moduletable {} /* Le style des tables module */
table.moduletable th {} /* configure le style de l'entete des modules et leurs titres */
table.moduletable td {} /* Permet de formater les cellules de la table module */
/**
* Style des «Components / Composants» integrés à Mambo
* ----------------------------------------------------
*Ces styles configurent l'affichage des composants integrés a mambo
* tel que news externes, annuaire de liens, contact, recherche et sondage.
*/
/* Sondages */
.poll {} /* Les textes des sondages */
.pollstableborder {} /* configure les bords de la table des sondages */
/* Liens Web */
.weblinks{} /* Configure le titre des liens dans l'annuaire “Weblinks”*/
a.weblinks:hover {} /* meme chose qu'au dessu mais avec le curseur pointé dessu*/
/* Diffusion des news */
.newsfeedheading {} /* Le titre des news. NOTE: ceci n'affecte pas le titre des news! */
.newsfeeddate {} /* La date des news */
.fase4rdf {} /* Le texte principal des news*/
/* Page de recherche */
table.searchintro {}
/* Ce style configure l'affichage du resulta d'une recherche affichée dans la page principale */
/* Paramettres de la Table des Contactes */
table.contact {}
/* Pour formater la totalité de la table des “contacts” ce qui inclus le nom, addresse icons and formulaire.
Note : Cette table n'inclus pas la liste deroulante qui permet de choisir “Department” “Personne” */
table.contact td.icons {}
/* Le nom vous en dis deja beaucoup. Ce style configure les cellules <td>
ou sont affichés les petits icons prés des details (addresses, telephone etc) */
table.contact td.details {}
/* ceci definit le format <td> ( td pour table data ) des cellules ou sont les informations.
Ces informations sont : addresses, telephone et autres info*/
/* =====================================================
* STYLES SPECIFIQUES AU TEMPLATE : HEADER
* -----------------------------------------------------
*/
#header {
/* Style du container du header */
background-image :url('http://ks355846.kimsufi.com/~new/templates/test/images/banner-top-pub_bis.jpg');
background-repeat: none;
/*height:136px;*/
width:1001px;
}
/* ===================================================== */
/* STYLES SPECIFIQUES AU TEMPLATE : CORPS DU SITE */
/* ----------------------------------------------------- */
#column1 {
/* Style de la colonne 1 du corps du site */
background-color: white;
width: 160px;
vertical-align: top;
}
#column2 {
/* Style de la colonne 2 du corps du site */
background-color: White;
/*border-right: 2px solid #B0C4DE; */
padding: 0px 0px 0px 4px;
width: auto;
vertical-align: top;
}
#column3 {
/* Style de la colonne 3 du corps du site */
background-color: #FFFFFF;
padding: 0px 0px 0px 4px;
/*border-right: 2px solid #B0C4DE;*/
width: 160px;
vertical-align: top;
}
/* =====================================================
* STYLES SPECIFIQUES AU TEMPLATE : FOOTER
* ----------------------------------------------------- */
#footer {
/* Style du footer */
background-color: white;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 6px;
text-align: center;
vertical-align: middle;
}
/* =====================================================
* STYLES SPECIFIQUES A DATSOGALLERY
* ----------------------------------------------------- */
blockquote{
font-size:12px;
background:#E6E6E6 url(http://www.buzzcms.com/templates/rt_carbo/images/bq_start.png) no-repeat scroll 0pt;
/*text-align:center;*/
color:#333333;
line-height:140%;
margin:10px;
/*border-style:outset;*/
/*border-width:thin;*/
background-color:#E6E6E6;
border-color:#CCCCCC;
}
blockquote div {
background:transparent url(http://www.buzzcms.com/templates/rt_carbo/images/bq_end.png) no-repeat scroll 100%;
padding:5px 45px;
}
/*div.image2{
background-color:#FFFFFF;
border:1px solid #DDDDDD;
/*float:left;*/
/*margin:10px 6px 0pt 0pt;*/
padding:5px;
position:relative;
text-decoration:none;
/*width:175px;*/
width:160px;
}*/
.small {
color:#999999;
}
.small, .modifydate, .createdate, div.mosimage_caption {
font-size:95%;
color:#999999;
}
bleu{
color:#33CCFF;
}
#copyright{
left:17px;
position:relative;
}
#design{
left:611pt;
position:relative;
top:-16px;
}
div.module-grey ul.dgvote-star{
padding:0;
}
.dgvote-star a:hover { background-position:left -49px; }
.dgvote-star li,dd {
margin-left:auto;
}
Modifié par pollux007 (30 Nov 2008 - 00:54)