4.4.8. Standard Controls Skinning

This feature is designed to unify the look and feel of standard HTML elements and RichFaces components. Skinning can be applied to all controls on a page based on element names and attribute types (where applicable). This feature also provides a set of CSS styles that let skins be applied by assigning rich-* classes to particular elements, or to a container of elements that nests controls.
Standard Controls Skinning provides two levels of skinning: Basic and Extended. The level used depends on the browser type detected. If the browser type cannot be detected, Extended is used. However, if you want to explicitly specify the level to be applied, add a org.richfaces.CONTROL_SKINNING_LEVEL context parameter to your web.xml and set the value to either basic or extended.
  • The Basic level provides customization for only basic style properties. Basic skinning is applied to the following browsers:
  • The Extended level introduces a broader number of style properties on top of basic skinning, and is applied to browsers with rich visual styling control capabilities. The following browsers support Extended skinning:
    • Mozilla Firefox
    • Internet Explorer 7 in Standards-compliant mode (CSS1Compat mode)
The following elements can be modified with skins:
  • input
  • select
  • textarea
  • keygen
  • isindex
  • legend
  • fieldset
  • hr
  • a (together with the a:hover, a:visited pseudo-elements)
There are two ways to initialize skinning for standard HTML controls:
  • add the org.richfaces.CONTROL_SKINNING parameter to web.xml. org.richfaces.CONTROL_SKINNING takes enable and disable as parameters. This method implies that skinning style properties are applied per-element and attribute type (where applicable). No additional steps are required. See the Section 4.4.8.1, “Standard Level” and Section 4.4.8.2, “Extended level” tables for elements to which skinning can be applied.
  • add the org.richfaces.CONTROL_SKINNING_CLASSES parameter to web.xml. org.richfaces.CONTROL_SKINNING_CLASSES takes enable and disable as parameters. When enabled, you are provided with a set of predefined CSS classes to apply skins to your HTML components.
Enabling org.richfaces.CONTROL_SKINNING_CLASSES provides you style classes that can be applied to:
  • basic elements nested within elements with a rich-container class. For example:
    ...
    .rich-container select {
       //class content
    }
    ...
  • Elements with a class name that corresponds to one of the basic element names or types are mapped with the rich-<elementName>[-<elementType>] scheme, as in the following example:
    ...
    .rich-select {
      //class content
    }
    
    .rich-input-text {
      //class content
    }
    
    ...

    Note

    Elements are given classes depending upon their link type and pseudo-class name, for example, rich-link, rich-link-hover, rich-link-visited
The predefined rich CSS classes provided can be used as classes for both basic and complex HTML elements.
The following code snippet shows several elements as an example:
...
<u:selector name=".rich-box-bgcolor-header">
     <u:style name="background-color" skin="headerBackgroundColor" />
</u:selector>
<u:selector name=".rich-box-bgcolor-general">
     <u:style name="background-color" skin="generalBackgroundColor" />
</u:selector>
...
//gradient elements
...
<u:selector name=".rich-gradient-menu">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
<u:selector name=".rich-gradient-tab">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
...
For a more thorough look at standard component skinning, we recommend exploring the CSS files located in the ui/core/src/main/resources/org/richfaces/ directory of the RichFaces SVN repository.

4.4.8.1. Standard Level

Table 4.3. HTML Element Skin Bindings for input, select, textarea, button, keygen, isindex and legend

CSS Properties Skin Parameters
font-size generalSizeFont
font-family generalFamilyFont
color controlTextColor

Table 4.4. HTML Element Skin Bindings for fieldset

CSS Properties Skin Parameters
border-color panelBorderColor

Table 4.5. HTML Element Skin Bindings for hr

CSS Properties Skin Parameters
border-color panelBorderColor

Table 4.6. HTML Element Skin Bindings for a

CSS Properties Skin Parameters
color generalLinkColor

Table 4.7. HTML Element Skin Bindings for a:hover

CSS Properties Skin Parameters
color hoverLinkColorgeneralLinkColor

Table 4.8. HTML Element Skin Bindings for a:visited

CSS Properties Skin Parameters
color visitedLinkColor

Table 4.9.  Rich Elements Skin Bindings for .rich-input, .rich-select, .rich-textarea, .rich-keygen, .rich-isindex, .rich-link

CSS Properties Skin Parameters
font-size generalSizeFont
font-family generalFamilyFont
color controlTextColor

Table 4.10.  Rich Element Skin Bindings for .rich-fieldset

CSS Properties Skin Parameters
border-color panelBorderColor

Table 4.11.  Rich Element Skin Bindings for .rich-hr

CSS Properties Skin Parameters
border-color panelBorderColor
border-width 1px
border-style solid

Table 4.12.  Rich Element Skin Bindings for .rich-link

CSS Properties Skin Parameters
color generalLinkColor

Table 4.13.  Rich Element Skin Bindings for .rich-link:hover

CSS Properties Skin Parameters
color hoverLinkColor

Table 4.14.  Rich Element Skin Bindings for .rich-link:visited

CSS Properties Skin Parameters
color visitedLinkColor

Table 4.15.  Rich Element Skin Bindings for .rich-field

CSS Properties Skin parameters/Value
border-width 1px
border-style inset
border-color panelBorderColor
background-color controlBackgroundColor
background-repeat no-repeat
background-position 1px 1px

Table 4.16.  Rich Element Skin Bindings for .rich-field-edit

CSS Properties Skin Parameters
border-width 1px
border-style inset
border-color panelBorderColor
background-color editBackgroundColor

Table 4.17.  Rich Element Skin Bindings for .rich-field-error

CSS Properties Skin Parameters
border-width 1px
border-style inset
border-color panelBorderColor
background-color warningBackgroundColor
background-repeat no-repeat
background-position center left
padding-left 7px

Table 4.18.  Rich Element Skin Bindings for .rich-button, .rich-button-disabled, .rich-button-over

CSS Properties Skin Parameters
border-width 1px
border-style solid
border-color panelBorderColor
background-color trimColor
padding 2px 10px 2px 10px
text-align center
cursor pointer
background-repeat repeat-x
background-position top left

Table 4.19.  Rich Element Skin Bindings for .rich-button-press

CSS Properties Skin Parameters
background-position bottom left

Table 4.20.  Rich Element Skin Bindings for .rich-container fieldset, .rich-fieldset

CSS Properties Skin Parameters
border-color panelBorderColor
border-width 1px
border-style solid
padding 10px
padding 10px

Table 4.21.  Rich Element Skin Bindings for .rich-legend

CSS Properties Skin Parameters
font-size generalSizeFont
font-family generalFamilyFont
color controlTextColor
font-weight bold

Table 4.22.  Rich Element Skin Bindings for .rich-form

CSS Properties Skin Parameters
padding 0px
margin 0px