Statistiques

Compteur d'affichages des articles
1329338

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.

 

Header & Footer

2 - Modification pour le header

Pour simplifier les modifications j'ai utilisé les mêmes noms pour tous les fichiers impactés.

2.1 - Logo

J'ai dans un premier temps créé un logo à une taille un peu supérieure à celle du logo d'origine. C'est le fichier /glpi/pics/fd_logo.png.

Le fichier d'origine fait 64 X 41 et le mien 121 X 41.

On modifie dans  /glpi/css/style.css lignes 1411 à 1418 :

div#header div#c_logo {
   position: absolute;
   z-index: 1000;
   width: 64px;
   height: 41px;
   float: left;
   background: url("../pics/fd_logo.png") 0 0 repeat-x;
}

devient

div#header div#c_logo {
   position: absolute;
   z-index: 1000;
   width: 121px;
   height: 41px;
   float: left;
   background: url("../pics/fd_logo.png") 0 0 repeat-x;
}

Il faut aussi décaler le menu vers la droite à cause de la nouvelle longueur du logo.

On modifie dans  /glpi/css/style.css lignes 1275 à 1281 :

div#c_menu {
   height: 41px;
   position: absolute;
   top: 0px;
   z-index: 100;
   left: 45px;
}

deviennent

div#c_menu {
   height: 41px;
   position: absolute;
   top: 0px;
   z-index: 100;
   left: 102px;
}

2.2 - Bandeau du haut

Le fichier correspondant est /glpi/pics/fd_nav1.png. C'est une image avec 3 bandes de couleurs. J'ai modifié les couleurs pour les adapter à mon design.

On modifie dans  /glpi/css/style.css lignes 1190 à 1200 :

div#header {
   background: #f1f4e3 url("../pics/fd_nav1.png") 0 0 repeat-x;
   margin: 0px 10px 10px 10px;
   -moz-border-radius: 0px 0px 8px 8px;
   -webkit-border-radius: 0px 0px 8px 8px;
   border-radius: 0px 0px 8px 8px;
   -moz-box-shadow: 0px 7px 10px #011E3A;
   -webkit-box-shadow: 0px 7px 10px #011E3A;
   box-shadow: 0px 7px 10px #011E3A;
   padding-bottom: 8px;
}

deviennent

div#header {
   background: #cdf89f url("../pics/fd_nav1.png") 0 0 repeat-x;
   margin: 0px 10px 10px 10px;
   -moz-border-radius: 0px 0px 8px 8px;
   -webkit-border-radius: 0px 0px 8px 8px;
   border-radius: 0px 0px 8px 8px;
   -moz-box-shadow: 0px 7px 10px #011E3A;
   -webkit-box-shadow: 0px 7px 10px #011E3A;
   box-shadow: 0px 7px 10px #011E3A;
   padding-bottom: 8px;
}

2.3 Bouton Rechercher

Tous les boutons et icônes vont être changés. Soit vous les dessiner vous même, soit vous les chercher sur le Net.

Pour ma part j'ai trouvé mon bonheur ici : http://icons.mysitemyway.com/category/lime-green-white-pearls-icons/

Il faut ensuite un peu travailler les fichiers pour les mettre à la bonne taille.

Le fichier image concerné est : /glpi/pics/ok2.png.

J'ai retiré le bord ajouté dans /glpi/css/style.css lignes 1257 à 1263 :

div#c_recherche form div#boutonRecherche {
   float: right;
   border: 1px solid #000;
   height: 14px;
   width: 14px;
   overflow: hidden;
}

deviennent

div#c_recherche form div#boutonRecherche {
   float: right;
   height: 24px;
   width: 21px;
   overflow: hidden;
}

2.4 Autres boutons du header

J'ai changé les fichiers images suivants :

  • /glpi/pics/menu_add.png
  • /glpi/pics/menu_search.png
  • /glpi/pics/menu_addtemplate.png
  • /glpi/pics/bookmark.png
  • /glpi/pics/menu_all.png


2.4 Modifications pour les menus

