Statistiques

Compteur d'affichages des articles
1095491

Corps des pages

4 - Modifications pour le Corps de page

4.1 - Page de récapitulation après login

Origine

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.

Au final

4.2 Bandeau des filtres

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 :

Bandeau des filtres final

 4.3 Bandeau d'exportation

Bandeau d'exportation d'origine

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 :

Bandeau d'exportation final

4.4 Tableaux

Tableau d'origine

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 :

Tableaux au final

 4.5 - Fenêtre des options de recherche

La fenêtre d'options se présente comme cela maintenant :

Fenêtre d'options intermédiaire

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 :

Fenêtre d'options 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

Bandeau Actions d'origine

Il faut modifier l'image /glpi/pics/arrow_left.png.

Ce qui donne :

Nouveau design

 

 

 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.