Change the appearance

theviewer · 2010-11-06 16:06:17

It's possible change the colors of GLPI? Menus, background color, logos, etc..

Allan · 2010-11-07 17:09:34

I saw a theme changer (plugin) a while back, but what I am really looking for is a quick primer on the CSS sheets so I can customize the splash screen, the logos, graphics, etc.

bwm367 · 2010-11-08 19:32:18

Some of the images are stored as... images. You can edit them to fit your needs, I did some for myself a while back. The theme changer plugin that you can download from one of the threads in here changes the default "green" theme to Red and blue.
I haven't looked at or played with any CSS sheets yet though.

sean.tapscott · 2010-11-09 00:36:35

I have, they're scary. One is several megabytes long. Keep in mind that that's several megabytes of just simple text. 0_0.

Probably someone who knew CSS better wouldn't be so overwhelmed, but as a person just searching for hex numbers to change, I had no idea what I was looking at.

bwm367 · 2010-11-09 17:25:10

My biggest issue with the edits I made is that when updating GLPI, you have to make the changes all over again...

Last edited by bwm367 (2010-11-09 17:25:28)

sean.tapscott · 2010-11-09 17:49:41

It would be nice if there was a way to create a custom CSS sheet that would override the default properties with colors that are user defined. If done right, a GUI could even be developed that would define the CSS for you.

That's a lot of work though for just some fancy colors. And you'd still have to recolor the images.

venua · 2010-11-09 21:28:50

theviewer wrote:

It's possible change the colors of GLPI? Menus, background color, logos, etc..

You can find Stileswitcher here

treydock · 2011-06-03 06:33:17

I very recently had to modify the way GLPI looked for my organization to accept it's adoption. The single best recommendation I can give for doing this is to use version control with a development version of your own GLPI install. I maintain a development virtual server and track changes with git. Once I made all my changes to v0.78 I exported them from their branch in git to a patch file. Now on version 0.78.5 it takes about 5 minutes to update GLPI, apply my changes back, verify they still work, and then push them to my live server. Another big help was to take GLPI's images that are gradients and alter them using Paint.NET. I had to create a Windows XP virtual machine just to use that program, but it was well worth it in the end. The last tool you have to get to do this is Firebug. The Firefox version is much better than Chrome's, check it out and with the "inspect" feature it makes finding what to change VERY easy.

EDIT: Wanted to add I thought that GLPI looks just fine. I've always favored functionality over aesthetics, but I had to convince people who make the big expensive decisions with just a quick glance. The alternative was Spiceworks...and it looks great but lacks the immense depth and functionality that GLPI offers. That and it's ad-based.

Also the Stileswitcher plugin linked looks very promising. Some of the more tedious changes I was asked to make were only possible by changing the CSS (such as hiding the horizontal menu in the header).

Here are screenshots from the GLPI install that I have modified.

Modified login http://itscblog.tamu.edu/files/download … _login.png

Modified header section http://itscblog.tamu.edu/files/download … eader2.png

Modified section headers http://itscblog.tamu.edu/files/download … eader1.png

Here's the patch file for CSS changes I made

---
 css/ext-all-glpi.css                |   16 +++++-----
 css/styles.css                      |   57 +++++++++++++++++++++-------------
 inc/display.function.php            |    8 ++--
 lib/extjs/resources/css/ext-all.css |    4 +-
 4 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/css/ext-all-glpi.css b/css/ext-all-glpi.css
