Customizing Headers with corporate colors and logo

This details how to customize headers with corporate colors and logos

Please note this important considerations -

1.  This process is not supported during upgrades and must be maintained by system administrators at client sites.

2.  Customization should be performed by an experienced system administrator in a development environment and tested prior to making the changes to a production environment.

Details
The standard header is designed to be esthetically pleasing while making good use of colors for ease of use.  There are multiple Maximo skins, including  Classic Skin, Tivoli09 skin and others.

Upon DOM inspection,  multiple layers are used to achieve the desired layout and look.   As you look through the DOM structure, the background color can be set by applying the css class 'titlebarback' at a high level. This class sets the background image to "../images/banner_bkg.png". This background image is what gives the entire header its blue background. Modifying the maximo.css (locations vary depending on skin and screen direction) can be used to remove this background image.

Traversing the DOM further shows another class 'bgnb' is used at a deeper level to apply the swoosh image background ("../images/banner_swoosh.png") that is still displayed.   Removing that image will make it so that the text is not visible as it is white and will blend with the background.

The easiest way to apply a corporate look and feel is to replace these two images. You will need some image creation/editing software and access to the system with the ability to redeploy the server.

Follow the steps below to create and apply your own corporate header. This should be done and tested in a development environment and moved to a production environment after a successful look is achieved.

Steps

1. Locate your images in the folder structure - Within the folder structure there may be multiple image locations that are used for different skins and screen mirroring in bi-directional language scenarios.
   We have 3 general locations for left to right images. They are:
   applications\maximo\maximouiweb\webmodule\webclient\images
   applications\maximo\maximouiweb\webmodule\webclient\skins\mobile\images
   applications\maximo\maximouiweb\webmodule\webclient\skins\tivoli09\images
   Each of these folders also contains an rtl folder which holds the right-to-left version of the images for bi-directionality.
   The mobile folder is used for mobile implementations and can be treated the same as the others.
2. Determine the skin your system is using - In 7.x, prior to 7.5 the default skin uses the css and images in the folders directly under the webclient folder. From 7.5 the tivoli09 skin is used and the corresponding folder will contain the images and css. If you are not sure which skin you are using see the skin images above to help you identify.
3. Locate and backup the images. Navigate to the folder for the skin you are using and backup the two images discussed earlier as well as applink images depending on skin:
   tivoli09 - banner_bkg.png and banner_swoosh.png. banner_swoosh_applink.png and banner_bkg_applink.png
   classic - bg_navbar.jpg and bg_navbar_applink.jpg
4. Modify the images to have the coloring and look you desire - Open the images in the image editor of your choice and edit them as desired. Maintain the size of the images so that the layout will work correctly. (for classic, you should also modify the 'bgnb' class and change the background color to match with your new image)
5. Modify css classes to change text color if desired - Locate the appropriate css file within the same path as your used skin. Find maximo.css and look for the following classes:
   powerwhite, goto, txtappname.
   Change the color of these classes to the text color you desire. For classic skin, the application images can also be hidden by adding css:

   #appimage
   { display: none; }

   
   and link images can be removed by adding

   pwimg { display:none;}

6. Rebuild your ear file and re-deploy.