4 - Modifications pour le Corps de page
4.1 - Page de récapitulation après login
Pour modifier l'aspect de la première page qui vient juste après le login, il faut modifier l'image /glpi/pics/fond-central.png.
Puis modifier dans /glpi/css/style.css lignes 363 à 381 :
.tab_cadre_central { margin: 0 auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border: 1px solid #bbbbbb; z-index:1; text-align: left; font-size: 11px; width:950px; /* background-color: #FFF4DF; */ background : url("../pics/fond-central.png") repeat-x top right ; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 2px 5px #666; -webkit-box-shadow: 0px 2px 5px #666; box-shadow: 0px 2px 5px #666; }
deviennent
.tab_cadre_central { margin: 0 auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border: 1px solid #66A326; z-index:1; text-align: left; font-size: 11px; width:950px; /* background-color: #FFF4DF; */ background : url("../pics/fond-central.png") repeat-x top right ; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 2px 5px #666; -webkit-box-shadow: 0px 2px 5px #666; box-shadow: 0px 2px 5px #666; }
Il faut aussi modifier la couleur des boutons :
.tab_cadre th, .tab_cadre_fixe th, .tab_cadre_fixehov th, .tab_cadrehov th, .tab_cadrehov_pointer th, .tab_cadre_report th { font-size: 12px; font-weight: bold; background-color: #e1cc7b; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; padding: 2px; /*background: url("./pics/fond_th.png") repeat-x; border-bottom:1px solid #cccccc; padding: 2px;*/ }
devient :
.tab_cadre th, .tab_cadre_fixe th, .tab_cadre_fixehov th, .tab_cadrehov th, .tab_cadrehov_pointer th, .tab_cadre_report th { font-size: 12px; font-weight: bold; background-color: #cdf89f; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; padding: 2px; /*background: url("./pics/fond_th.png") repeat-x; border-bottom:1px solid #cccccc; padding: 2px;*/ }
Il faut aussi modifier l'image /glpi/pics/warning.png.
Pour les onglets, mes compétences en graphisme ne me permettent pas de modifier les fichiers images qui se trouvent dans /glpi/pics/extjs/tabs.
4.2 Bandeau des filtres
Changeons la couleur du fond dans /glpi/css/style.css lignes 500 à 502 :
.tab_bg_1 { background-color: #f2f2f2; }
deviennent
.tab_bg_1 { background-color: #e7ffce; }
Il faut ensuite modifier les icônes suivantes :
- /glpi/pics/plus.png
- /glpi/pics/meta_plus.png
- /glpi/pics/showdeleted_no.png
- /glpi/pics/showdeleted.png
- /glpi/pics/bookmark_record.png
- /glpi/pics/reset.png
Suivant la taille de vos icônes, il sera peut-être nécessaire de modifier le fichier /glpi/inc/search.class.php ligne 1685 :
echo "<td width='150px'>";
devient
echo "<td width='200px'>";
Cela donne au final :
4.3 Bandeau d'exportation
Changeons la couleur du fond dans /glpi/css/style.css lignes 508 à 510 :
.tab_bg_2 { background-color: #f2f2f2; }
deviennent
.tab_bg_2 { background-color: #e7ffce; }
Il faut aussi modifier l'image /glpi/pics/greenbutton.png.
On peux aussi changer la couleur du bord, c'est dans /glpi/css/style.css lignes 551 à 560 :
.tab_cadre_pager { margin: 0 auto; text-align:center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border: 1px solid #cccccc; font-size:10px; width:950px; }
deviennent
.tab_cadre_pager { margin: 0 auto; text-align:center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border: 1px solid #66A326; font-size:10px; width:950px; }
Au final :
4.4 Tableaux
Les modifications précédentes ont déjà bien changé l'interface.
Il faut changer la couleur au survol du tableau. C'est dans /glpi/css/style.css lignes 464 à 466 :
.tab_cadrehov tr:hover, .tab_cadre_fixehov tr:hover { background-color: #FFF4DF; }
deviennent
.tab_cadrehov tr:hover, .tab_cadre_fixehov tr:hover { background-color: #cccccc; }
Il faut ensuite modifier les images suivantes :
- /glpi/pics/options_search.png
- /glpi/pics/puce-up.png
- /glpi/pics/puce-down.png
Cela donne au final :
4.5 - Fenêtre des options de recherche
La fenêtre d'options se présente comme cela maintenant :
Je ne sais toujours pas comment modifier les onglets, mais cela n'est pas gênant.
Il faut modifier les images suivantes :
- /glpi/pics/puce-up2.png
- /glpi/pics/puce-delete2.png
- /glpi/pics/puce-down2.png
Au final :
4.6 - Fiches
Dans les fiches nous avons 2 images à changer :
- /glpi/pics/aide.png
- /glpi/pics/add_dropdown.png
A l"usage, il apparaît que les lignes grises ne soient pas assez visibles.
Nous changeons cela dans /glpi/css/style.css lignes 396 à 407 :
.tab_cadre_fixe, .tab_cadre_fixehov { margin: 0 auto 10px auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; /*border: 1px solid #cccccc;*/ background: #f2f2f2; z-index:1; text-align: left; font-size: 11px; width:950px; }
deviennent
.tab_cadre_fixe, .tab_cadre_fixehov { margin: 0 auto 10px auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; /*border: 1px solid #cccccc;*/ background: #cdf89f; z-index:1; text-align: left; font-size: 11px; width:950px; }
4.7 - Bandeau actions
Il faut modifier l'image /glpi/pics/arrow_left.png.
Ce qui donne :
4.8 Autres images
Nous devons modifier les images suivantes :
- /glpi/pics/actualiser.png
- /glpi/pics/menu_add_off.png
- /glpi/pics/menu_search_off.png
- /glpi/pics/menu_config.png
- ....
Il faut reprendre toutes les images pour les adapter à votre ambiance graphique.