index 7619b97..36aec4f 100644
--- a/css/ext-all-glpi.css
+++ b/css/ext-all-glpi.css
@@ -18,12 +18,12 @@ ul.x-tab-strip li.x-tab-edge{float:left;margin:0!important;padding:0!important;b
 .x-tab-strip a,.x-tab-strip span,.x-tab-strip em{display:block;}
 .x-tab-strip a{text-decoration:none!important;-moz-outline:none;outline:none;cursor:pointer;}
 .x-tab-strip-inner{overflow:hidden;text-overflow:ellipsis;}
-.x-tab-strip span.x-tab-strip-text{font:normal 11px Verdana,Arial,Helvetica,sans-serif;color:#659900;white-space:nowrap;cursor:pointer;padding:4px 0;}
+.x-tab-strip span.x-tab-strip-text{font:normal 11px Verdana,Arial,Helvetica,sans-serif;color:#FFFFFF;white-space:nowrap;cursor:pointer;padding:4px 0;}
 .x-tab-strip .x-tab-with-icon .x-tab-right{padding-left:6px;}
 .x-tab-strip .x-tab-with-icon span.x-tab-strip-text{padding-left:20px;background-position:0 3px;background-repeat:no-repeat;}
-.x-tab-strip-over span.x-tab-strip-text{color:#659900;}
+.x-tab-strip-over span.x-tab-strip-text{color:#FFFFFF;}
 .x-tab-strip-active{cursor:default;}
-.x-tab-strip-active span.x-tab-strip-text{cursor:default;color:#659900;font-weight:bold;}
+.x-tab-strip-active span.x-tab-strip-text{cursor:default;color:#FFFFFF;font-weight:bold;}
 .x-tab-strip-disabled .x-tabs-text{cursor:default;color:#aaa;}
 .x-tab-panel-body{overflow:hidden;}
 .x-tab-panel-bwrap{overflow:hidden;}
@@ -32,9 +32,9 @@ ul.x-tab-strip li.x-tab-edge{float:left;margin:0!important;padding:0!important;b
 .x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text{padding-bottom:5px;}
 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right{margin-top:-1px;}
 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right span.x-tab-strip-text{padding-top:5px;}
-.x-tab-strip-top .x-tab-right{background:transparent url(../pics/extjs/tabs/tabs-sprite.gif) no-repeat 0 -51px;padding-left:10px;}
-.x-tab-strip-top .x-tab-left{background:transparent url(../pics/extjs/tabs/tabs-sprite.gif) no-repeat right -351px;padding-right:10px;}
-.x-tab-strip-top .x-tab-strip-inner{background:transparent url(../pics/extjs/tabs/tabs-sprite.gif) repeat-x 0 -201px;}
+.x-tab-strip-top .x-tab-right{background:transparent url(../pics/extjs/tabs/tabs-sprite-itsc3.gif) no-repeat 0 -51px;padding-left:10px;}
+.x-tab-strip-top .x-tab-left{background:transparent url(../pics/extjs/tabs/tabs-sprite-itsc3.gif) no-repeat right -351px;padding-right:10px;}
+.x-tab-strip-top .x-tab-strip-inner{background:transparent url(../pics/extjs/tabs/tabs-sprite-itsc3.gif) repeat-x 0 -201px;}
 .x-tab-strip-top .x-tab-strip-over .x-tab-right{background-position:0 -101px;}
 .x-tab-strip-top .x-tab-strip-over .x-tab-left{background-position:right -401px;}
 .x-tab-strip-top .x-tab-strip-over .x-tab-strip-inner{background-position:0 -251px;}
@@ -56,10 +56,10 @@ ul.x-tab-strip li.x-tab-edge{float:left;margin:0!important;padding:0!important;b
 .x-tab-panel-body{border:1px solid #eeeeee;background:#fff;}
 .x-tab-panel-body-top{border-top:0 none;}
 .x-tab-panel-body-bottom{border-bottom:0 none;}
-.x-tab-scroller-left{background:transparent url(../pics/extjs/tabs/scroll-left.gif) no-repeat -18px 0;border-bottom:1px solid #8db2e3;width:18px;position:absolute;left:0;top:0;z-index:10;cursor:pointer;}
+.x-tab-scroller-left{background:transparent url(../pics/extjs/tabs/scroll-left-itsc1.gif) no-repeat -18px 0;border-bottom:1px solid #8db2e3;width:18px;position:absolute;left:0;top:0;z-index:10;cursor:pointer;}
 .x-tab-scroller-left-over{background-position:0 0;}
 .x-tab-scroller-left-disabled{background-position:-18px 0;opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);cursor:default;}
-.x-tab-scroller-right{background:transparent url(../pics/extjs/tabs/scroll-right.gif) no-repeat 0 0;border-bottom:1px solid #8db2e3;width:18px;position:absolute;right:0;top:0;z-index:10;cursor:pointer;}
+.x-tab-scroller-right{background:transparent url(../pics/extjs/tabs/scroll-right-itsc1.gif) no-repeat 0 0;border-bottom:1px solid #8db2e3;width:18px;position:absolute;right:0;top:0;z-index:10;cursor:pointer;}
 .x-tab-scroller-right-over{background-position:-18px 0;}
 .x-tab-scroller-right-disabled{background-position:0 0;opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);cursor:default;}
 .x-tab-scrolling .x-tab-strip-wrap{margin-left:18px;margin-right:18px;}
diff --git a/css/styles.css b/css/styles.css
index 21b136c..de79f30 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -36,9 +36,10 @@
 body{
     font-family: 'Bitstream Vera Sans', arial, Tahoma, 'Sans serif';
     font-size: 12px;
-    margin: 0;
+    margin: auto;
     padding: 0;
     background: white;
+/*    width: 960px;*/
 }
 
 ul, li, dt, dl, dd, form,img, input{
@@ -105,7 +106,7 @@ small{
 a, a:link {
     font-weight: bold;
     text-decoration: none;
-    color : #659900;
+    color : #2200C1;
     font-size : 11px;
 }
 
@@ -965,10 +966,10 @@ ul#onglet span.fake{
     margin-top:100px;
     margin-left: auto;
     margin-right: auto;
-    background:url("../pics/login_glpi.png")  no-repeat;
+    background:url("../pics/login_glpi-nologo.png")  no-repeat;
     font-family : Verdana,Arial,Helvetica,sans-serif;
     font-size : 12px;
-    color :#659900;
+    color :#FFF;
     font-weight: bold;
 }
 
@@ -1046,7 +1047,7 @@ padding:0;
     font-size: 15px;
     font-weight: 700;
     background-color: transparent;
-    color :#659900;
+    color :#FFF;
 }
 
 
@@ -1115,8 +1116,13 @@ padding:0;
 
 
 /* ################--------------- Header / menu  ---------------#################### */
+/*div#header,div#page,div#footer{
+    width: 960px;
+    margin: auto;
+}*/
+
 div#header{
-    background: url("../pics/fd_nav1.png") 0 0 repeat-x;
+    background: url("../pics/itsc-gradient.png") 0 0 repeat-x;
     margin-bottom:10px;
 }
 
@@ -1128,6 +1134,7 @@ div#c_preference{
     top: 4px;
     font-size: 0.9em;    
     z-index:900;
+    color: white;
 }
 
 div#c_preference ul{
@@ -1143,7 +1150,7 @@ div#c_preference ul li#deconnexion{
 }
 
 div#c_preference a{
-    color: #000;
+    color: #fff;
     text-decoration: none;
     font-size: 0.9em;
 }
@@ -1197,7 +1204,8 @@ div#c_menu{
     position: absolute;
     top: 0px;
     z-index: 10;
-    left: 45px;
+/*    left: 45px;*/
+    margin-left: 40px;
 }
 
 div#c_menu ul#menu{
@@ -1212,11 +1220,11 @@ div#c_menu ul#menu{
 ul#menu a.itemP, ul#menu a.itemP1{
     display: block;
     height: 100%;
-    width: 100%;
+    width: 90%;
     text-align: center;
     text-decoration: none;
-    border-right: 1px solid #9BA563;
-    color: #000;
+    border-right: 1px solid #fff;
+    color: #fff;
 }
 
 ul#menu ul.ssmenu{
@@ -1227,7 +1235,7 @@ ul#menu ul.ssmenu{
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     -o-border-radius: 4px;
-    background: url("../pics/fd_ssmenu.png") 0 0 repeat;
+    background: url("../pics/itsc-ssmenu.png") 0 0 repeat;
     display: none;
 }
 
@@ -1244,7 +1252,7 @@ ul#menu ul li:last-child{
 }
 
 ul#menu ul li a{
-    color: #000;
+    color: #fff;
     text-decoration: none;
     display: block;
     width: 100%;
@@ -1252,7 +1260,7 @@ ul#menu ul li a{
 }
 
 ul#menu ul li a:hover{
-    background: url("../pics/fd_nav2.png") 0 0 repeat;
+    background: url("../pics/itsc-ssmenu-hover.png") 0 0 repeat;
 }
 
 ul#menu li#menu1{
@@ -1333,7 +1341,7 @@ div#header div#c_logo{
     width: 64px;
     height: 41px;
     float: left;
-    background: url("../pics/fd_logo.png") 0 0 repeat-x;
+    background: url("../pics/itsc-logo.png") 0 0 repeat-x;
 }
 
 div#header div#c_logo a{
@@ -1344,10 +1352,11 @@ div#header div#c_logo a{
 }
 
 div#c_ssmenu1{
-    background: url("../pics/fd_nav2.png") 0 0 repeat-x;
+    background: url("../pics/itsc-gradient2v2.png") 0 0 repeat-x;
     height: 24px;
     clear: both;
     font-size: 0.8em;
+    display: none;
 }
 
 div#c_ssmenu1 ul{
