Hi Community,

I am having trouble with changing the background colour for the login screen on Maximo 7.6. I am trying to change it from the default colour of dark blue to Orange.

1.
I initially referred to the following tech note: Changing Maximo Login Screen Background Color
As advised, I change the ge_bkgnd.png and ge_login_bkgnd.jpg to have the required colour and reference them accordingly in the login.css file in path:
\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css
I built and redeployed this change. This didn't make any change whatsoever.

I then went one step further to try a manual colour change. I added the highlighted line in the body to the following:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background: #FFF url(../images/ge_bkgnd.jpg) repeat-x top left;
}

2.
I then referred to another technote:
https://www.ibm.com/support/pages/changing-background-color-maximo-login-screen-maximo-76

In my case, we are using 7.6.1.2, therefore I edited the login.css file in the iot18 folder in following path(and confirmed this in the system properties also), 
F:\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css\iot18
I changed the login.css file which initially looked like this.
 body {
background: none !important;
}

body > div {
background: transparent;
}

I changed it to look like this:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background-image: #FFF url(../../images/ge_bkgnd.jpg) repeat-x top left;
background-repeat: repeat-x;
}

body > div {
width: 100%;
background: transparent url(../../images/ge_login_bkgnd.jpg) top center no-repeat;
position: absolute;
}

I built and redeployed this change. This didn't make any change whatsoever either.

I then referred to a youtube video which suggested the same as the last technote mentioned.
Customize the Login Screen for Maximo 7.6

Would greatly appreciate any help on this.

Kind Regards,
Paras

------------------------------
Paras Goel
------------------------------

#AssetandFacilitiesManagement
#Maximo

Hi Paras: It has been a while since I've modified the Maximo login screen and I did it previously with an earlier version of Maximo than v.7.6.1.2 but hopefully I can provide some pointers that may help you achieve what you're trying to do.  I would:

1. Confirm the changes you made are in the re-built and re-deployed EAR file.It should be possible to treat the EAR file like a compressed ZIP file and drill down through the directories to the files you changed and confirm that the modified versions are the ones that got deployed.
2. Launch the login page in your chosen browser and use Developer Tools in the browser to inspect the elements of the login page and view their CSS styling.  Furthermore you can modify the CSS styling of the login page live in your browser using Developer Tools and immediately see if it has the desired effect (e.g. when setting background-color: #FFA500;).  Once you know which properties to set within which elements to customise the login screen to suit your preference you just need to duplicate those changes in the appropriate CSS file.
3. By modifying the url in your browser address bar from the login page (e.g. https://yourmaximodomain.com/maximo/webclient/login/login.jsp?welcome=true) to the path of the CSS and image files you modified (e.g. https://yourmaximodomain.com/maximo/webclient/login/css/login.css) and (https://yourmaximodomain.com/maximo/webclient/login/css/iot18/login.css) and (e.g.https://yourmaximodomain.com/maximo/webclient/login/images/ge_login_bkgnd.jpg).  This way you can ensure your changes to either the CSS files or image files are actually getting deployed.

body > div {
background: #1D3649;
}

to become:

body > div {
background: #FFA500;
}

This changes the majority of the login page for me to an orange background.  From an accessibility standpoint, if you're changing the page background to orange you probably will also want to change the html element's background property to the same (around line 20 of the same CSS) otherwise there's still a blue band at the bottom of the page and perhaps the text colour and the colour of the links to a more visible colour on an orange background, the sign in button colour and the blue bars.  All of these seem feasible through the same approach of inspecting the element in Developer Tools in your browser to determine the element involved, testing modifying the element's CSS styling in the browser then once you have styling that works, duplicate that in the actual CSS file, re-build and re-deploy the EAR and you should be good.  I hope this helps.


​

------------------------------
https://maximo.wiki
------------------------------

Original Message:
Sent: Fri August 13, 2021 09:25 AM
From: Paras Goel
Subject: Changing background colour on login page and banner colour for all applications

Hi Community,

I am having trouble with changing the background colour for the login screen on Maximo 7.6. I am trying to change it from the default colour of dark blue to Orange.

1.
I initially referred to the following tech note: Changing Maximo Login Screen Background Color
As advised, I change the ge_bkgnd.png and ge_login_bkgnd.jpg to have the required colour and reference them accordingly in the login.css file in path:
\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css
I built and redeployed this change. This didn't make any change whatsoever.

I then went one step further to try a manual colour change. I added the highlighted line in the body to the following:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background: #FFF url(../images/ge_bkgnd.jpg) repeat-x top left;
}

2.
I then referred to another technote:
https://www.ibm.com/support/pages/changing-background-color-maximo-login-screen-maximo-76

In my case, we are using 7.6.1.2, therefore I edited the login.css file in the iot18 folder in following path(and confirmed this in the system properties also), 
F:\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css\iot18
I changed the login.css file which initially looked like this.
 body {
background: none !important;
}

body > div {
background: transparent;
}

I changed it to look like this:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background-image: #FFF url(../../images/ge_bkgnd.jpg) repeat-x top left;
background-repeat: repeat-x;
}

body > div {
width: 100%;
background: transparent url(../../images/ge_login_bkgnd.jpg) top center no-repeat;
position: absolute;
}

I built and redeployed this change. This didn't make any change whatsoever either.

I then referred to a youtube video which suggested the same as the last technote mentioned.
Customize the Login Screen for Maximo 7.6

Would greatly appreciate any help on this.

Kind Regards,
Paras

------------------------------
Paras Goel
------------------------------
#Maximo
#AssetandFacilitiesManagement

