Developing and Deploying Siebel Business Applications > Modifying the Look and Feel of the Web Client >
Modifying Applet Colors
There are three major applet styles in your Siebel application: Parent, Child, and Grandchild. The applet styles define the color of the tab that appears at the top of the applet and the color of the control bar where applet-level menus and buttons appear. In the cascading style sheet, the selectors for each applet style are:
- AppletStyle1. The selector for parent applet style.
- AppletStyle3. The selector for child applet style.
- AppletStyle7. The selector for grandchild applet style.
Each applet style is defined by sub-elements To modify the appearance of each applet style, you modify the definitions for the following subelements.
- AppletButtons. The bar where applet buttons appear.
- AppletBorder. The border around the content of the applet.
- AppletBack. The background color of the applet content.
- AppletTitle. The area where the applet title appears.
To modify the applet color scheme
- Open dCCmain.css.
- Locate the following selectors for parent style applets and modify the attributes as shown in the following table.
|
|
|
AppletStyle1.AppletButtons |
Background-color |
#3366CC |
AppletStyle1.AppletBorder |
Background-color |
#3366CC |
AppletStyle1 .AppletTitle, AppletStyle1 TD.AppletTitle A, AppletStyle1 TD.AppletTitle A:visited, AppletStyle1 TD.AppletTitle A:hover |
Background-color |
#3366CC |
Color |
#FFFFFF |
- Locate the following child applet selectors and modify the attributes as shown in the following table.
|
|
|
AppletStyle3 .AppletButtons |
Background-color |
#BDD3FF |
AppletStyle3 .AppletBorder |
Background-color |
#BDD3FF |
AppletStyle3 .AppletTitle, AppletStyle3 TD.AppletTitle A, AppletStyle3 TD.AppletTitle A:visited, AppletStyle3 TD.AppletTitle A:hover |
Background-color |
#BDD3FF |
- Locate the following grandchild applet selectors and modify the attributes as shown in the following table.
|
|
|
AppletStyle7 AppletButtons |
Background-color |
#BDD3FF |
AppletStyle7 AppletBorder |
Background-color |
#BDD3FF |
AppletStyle7 .AppletTitle, AppletStyle7 TD.AppletTitle A, AppletStyle7 TD.AppletTitle A:visited, AppletStyle7 TD.AppletTitle A:hover |
Background-color |
#BDD3FF |
Color |
#003399 |
- Save your changes and move the file to your test machine.
- Clear your browser's cache directory and then open the Siebel application to be tested.
The background color scheme on parent and child applets reflects the changes.
Figure 31 shows the modified applet color scheme.
|