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”>