eClient 101 Customization and Integration

220 eClient 101 Customization and Integration

9.4 Changing background image on eClient

A common change to the look and feel of the eClient is changing the logo in the

background of the eClient windows to a background specific to the project or your

company.

Since many of the examples in this redbook are created for the XYZ Insurance

company that is provided by the Content Manager sample documents, we create

a background JPG file for the eClient for the XYZ Insurance company.

Open the eclient82.css file normally located in the c:\Program

Files\IBM\cmEClient\installedApp\IBM_eClient_82.ear\eclient82.war directory.

Notice that it uses several different background JPG files as shown in

Example 9-3.

Example 9-3 eclient82.css code snippet

/* body - For Logon screen */

.BODYLOGON {

background : White;

padding-top : 0px;

padding-left : 0px;

background-image : url(icons/logon_bk.jpg);

}

/* body - Home page or Action Page */

.BODYHOME {

background : White;

padding-top : 0px;

padding-left : 0px;

background-image : url(icons/home_bk.jpg);

}

/* body - For Frame pages background */

.BODYMINI {

background : White;

padding-top : 0px;

padding-left : 0px;

background-image : url(icons/mini_bk.jpg);

background-repeat : no-repeat;

}

If you want to customize the background images for your company or customer,

make a copy of the original logon_bk.jpg, home_bk.jpg, and mini_bk.jpg files.

and modify them to include your customized logo.

Chapter 9. Customizing look and feel using style sheets 221

Here are some tips for modifying these files:

򐂰 Keep the graphic dimensions similar.

When modifying these files, be sure not to change the overall dimensions of

the graphics in the files. The JSPs are designed to be used with graphics in

the approximate shape of the samples. If the shape of the graphics is

changed, you may need to change the JSPs so that the text and fields

generated in the HTML do not overlay the graphics.

򐂰 Keep the color scheme the same.

The eClient uses a color scheme based on blue and white. If you use the

same color scheme as the original background, it will look good with the rest

of the eClient. If you want to change the overall color scheme of the eClient,

you need to modify the colors specified elsewhere in the CSS file.

Once you have created the new JPG files, put them in the eclient82.war\icons

directory and modify the eclient81.css file to specify the new JPG files (see the

snippet from the CSS file above) instead of the old ones. Restart the eClient

WebSphere application and the new graphics should be displayed when you log

on to the eClient.

Figure 9-4 shows an example of the new eClient logon window using the

customized XYZ Insurance company logos supplied with this redbook.

Figure 9-4 XYZ company logon window with customized graphics

222 eClient 101 Customization and Integration

Figure 9-5 shows an example of the new eClient main window using the

customized XYZ Insurance company logos supplied with the redbook.

Figure 9-5 XYZ company home window with customized graphics

Figure 9-6 shows an example of the new eClient search window using the

customized XYZ Insurance company logos supplied with the redbook.

Figure 9-6 XYZ company search window with customized graphics

Chapter 9. Customizing look and feel using style sheets 223

For instructions on how to download samples provided in this redbook, refer to

Appendix B, “Additional material” on page 465 for details.

224 eClient 101 Customization and Integration