Pour les menus il faut modifier les images /glpi/pics/fd_ssmenu.png, /glpi/pics/fd_nav2.png et /glpi/pics/fd_nav3.png

Et modifier dans /glpi/css/style.css lignes 1302 à 1323 :

ul#menu ul.ssmenu {
   position: relative;
   top: 5px;
   width: 108px;
   border: 1px solid #CC9900;
   background: url("../pics/fd_ssmenu.png") 0 0 repeat;
   display: none;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-box-shadow: 0px 0px 4px #000000;
   -webkit-box-shadow: 0px 0px 4px #000000;
   box-shadow: 0px 0px 4px #000000;	
}

ul#menu ul li {
   list-style: none;
   text-align: center;
   border-bottom: 1px solid #CC9900;
   line-height: 20px;
   font-size: 0.9em;
}

deviennent

ul#menu ul.ssmenu {
   position: relative;
   top: 5px;
   width: 108px;
   border: 1px solid #66a326;
   background: url("../pics/fd_ssmenu.png") 0 0 repeat;
   display: none;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-box-shadow: 0px 0px 4px #000000;
   -webkit-box-shadow: 0px 0px 4px #000000;
   box-shadow: 0px 0px 4px #000000;	
}

ul#menu ul li {
   list-style: none;
   text-align: center;
   border-bottom: 1px solid #66a326;
   line-height: 20px;
   font-size: 0.9em;
}

3 - Modifications pour le Footer

Pour le footer c'est plus simple.

Il suffit de modifier l'image  /glpi/pics/fd_footer.png.

Page de Login Glpi

1 - Page de login

La page de login par défaut est celle-ci :

 Page de login par défaut

 

Cela correspond à l'image /glpi/pics/login_glpi.png.

Image seule

 

Je vous laisse modifier cette image de 600 * 226 Pixels.

 Je ne suis pas un as du graphisme, mais en travaillant raisonnablement, j'ai réussi à sortir cela :

Nouvelle image

 

Il reste quelque retouches à faire.

La couleur du texte doit être changée en blanc, cela se passe dans le fichier : /glpi/css/style.css lignes 1046 à 1057 :

#contenulogin {
   height: 266px;
   width: 600px;
   margin-top:100px;
   margin-left: auto;
   margin-right: auto;
   background:url("../pics/login_glpi.png")  no-repeat;
   font-family : Verdana,Arial,Helvetica,sans-serif;
   font-size : 12px;
   color :#659900;
   font-weight: bold;
}

devient

#contenulogin {
   height: 266px;
   width: 600px;
   margin-top:100px;
   margin-left: auto;
   margin-right: auto;
   background:url("../pics/login_glpi.png")  no-repeat;
   font-family : Verdana,Arial,Helvetica,sans-serif;
   font-size : 12px;
   color :#ffffff;
   font-weight: bold;
}

Dans le même fichier les lignes 1113 à 1129 :

#boxlogin fieldset {
   background-color: transparent;
   border: 2px solid #FFC65D;
   padding-bottom:22px;
}

#boxlogin legend {
   font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
   font-size: 15px;
   font-weight: 700;
   background-color: transparent;
   color :#659900;
}

#boxlogin input {
   border: 1px solid #659900;
}

deviennent

#boxlogin fieldset {
   background-color: transparent;
   border: 2px solid #ffffff;
   padding-bottom:22px;
}

#boxlogin legend {
   font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
   font-size: 15px;
   font-weight: 700;
   background-color: transparent;
   color :#ffffff;
}

#boxlogin input {
   border: 1px solid #ffffff;
}

L'ensemble des couleurs est plus harmonieux.

Il reste à changer le bouton Valider.

Pour ce bouton, on utilise les images /glpi/pics/fond_form.png et /glpi/pics/fond_form_on.png qui sont un dégradé de orange vers blanc et un orange pour le deuxième. Nous changeons les images par un dégradé vert vers blanc et un fond blanc pour le deuxième.

Au final, cela donne ceci : 

Nouvelle version page de login

 

Ainsi que :

Bouton Valider survollé