PrestaOpen

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.