Sun Java System Communications Express 6 2005Q4 Customization Guide

Customizing Style Sheets

In Address Book, style sheets play a significant role in the manner in which the UI is rendered in terms of look and feel as many items that are displayed in Address Book are associated with style sheets. Hence, the look and feel of Address Book pages and pop ups can be customized by modifying these style sheets.

These style sheets are defined in a CSS file which is included using the <link> HTML tag in the HTML <head> section of XSL files. These are referenced by assigning a 'class' attribute of HTML tags.

Example 7–6 shows the class attribute using HTML tags.

Example 7–6 Class attribute of HTML tags

    <td class="TdActTdLst">......</td>

Example 7–7 shows the class attribute using XSL tags.

Example 7–7 Class attribute of XSL tags

    <xsl:variable name="css-class" select="'TdActTdLst'"/>
   ....
    <td>
       <xsl:attribute name="class">
          <xsl:value-of select="$css-class"/>
      </xsl:attribute>
    ...
    </td>

The Address Book has two separate CSS files for IE and Netscape. These files exist under <uwcinstall>/absimx and are named as,

ab_css_ie5win.css for IE
ab_css_ns6up.css for Netscape

What can be Customized in Style Sheets

You can change the definition of an existing style sheet. In this case, you need not change the class attribute reference.
You can add new style sheet definitions and change the class attribute reference for the desired HTML tag in XSL files.

1. Example of changing the definitions of an existing style sheet:

The definition of a primary button display is 'Btn1' which has the following definition in the CSS file.

Example 7–8 shows the code before changing the definition of a primary button display ”Btnl’

Example 7–8 Before changing the definition of a primary button display ”Btnl’

.Btn1 {background:#594fbf;color:
	#FFF;font-weight:bold;padding:2px 0px;margin:
0px 0px 1px 0px;border:0px none #000; }

Displaying User Defined Header Fields shows how the class is used in the XSL file for the ”Close’ button.

Example 7–9 Class used in the XSL file for the ”Close’ button

<input class="Btn1" id="close" onblur="if (this.disabled==0) 
this.className='Btn1'" onmouseover="if (this.disabled==0) 
this.className='Btn1Hov'" onfocus="if (this.disabled==0) 
this.className='Btn1Hov'" onclick="parent.close()" tabIndex="1" 
onmouseout="if (this.disabled==0) this.className='Btn1'" 
type="button" name="close" value="Close">

Example 7–10 shows the code after changing the definition of a primary button display.

Example 7–10 After changing the definition of a primary button display ”Btnl’

.Btn1 {
			background:#fffff;color:#000;
			font-weight:bold;padding:2px 0px;
			margin:0px 1px 1px 0px;
			border:0px none #000;
 }

2. Example of adding new style sheet definitions and change the class attribute reference for the desired HTML tag in XSL files.

You may add a different class definition altogether in the CSS file. In this case, the newly defined class needs to be assigned to the XSL file.

.EMPBtn { font-family: Arial, Helvetica, sans-serif; text-decoration none; font-weight:bold; color: #594fbf; }

In XSL file, the corresponding change would be

Example 7–11 After changing class attribute reference for the desired HTML tag

<input class=”EMPBtn” id=”close”onblur=”if(this.disabled==0)
this className=’Btnl’”onmouseover=”if)this.disabled==0) 
this.className=’Btn1Hov’”onfocus=”if(this.disabled==0) 
this.className=’Btn1Hov’”onclick=”parent.close()”tabIndex”1” 
onmouseout=”if (this.disabled==0) 
this.className=’Btnl’”type=”button”name=”close”value=”Close”>