@@ -1355,28 +1364,32 @@ div#c_ssmenu1 ul{
     top: 4px;
     left: 0px;
     list-style: none;
+    display: none;
     
 }
 
 div#c_ssmenu1 ul li{
     float: left;
     padding: 0 10px;
+    display: none;
 }
 
 div#c_ssmenu1 ul li a{
     text-decoration: none;
-    color: #666;
+    color: #fff;
+    display: none;
     
 }
 
 div#c_ssmenu1 ul li a:hover{
     text-decoration: underline;
+    display: none;
 }
 
 div#c_ssmenu2{
     position: relative;
     z-index: 5;
-    background: url("../pics/fd_nav3.png") 0 0 repeat-x;
+    background: url("../pics/itsc-gradient3.png") 0 0 repeat-x;
     height: 28px;
     clear: both;
     font-size: 0.9em; 
@@ -1397,7 +1410,7 @@ div#c_ssmenu2 ul li{
 
 div#c_ssmenu2 ul li a{
     text-decoration: none;
-    color: #000;
+    color: #fff;
 }
 
 div#c_ssmenu2  a.here{
@@ -1460,10 +1473,10 @@ div#show_all_menu{
 
 /* ################--------------- Footer  ---------------#################### */
 #footer{
-    background: url("../pics/fd_footer.png") 0 0 repeat-x;
+    background: url("../pics/itsc-footer.png") 0 0 repeat-x;
     font-size: 9px;    
     color :#757575;
