本文为转载:
原文标题: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
- 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.
- 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.
- 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
- 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)
- 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 addingpwimg { display:none;}
- Rebuild your ear file and re-deploy.