Hi,

Thanks a lot for your help! After using the inspect element, I realized that I was changing the background colour on the wrong line.

I was making the change on line 6, but I was supposed to make the change further down on line 80.

After making the change, it worked without any issues. Thanks for your help!

Kind Regards,
Paras

------------------------------
Paras Goel
------------------------------

Original Message:
Sent: Sun August 15, 2021 12:36 PM
From: Maximo Wiki
Subject: Changing background colour on login page and banner colour for all applications

Hi Paras: It has been a while since I've modified the Maximo login screen and I did it previously with an earlier version of Maximo than v.7.6.1.2 but hopefully I can provide some pointers that may help you achieve what you're trying to do.  I would:

1. Confirm the changes you made are in the re-built and re-deployed EAR file.It should be possible to treat the EAR file like a compressed ZIP file and drill down through the directories to the files you changed and confirm that the modified versions are the ones that got deployed.
2. Launch the login page in your chosen browser and use Developer Tools in the browser to inspect the elements of the login page and view their CSS styling.  Furthermore you can modify the CSS styling of the login page live in your browser using Developer Tools and immediately see if it has the desired effect (e.g. when setting background-color: #FFA500;).  Once you know which properties to set within which elements to customise the login screen to suit your preference you just need to duplicate those changes in the appropriate CSS file.
3. By modifying the url in your browser address bar from the login page (e.g. https://yourmaximodomain.com/maximo/webclient/login/login.jsp?welcome=true) to the path of the CSS and image files you modified (e.g. https://yourmaximodomain.com/maximo/webclient/login/css/login.css) and (https://yourmaximodomain.com/maximo/webclient/login/css/iot18/login.css) and (e.g.https://yourmaximodomain.com/maximo/webclient/login/images/ge_login_bkgnd.jpg).  This way you can ensure your changes to either the CSS files or image files are actually getting deployed.

In your case, because you're using the iot18 skin and not the earlier tivoli skins I don't think editing ge_bkgnd.jpg will have the desired effect because that image is no longer used in the skin.  I could be wrong but based on what I see of the iot18 skin on the IBM Preview site login page, you should only need to modify the CSS and no image files (provided you're not wanting to change either the Maximo icon or the IBM logo also).  Following point #2 above I can see that login.jsp has two CSS stylesheets referenced in the <head> element of the page.  "css/login.css" and "css/iot18/login.css".  Looking at the styles for the page in Developer Tools I see a style for "body > div" with the property "background: transparent url(../images/ge_login_bkgnd.jpg) etc" and a line through it.  This indicates that CSS (in "css/login.css) is being overridden elsewhere (by the CSS in "css/iot18/login.css") so we should only need to modify the "css/iot18/login.css" file around line 80 to change this:

body > div {
background: #1D3649;
}

to become:

body > div {
background: #FFA500;
}

This changes the majority of the login page for me to an orange background.  From an accessibility standpoint, if you're changing the page background to orange you probably will also want to change the html element's background property to the same (around line 20 of the same CSS) otherwise there's still a blue band at the bottom of the page and perhaps the text colour and the colour of the links to a more visible colour on an orange background, the sign in button colour and the blue bars.  All of these seem feasible through the same approach of inspecting the element in Developer Tools in your browser to determine the element involved, testing modifying the element's CSS styling in the browser then once you have styling that works, duplicate that in the actual CSS file, re-build and re-deploy the EAR and you should be good.  I hope this helps.


​

------------------------------
https://maximo.wiki

Original Message:
Sent: Fri August 13, 2021 09:25 AM
From: Paras Goel
Subject: Changing background colour on login page and banner colour for all applications

Hi Community,

I am having trouble with changing the background colour for the login screen on Maximo 7.6. I am trying to change it from the default colour of dark blue to Orange.

1.
I initially referred to the following tech note: Changing Maximo Login Screen Background Color
As advised, I change the ge_bkgnd.png and ge_login_bkgnd.jpg to have the required colour and reference them accordingly in the login.css file in path:
\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css
I built and redeployed this change. This didn't make any change whatsoever.

I then went one step further to try a manual colour change. I added the highlighted line in the body to the following:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background: #FFF url(../images/ge_bkgnd.jpg) repeat-x top left;
}

2.
I then referred to another technote:
https://www.ibm.com/support/pages/changing-background-color-maximo-login-screen-maximo-76

In my case, we are using 7.6.1.2, therefore I edited the login.css file in the iot18 folder in following path(and confirmed this in the system properties also), 
F:\IBM\SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\login\css\iot18
I changed the login.css file which initially looked like this.
 body {
background: none !important;
}

body > div {
background: transparent;
}

I changed it to look like this:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0px;
padding: 0px;
background-color: #FFA500;
background-image: #FFF url(../../images/ge_bkgnd.jpg) repeat-x top left;
background-repeat: repeat-x;
}

body > div {
width: 100%;
background: transparent url(../../images/ge_login_bkgnd.jpg) top center no-repeat;
position: absolute;
}

I built and redeployed this change. This didn't make any change whatsoever either.

I then referred to a youtube video which suggested the same as the last technote mentioned.
Customize the Login Screen for Maximo 7.6

Would greatly appreciate any help on this.

Kind Regards,
Paras

------------------------------
Paras Goel
------------------------------
#AssetandFacilitiesManagement
#Maximo

Awesome, I'm glad to hear that Paras.

------------------------------
--------------------------
Maximo Wiki
https://maximo.wiki
--------------------------
------------------------------

#Maximo
#AssetandFacilitiesManagement