-    padding: 3px;
+    padding: 3px; /*- This padding shifted the footer incorrectly when width is 960px */
     margin-top: 200px;
     clear:both;
     
@@ -1473,7 +1486,7 @@ div#show_all_menu{
     
 .copyright {
     font-size: 9px;    
-    color :#757575;
+    color :#fff;
     }    
     
 
diff --git a/inc/display.function.php b/inc/display.function.php
index 768c489..3ceda05 100644
--- a/inc/display.function.php
+++ b/inc/display.function.php
@@ -1211,10 +1211,10 @@ function commonHeader($title,$url='',$sector="none",$item="none",$option="") {
    echo "</a></li>";
 
    /// MENU ALL
-   echo "<li >";
-   echo "<img alt='' src='".$CFG_GLPI["root_doc"]."/pics/menu_all.png' ".
-          "onclick=\"completecleandisplay('show_all_menu')\">";
-   echo "</li>";
+//   echo "<li >";
+//   echo "<img alt='' src='".$CFG_GLPI["root_doc"]."/pics/menu_all.png' ".
+//          "onclick=\"completecleandisplay('show_all_menu')\">";
+//   echo "</li>";
    // check user id : header used for display messages when session logout
    if (getLoginUserID()) {
       showProfileSelecter($CFG_GLPI["root_doc"]."/front/central.php");
diff --git a/lib/extjs/resources/css/ext-all.css b/lib/extjs/resources/css/ext-all.css
index 5d75f83..b1c1401 100644
--- a/lib/extjs/resources/css/ext-all.css
+++ b/lib/extjs/resources/css/ext-all.css
@@ -4,7 +4,7 @@
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
+html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:auto;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
 
 .ext-forced-border-box, .ext-forced-border-box * {
     -moz-box-sizing: border-box;
@@ -6931,4 +6931,4 @@ body.x-body-masked .x-window-plain .x-window-mc {
 
 .x-window-dlg .ext-mb-error {
     background-image:url(../images/default/window/icon-error.gif);
-}
\ No newline at end of file
+}
-- 
1.7.3.4

Last edited by treydock (2011-06-03 06:37:35)

gajendrag · 2011-10-27 14:09:20

Hi treydock,

I have tired the posted css code on glpi portal but didn't work
so will you help me out for the same.

Rgds,
Gajendra

Papik · 2012-04-12 14:24:36

Hi people: I'm willing to pay for a decent gui that enable us to change the colors, fonts, logos, back color, foreground color etc, everything to customize the glpi screen for differents customers.. could someone help me to where should I search for it or where should I post to obtain a relpy for that?
Thanks in Advance,
Papik

elliot01 · 2012-04-13 11:52:40

I also used a combination of Firefox's Firebug and manually editing of GLPI's styles.css and ext-all-glpi.css files.

Once you've documented the changes and done it a couple of times it's pretty easy and straightforward to redo them, following a GLPI upgrade.

I also edit the locale file to rename certain words which aren't translated correctly (at least in our opinion!) or just to fall in-line with internal terminology.

With a bit of such customization GLPI really is superbly received and integrated.

If anyone wants to know the CSS changes applied here, just reply here.

Papik · 2012-04-13 14:18:34

Hi elliot01: Thanks for all your clues. I like your colours , very professional.
As a last resource will try that, but still can't believe that one can't find a decent gui on the glpi forum (I think of it as a tool to help enhance the look and feel of GLPI) to change all of this and be able to see the results on the fly...
Maybe some good soul out there..
Thanks Again...
Any other clues?
Regards,
Papik

maxy2k · 2012-04-17 08:49:34

Hi elliot01,

I very like your colours, do you mind sharing your files?
Thanks in advance ：）

elliot01 · 2012-04-17 15:52:00

Hi folks, I will post the changes as soon as I get a moment. Hopefully today.

destadilla · 2012-04-17 15:55:29

Yeah! You rock! \m/

elliot01 · 2012-04-17 16:15:47

Okay, I have dropped the updated files into the following zip file: http://webmail.hayley-group.co.uk/hosted/misc/glpi.zip.

You will need to unzip and copy the files into the relevant areas on your system - Please backup your originals first!

My linux server's GLPI home directory is /usr/share/glpi. Please adjust the instructions below accordingly if your system config is different.

Please also note that these files and changes are set against GLPI v0.83 (with previous upgrades of GLPI I have noticed some of the CSS seems to move from file to file!).

COPY FILES AS FOLLOWS:

glpi.zip              GLPI SERVER    
\css\*         -->    /usr/share/glpi/css/ 
\pics\*        -->    /usr/share/glpi/pics/

If you require any clarification, or want to know the exact CSS changes, so you can manually make the changes, just let me know.

Best Regards,

Elliot

Last edited by elliot01 (2012-04-17 16:17:34)

elliot01 · 2012-04-17 16:19:30

Of course you will want to drop login_glpi.png into an image editor to add your own logo

destadilla · 2012-04-18 09:10:35

Thanks man. I already edited the login screen, logos and the favicon. The color was the only thing left to be changed. I'll try that later when I get to the office.

destadilla · 2012-04-21 11:42:49

Hey Elliot! I finally figured it out! My GLPI looks different now. Thanks a lot!

Last edited by destadilla (2012-04-21 12:13:58)

acukier · 2013-01-02 23:00:12

I've changed both, the appearnce and company logos for my GLPI!!

Thanks a lot

Alejandro

Dok831 · 2013-05-01 04:18:56

Wow you are perfect elliot01. Thanks

joseluis.teixeira · 2013-05-09 14:36:39

Thank you Elliot!

I just made a clean login, ready for customization.

sadik04 · 2013-05-20 04:25:38

Hi, Elliot

Do you have some more background,color,logos that we can edit.?
Because i try the css code of treydock but i can't edit because some of picture are not upload and his css file its so confusing to edit.

If there's a sample layout you create can you upload sir..

Thank you so much i would appreciate if you reply.

samcro · 2013-06-14 15:26:55

hey elliot,

do the logos have to have a specific size or something? cause I edit the login page *.png with the logo one of our company but the background then stays white. same with the fd_logo - changed, pasted but won´t appear in the front end.

thx in advance

danh · 2013-06-14 18:03:48

It's best to use the same dimensions and image type of the original. The page and css may be formatted for specifics. I have changed many images and have had no issues following this advice.

Of course, on any update release, your images will be overridden. Easy enough to copy mine back in.

Last edited by danh (2013-06-14 18:04:42)

Forum GLPI-Project

Announcement

#1 2010-11-06 16:06:17

Change the appearance

#2 2010-11-07 17:09:34

Re: Change the appearance

#3 2010-11-08 19:32:18

Re: Change the appearance

#4 2010-11-09 00:36:35

Re: Change the appearance

#5 2010-11-09 17:25:10

Re: Change the appearance

#6 2010-11-09 17:49:41

Re: Change the appearance

#7 2010-11-09 21:28:50

Re: Change the appearance

#8 2011-06-03 06:33:17

Re: Change the appearance

#9 2011-10-27 14:09:20

Re: Change the appearance

#10 2012-04-12 14:24:36

Re: Change the appearance

#11 2012-04-13 11:52:40

Re: Change the appearance

#12 2012-04-13 14:18:34

Re: Change the appearance

#13 2012-04-17 08:49:34

Re: Change the appearance

#14 2012-04-17 15:52:00

Re: Change the appearance

#15 2012-04-17 15:55:29

Re: Change the appearance

#16 2012-04-17 16:15:47

Re: Change the appearance

#17 2012-04-17 16:19:30

Re: Change the appearance

#18 2012-04-18 09:10:35

Re: Change the appearance

#19 2012-04-21 11:42:49

Re: Change the appearance

#20 2013-01-02 23:00:12

Re: Change the appearance

#21 2013-05-01 04:18:56

Re: Change the appearance

#22 2013-05-09 14:36:39

Re: Change the appearance

#23 2013-05-20 04:25:38

Re: Change the appearance

#24 2013-06-14 15:26:55

Re: Change the appearance

#25 2013-06-14 18:03:48

Re: Change the appearance

Board footer