根據自己公司的風格客戶化MAXIMO的Headers

本文為轉載：

原文標題：Customizing Headers with corporate colors and logo

原文地址：http://www.ibm.com/developerworks/wikis/display/maximo/Customizing+Headers+with+corporate+colors+and+logo

時間關係，就不進行翻譯了，呵呵。

------------------------------------------------------------------------------------

The standard header is designed to be esthetically pleasing while making good use of colors for ease of use. In the image below we see the 7.x out of box header.

    Classic Skin:
    
 
    Tivoli09 skin:
    

Upon DOM inspection we see that there are multiple layers used to achieve the desired layout and look. As we look through the DOM structure we find that the background color is 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 as seen
in the following image:

    
 
Traversing the DOM further shows us that another class 'bgnb' is used at a deeper level to apply the swoosh image background ("../images/banner_swoosh.png") that we still see. 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 acheived.

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.