Tuesday, March 11, 2008

Customizing the TEP Browser Client

Want to enhance the ITM experience?
Or perhaps place a corporate stamp on the ITM Interface?

Customized TEP

Read on to learn how to modify the Tivoli Enterprise Portal HTML files to customize the browser client.

The two images at the top of the browser portal client are specified in two HTML files located in the CNB directory under the ITM installation directory. The image on the right is specified by the bannerimage.html while the image on the left in the cnplogo.html file.
For example, on a default install on Windows the two files are:


The bannerimage.html file actually contains comments that describe how to modify the banner image. The basic process is to change the HREF attribute of the A tag to point to a different URL and change the SRC attribute of the IMG tag. Pretty simple. The instructions also suggest changing the WIDTH and HEIGHT attributes to match the size of your new image, but I found that larger images require changing the frame size in the parent HTML file and larger images take up too much screen real estate. If you leave the size attributes unchanged, your image will be scaled automatically.

<A HREF="http://www.gulfsoft.com" TARGET="_blank"><IMG SRC="HeaderEye.gif" width="202" height="28" ALIGN="RIGHT"
BORDER="0" ALT="http://www.gulfsoft.com"></A>

I would also recommend changing the background color so that it blends with the new image. This is accomplished using the BGCOLOR or STYLE attribute of the BODY tag. In my example I used the STYLE attribute to use a background gradient. This is a Microsoft/IE only technique but since the TEP browser only works in IE, there is no harm (for now).
<BODY style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#0000CC',startColorstr='#FFFFFF',gradientType='1'">

Follow the same method to modify the cnplogo.html file. In my example I changed the background color to white:
and changed the image to <IMG SRC="gulfbreeze_blue_logo2_1.jpg" WIDTH="167" HEIGHT="28">

The hardest part of this process was selecting the images.

No comments: