Sun Java System Communications Express 6.3 Customization Guide

Style Sheets

In Address Book, style sheets play a significant role in the manner in which the user interface 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 that is included using the <link> HTML tag in the HTML <head> section of the XSL files. These style sheets are referenced by assigning a `class' attribute of HTML tags.

Example 7–5 shows the class attribute of HTML tags.

Example 7–5 Class attribute of HTML tags

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

Example 7–6 shows the class attribute of XSL tags.

Example 7–6 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 Internet Explorer and Netscape. These files exist in <uwc-deployed-path>/absimx and are named as:

ab_css_ie5win.css for Internet Explorer
ab_css_ns6up.css for Netscape

What can be Customized in Style Sheets

You can change the definition of an existing style sheet but , 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.

Changing the Definitions of an Existing Style Sheet

The definition of a primary button display is Btn1 and is defined in the CSS file as shown in Example 7–7.

Example 7–7 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; }

For more information on how to use the class in the XSL file, see Displaying User Defined Header Fields. Example 7–8 shows how the class is used in the XSL file for the ”Close’ button.

Example 7–8 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–9 shows the code after changing the definition of a primary button display.

Example 7–9 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;
 }

Adding New Style Sheet Definitions

You can add new style sheet definitions and also change the class attribute reference for the desired HTML tag in XSL files. You can add a different class definition altogether in the CSS file, where 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; }

Example 7–10 shows the corresponding changes in the XSL file.

Example 7–10 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”>