Personnaliser un thème

Fichier default.css

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 04/07/2014 à 19h48
Table des matières
  1. Introduction
  2. Le fichier default.css
  3. Le contenu
    1. Titres des tableaux
    2. Les blocs
    3. Les menus dynamiques

Introduction



Le fichier default.css contient des classes destinées à tout le site, aux titres des mini-modules par exemple, ou des menus. Les classes qui y sont rattachées n'ont pas forcément besoin d'être personnalisées, mais si cependant vous désirez le faire, suivez le reste de l'article.

Le fichier default.css



Ce fichier ne fait pas partie de votre thème, il est contenu dans le template Default.

Il est important de noter que toutes modification dans le fichier default.css aura une incidence sur l'ensemble de votre site web.

Le contenu



Le default.css contient les classes suivantes :


Titres des tableaux



Code CSS : 
.row_priority_very_high {
    text-align: center;
    background: #F3A29B !important;
    color: #ffffff !important;
    font-weight: bold !important;
}
 
.row_priority_high {
    text-align: center;
    background: #FFD5D1 !important;
}
 
.row_priority_medium {
    text-align: center;
    background: #F5D5C6 !important;
}
 
.row_priority_low {
    text-align: center;
    background: #ECDBB7 !important;
}
 
.row_priority_very_low {
    text-align: center;
    background: #FFFFFF !important;
}


En gros, on centre tous les titres et on leur affecte une couleur selon la priorité qui leur est assignée.


Les blocs



Code CSS : 
.fieldset_content {
    width: 95%;
    margin: auto;
    margin-top: 20px;
}
 
div.block_title span {
    border: 1px solid;
    padding: 2px 8px;
    padding: 1px 0;
    vertical-align: middle;
    position: relative;
    margin-top: -0.4em;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.2em;
}
 
div.block_title {
}
 
div.block_content {
    width: 95%;
    margin: auto;
    margin: 20px auto;
    padding: 6px;
    border: 1px solid;
}
 
div.block_content ul {
    padding-left: 20px;
}


Ceci définit l'aspect général des blocs ne faisant pas partie des modules, par exemple dans l'administration.


Les menus dynamiques



Enfin, tout le reste contient les classes utilisées afin de mettre en forme les menus dynamiques (horizontal et vertical déroulant). Hormis les couleurs, il vaut mieux ne pas trop y toucher, afin d'éviter d'avoir des menus sans dessus-dessous :

Code CSS : 
/*Menu dynamique des liens
--------------------------------------*/
.dynamic_menu {
    position:relative;
    z-index:100;
}
 
.dynamic_menu ul {
    margin:0;
    padding:0;
    border:none;
    font-weight:bold;
    list-style:none;
}
 
.dynamic_menu li {
    position:relative;
    float:left;
    display:inline;
}
 
.dynamic_menu li.vertical {
    display:block;
    float:none;
    margin-bottom:15px;
}
 
/* Lien du menu */
.dynamic_menu h5 {
    color:#0578CC;
    text-align:center;
    background:#F2F7FB;
    border:1px solid #C4CED6;
    padding:4px 6px;
    font-weight:bold;
    font-size:12px;
}
 
.dynamic_menu h5:hover {
    color:#01528D;
    background:#E4F0F9;
    cursor:default;
}
 
/* Séparateur */
.dynamic_menu ul li.separator {
    background:#104069;
    height:2px;
}
 
.dynamic_menu ul li.extend div a{
    padding-left:0;
    padding-right:0;
}
 
/* Case du menu */
.dynamic_menu li ul {
    visibility:hidden;
    position:absolute;
    border:1px solid #104069;
}
 
.dynamic_menu li.vertical ul {
    top:0;
    margin-left:150px;
}
 
.dynamic_menu li li {
    clear:both;
    color:#0578CC;
    background:#FFFFFF url(images/bgmenu.png) repeat-y;
    display:block;
    width:169px;
}
 
.dynamic_menu li li span {
    color:#0578CC;
    font-size:10px;
    text-decoration:none;
    padding-left:32px;
    width:133px;
    display:block;
    white-space:nowrap;
    margin:auto;
    padding-top:6px;
    padding-bottom:6px;
    background-repeat:no-repeat;
    background-position:5px;
}
 
.dynamic_menu li li a {
    color:#0578CC;
    font-size:10px;
    text-decoration:none;
    padding-left:32px;
    width:133px;
    display:block;
    white-space:nowrap;
    margin:auto;
    padding-top:6px;
    padding-bottom:6px;
    background-repeat:no-repeat;
    background-position:5px;
}
 
.dynamic_menu li li a:hover {
    background:#D7EDFA;
    background-repeat:no-repeat;
    background-position:5px;
    border:1px solid #0578CC;
    padding-top:5px;
    padding-bottom:5px;
    cursor:pointer;
}
 
/* Niveau 2 */
.dynamic_menu li li ul {
    visibility:hidden;
    top:-1px;
    left:100%;
    z-index:101;
}
 
/* Menu Vertical - Scrolling */
ul.vertical_scrolling_menu li {
    /*list-style: none;*/
    padding-left: 5px;
    padding-right: 5px;
}
 
ul.vertical_scrolling_menu li ul {
    /*list-style: none;*/
    margin-left: 155px;
}
 
ul.vertical_scrolling_menu li.first_level {
    padding-left: 20px;
}
 
/* Menu Horizontal - Scrolling */
ul.horizontal_scrolling_menu li {
    display: inline;
    padding-left: 0px;
    padding-right: 5px;
}
 
ul.horizontal_scrolling_menu li a{
    margin-left: 6px;
    padding-top:6px;
    padding-bottom:6px;
}
 
ul.horizontal_scrolling_menu li.first_level {
    padding-left: 20px;
}
 
/* Menu Horizontal */
div.menu_horizontal {
    padding: 10px;
}
 
ul.menu_horizontal {
 
}
 
ul.menu_horizontal li {
    display: inline;
}
 
/* Menu Vertical */
h3.menu_vertical_0 {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: -2px;
    padding-bottom: 2px;
}
 
ul.menu_vertical a {
    color: #445766;
}
 
ul.menu_vertical {
    text-align: left;
}
 
ul.menu_vertical li {
    margin-top: 3px;
    margin-left: 10px;
    list-style: none;
    margin-left: 10px;
}
 
ul.menu_vertical li span {
    font-size: 11px;
    font-weight: bold;
}
 
ul.menu_vertical_0 {
 
}
 
ul.menu_vertical li_0 {
 
}
 
ul.menu_vertical_0 li a,ul.menu_vertical_0 li span {
    color: #334455;
}
 
ul.menu_vertical_1 {
 
}
 
ul.menu_vertical_1 li {
 
}
 
ul.menu_vertical_1 li a,ul.menu_vertical_1 li span {
    color: #445566;
}
 
ul.menu_vertical_2 {
 
}
 
ul.menu_vertical_2 li {
    font-style: italic;
}
 
ul.menu_vertical_2 li a,ul.menu_vertical_2 li span {
    color: #556677;
}
 
ul.menu_vertical_3 {
 
}
 
ul.menu_vertical_3 li {
    font-style: normal;
}
 
ul.menu_vertical_3 li a,ul.menu_vertical_3 li span {
    color: #778899;
    font-size: 80%;
}