Template Joomla CSS
Source : http://www.joomlack.fr
On va définir l'allure générale de la page : fond et couleur, police de caractères et taille.
Ce seront les paramètres par défaut des éléments de la page.
______________________________________________________
Propriétés WIDTH et HEIGHT
Ces deux propriétés permettent d'ajuster la largeur et la hauteur d'un bloc. Elles acceptent une valeur, qui peut être soit "auto , longueur, pourcentage" et comme pour la plupart des éléments CSS privilégiez les unités : pourcentage %, centimetres cm, millimètres mm, pixels px, points pt, inches in. Les valeurs négatives ne sont pas autorisées pour widht et heig
html {
height: 100%;
}
__________________________________________________________________
Gere la couleur de fond
body {
color : #ffffff;
applique une image de fond sur le BODY qui reprendra les couleurs des bandes
background : #ffffff url(../images/body_bg.png) top left repeat-x
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
font-size : 25px;
Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures.
padding : 0;
margin : 0;
}
body.avec_userstop {
color : #393b3c;
bord sur les cotés :
background : #393b3c url(../images/body_bg_userstop.png) top left repeat-x;
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
font-size : 12px;
padding : 0;
margin : 0;
}
img {
border : none;
}
/*** couleur lien menu ***/
a {
color: #ffffff;
text-decoration: underline;
}
a:hover {
color: #000000;
text-decoration: none;
}
a:focus {
outline: none;
}
.clr {
clear : both;
}
/*** largueur de la page de la page ***/
#conteneur {
width : 950px;
margin : 0 auto;
padding : 0;
/** background : transparent url(../images/conteneur_bg.png) top left repeat-y;**/
}
/*** largueur de la banniere ***/
#banniere_haut {
width : 950px;
margin : 0 auto;
height : 100px;
background : #66FFFF;
}
/*** gestion du logo ***/
#logo {
width : 550px;
height : 100px;
background : url(../images/logo.png) top left no-repeat;
}
#logo a {
display : block;
position : absolute;
width : 350px;
height : 100px;
margin : 0 0 0 1px;
top : 20px;
}
/** gestion de la banniere entete**/
#banniere_bas {
width : 950px;
height : 250px;
margin : 0 auto;
background : #000 url(../images/banniere_bg.jpg) top left no-repeat;
}
#recherche {
float : left;
position : absolute;
top : 30px;
margin : 0 0 0 560px;
}
/** gestion du menu horizontal **/
#topmenu {
height : 100px;
width : 950px;
margin: -50px auto 0 auto;
background : url(../images/topmenu_bg.png) top left repeat-x;
}
/** gestion des trois blocs ( 3 4 5) **/
#userstop {
height : 200px;
width : 950px;
margin : 0 auto;
background : url(../images/userstop_bg.png) top left repeat-x;
overflow : hidden;
}
/** gestion de la feuille sans les blocks **/
#contenu {
width : 950px;
margin : 0 auto;
/**background : #ffffff url(../images/contenu_bg.png) top left repeat-x; **/
background : #ffffff
}
/** pied de page **/
#footer {
width : 950px;
margin : 0 auto;
background : #dddddd;
}
/*** colonnes gauche centre droite ***/
#gauche {
width : 200px;
float : left;
background : #FF9966;
}
#gauche .interne {
margin : 20px 10px 10px 10px;
background : #dddddd;
}
#centre {
width : 550px;
float : left;
margin : 15px 0 0 0;
overflow : hidden;
background : #ff0000;
}
#centre_plein {
width : 750px;
float : left;
margin : 15px 0 0 0;
}
#centre .interne, #centre_plein .interne {
padding: 0 10px 0 0;
background : #cccccc;
}
#droite {
width : 200px;
float : right;
overflow : hidden;
background : #00FF00;
}
#droite .interne {
margin : 20px 10px 10px 10px;
background : #00FF99;
}
/*** titre des modules des colonnes ***/
#gauche div.module h3, #gauche div.module_menu h3, #gauche div.module_text h3,
#droite div.module h3,#droite div.module_menu h3, #droite div.module_text h3 {
color : #8e8e8e;
font-size : 18px;
text-transform : uppercase;
border-bottom : 2px dotted #393b3c;
line-height : 25px;
margin : 20px 0 0 0;
}
/*** module de menu des colonnes ***/
#gauche .module_menu ul, #droite .module_menu ul {
padding : 0;
margin : 10px 0 0 0;
}
#gauche .module_menu li a, #droite .module_menu li a {
color : #393b3c;
font-size : 12px;
text-decoration : none;
padding : 0;
margin : 0 0 0 25px;
}
#gauche .module_menu li a:hover, #droite .module_menu li a:hover {
text-decoration : underline;
}
#gauche .module_menu li#current a, #droite .module_menu li#current a,
#gauche .module_menu li a#active_menu, #droite .module_menu li#current a#active_menu {
border-right : 5px solid #393b3c;
border-bottom : 1px solid #393b3c;
display : block;
}
#gauche .module_menu li#current li a, #droite .module_menu li#current li a {
border-right : none;
border-bottom : none;
display : block;
}
#gauche .module_menu li, #droite .module_menu li {
padding : 0;
margin : 0;
line-height : 25px;
background : url(../images/li.png) top left no-repeat;
list-style : none;
}
#gauche .module_menu li ul, #droite .module_menu li ul {
padding : 0;
margin : 0;
}
#gauche .module_menu li li, #droite .module_menu li li {
padding : 0;
margin : 0 0 0 25px;
line-height : 25px;
background : none;
list-style : disc;
border-right : none;
}
#gauche .module_menu li li a, #droite .module_menu li li a {
padding : 0;
margin : 0;
}
/*** module d'identification ***/
#login-form fieldset {
margin : 0;
padding : 0;
border : none;
}
#modlgn-username, #modlgn-passwd {
width : 133px;
height : 25px;
background : url(../images/login_form.png) top left no-repeat;
border : none;
padding : 10px 0 0 10px;
}
#form-login-username {
background : url(../images/login_user.png) bottom right no-repeat;
}
#form-login-password {
background : url(../images/login_password.png) bottom right no-repeat;
}
#login-form input.button {
width : 96px;
height : 44px;
border : none;
color : #ccc;
background : url(../images/bouton_gris.png) top left no-repeat;
}
#login-form input.button:hover, #login-form input.button.sfhover {
color : #393b3c;
}
/*** modules arrondis ***/
.module_arrondi {
margin : 10px 0 0 0;
color: #8e8e8e;
padding: 0;
}
.module_arrondi h3 {
margin : 0;
padding : 0;
color : #393b3c;
font-size: 18px;
}
.module_arrondi ul {
margin : 10px 0 0 0;
padding : 0;
}
.module_arrondi li {
margin : 0;
padding : 0;
list-style : none;
}
.module_arrondi td.tc {
height : 15px;
background : url(../images/arrondi_bordsH.png) top left repeat-x;
}
.module_arrondi td.tl {
width : 15px;
background : url(../images/arrondi_coins.png) top left no-repeat;
}
.module_arrondi td.tr {
width : 15px;
background : url(../images/arrondi_coins.png) top right no-repeat;
}
.module_arrondi td.bc {
height : 15px;
background : url(../images/arrondi_bordsH.png) bottom left repeat-x;
}
.module_arrondi td.bl {
width : 15px;
background : url(../images/arrondi_coins.png) bottom left no-repeat;
}
.module_arrondi td.br {
width : 15px;
background : url(../images/arrondi_coins.png) bottom right no-repeat;
}
.module_arrondi td.cl {
background : url(../images/arrondi_bordsV.png) top left repeat-y;
}
.module_arrondi td.cr {
background : url(../images/arrondi_bordsV.png) top right repeat-y;
}
.module_arrondi td.cc {
}
span.firsttitre {
color : #393b3c;
}
/*** modules news dans userstop ***/
#userstop .largeur33 {
width : 33%;
float : left;
height : 200px;
}
#userstop .largeur50 {
width : 50%;
float : left;
height : 200px;
}
#userstop .largeur100 {
width : 100%;
float : left;
height : 200px;
}
#userstop ul {
margin : 0 0 0 20px;
padding : 0;
}
#userstop div.moduletable, #userstop table.contentpaneopen, #userstop p {
margin : 0;
padding : 0;
}
#userstop div.interne {
height : 160px;
margin : 10px;
padding : 10px;
}
#userstop,#userstop a {
color : #292c2d;
}
#userstop h3 {
font-size : 16px;
margin : 0 0 10px 0;
padding : 0;
}
#userstop div.interne {
background : url(../images/separateur_userstop.png) top left repeat-y;
}
#userstop :first-child div.interne {
background : none;
}
#userstop li a {
padding : 0;
margin : 0 0 0 35px;
text-decoration : none;
}
#userstop li a:hover {
text-decoration : underline;
}
#userstop li {
padding : 0;
margin : 0;
line-height : 27px;
background : url(../images/li_userstop.png) top left no-repeat;
list-style : none;
}
/*** topmenu ***/
#topmenu {
clear : both;
position : relative;
z-index : 10000;
}
#topmenu .moduletable{
margin : 0;
}
#topmenu ul{
margin : 0;
padding : 0;
}
#topmenu ul li{
margin : 0;
padding : 0;
height : 50px;
float : left;
list-style : none;
}
#topmenu ul li a{
padding : 0 15px;
color : #8e8e8e;
text-transform : uppercase;
height : 50px;
line-height : 50px;
display : block;
position : relative;
z-index : 100000;
text-decoration : none;
float : none !important;
float : left;
}
#topmenu ul li a:hover{
text-decoration : none;
color : #ccc;
}
#topmenu li#current {
background : url(../images/topmenu_li_current.png) top left repeat-x;
}
#topmenu li#current a {
color : #ccc;
}
#topmenu ul li ul {
width : 14em;
position : absolute;
z-index : 9999;
left : -999em;
clear : left;
}
#topmenu ul li ul ul {
margin : -50px 0 0 14em;
}
#topmenu ul li li {
width : 14em;
background : transparent url(../images/topmenu_li_bg.png);
float : none;
}
#topmenu ul li li a{
text-transform : none;
display : block;
background : none;
}
#topmenu ul li#current li a {
color : #8e8e8e;
}
#topmenu ul li#current li a:hover {
color : #ccc;
}
#topmenu ul li:hover ul ul, #topmenu ul li:hover ul ul ul,
#topmenu ul li.sfhover ul ul, #topmenu ul li.sfhover ul ul ul {
left : -999em;
}
#topmenu ul li:hover ul, #topmenu ul li li:hover ul, #topmenu ul li li li:hover ul,
#topmenu ul li.sfhover ul, #topmenu ul li li.sfhover ul, #topmenu ul li li li.sfhover ul {
left : auto;
}
/*** Titres ***/
h1 {
font-size : 20px;
font-weight : bold;
height : 30px;
}
h2 {
font-size : 16px;
margin : 15px 0 0 0;
}
/*** Articles ***/
.createdby, .published, .create, .modified, .category-name, .hits {
font-style : italic;
}
.article-info {
background: #ddd;
margin: 5px;
padding: 5px;
}
.article-info-term {
font-weight : bold;
}
.actions li {
display : inline;
list-style: none;
}
/*** liste d'articles ou catégories ***/
table.category {
width : 100%;
}
th {
background : #393b3c;
border-right : 1px solid #ccc;
padding : 5px;
color : #8e8e8e;
}
.cat-list-row0 td {
padding : 5px;
}
.cat-list-row1 td {
padding : 5px;
background : #ddd;
}
/*** formulaire ***/
.button, .validate {
width : 96px;
height : 44px;
border : none;
color : #ccc;
background : url(../images/bouton_gris.png) top left no-repeat;
cursor : pointer;
}
.button:hover, .button.sfhover,
.validate:hover, .validate.sfhover {
color : #393b3c;
}
.tip {
background : #ccc;
padding : 5px;
border : 1px solid #393b3c;
}
/*** footer - bas de page ***/
#footer p, #footer div {
text-align : center;
padding : 0;
margin : 0;
}
#footer a {
color : #ccc;
}
#footer {
padding : 10px 0 0 0;
}
/*** module de recherche ***/
#recherche .inputbox {
margin : 0;
padding : 12px 0 0 5px;
float : left;
height : 32px;
width : 200px;
border : none;
background : url(../images/input_search.png) top left no-repeat;
}
#recherche .button {
margin : 0;
padding : 0;
float : left;
height : 44px;
width : 155px;
background : url(../images/button_search.png) top left no-repeat;
}
#recherche label {
display : none;
}
/*** bonus ***/
#breadcrumbs {
position : absolute;
margin : 270px 0 0 10px;
}
span.pathway {
color : #E15215;
}
a.pathway {
text-transform : uppercase;
}
/**** navigation ***/
.pagination {
margin:10px 0 ;
padding:10px 0 10px 0px;
text-align:center;
}
.pagination ul {
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.pagination li {
display:inline;
padding:2px 5px;
}