Thursday, March 27, 2014

Customizing Headers with corporate colors and logo in Maximo

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.

No comments:

Post a Comment

Maximo Mobile - Receives error "The app does not exist" during data download

  STEPS: 1) Install Maximo Mobile from Google play store app 2) Enter URL 3) Click Log In RESULTS: On the Setting up page, navigator shows “...