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.