Bookshelf Home | Contents | Index | Search | PDF

Developing and Deploying Siebel eBusiness Applications > Modifying the Look and Feel of the Web Client >

Modifying Button Styles

---

Most buttons are similar to tabs in that the graphic elements are independent of the text element. Graphics are stored as image files and text is stored in the Siebel repository. This allows you to modify text without having to modify the button, or modify the button without modifying the text.

NREC's corporate Web site contains square buttons rather than buttons with rounded sides. NREC wants to modify the default style of the buttons so that the buttons are consistent with the rest of their Web site. This type of modification is typically done by a graphic designer. Figure 36 shows what the buttons look like before and after the design work.

Figure 36. Button Images

To modify button images

Navigate to the directory that contains button images.

root_directory\PUBLIC\language_code\IMAGES\BTTNS

Change the shape of standard buttons by modifying the following files:
dccbtn_opn_d.gif
dccbtn_mid.gif
dccbtn_cls_d.gif

NOTE:  The shape of standard buttons for employee applications are btn_opn_d.gif and btn_cls_d.gif.

Modify the following selectors in the Minibutton section of the cascading style sheet (dCCmain.css) as shown below:

.minibutton {}
.minibuttonOn { font-size: 8pt; color: white; text-decoration:none; }
.minibuttonOn A,
.minibuttonOn A:link,
.minibuttonOn A:visited,
.minibuttonOn A:hover
{ font-size: 8pt; color: #000000; text-decoration:none; }

.minibuttonOff,
.minibuttonOff A,
.minibuttonOff A:visited,
.minibuttonOff A:hover
{ font-size: 8pt; color: #999999;text-decoration:none; }

Save the files and move them to the appropriate directory on your test machine.

When you open your application, the modified buttons appear with black text as defined in the style sheet.

NOTE:  There are some buttons that consist of a single image. These buttons have an icon affixed directly to the button face. These buttons do not use the leftcap and rightcap images. Instead, the shape is encoded into the button image and stored as a single image. An example of this type of button is the more button (more.gif).

Bookshelf Home | Contents | Index | Search | PDF