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.
The definition of a primary button display is Btn1 and is defined in the CSS file as shown in Example 7–7.
.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.
<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.
Btn1 { background:#fffff;color:#000; font-weight:bold;padding:2px 0px; margin:0px 1px 1px 0px; border:0px none #000; } |
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.
<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”> |