PrestaOpen

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.