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