This section overviews main principles of standard components skinning with the Rich Faces framework.

This feature provides styling for standard HTML form elements in order to be highly compilant to RichFaces common look'n'feel. There should be two ways of applying skins to elements:

- Skinning style classes are applied to elements by element name and type attribute (where applicable). No additional steps required from an application developer. Application initialization parameter serves for enabling/disabling the feature.
- Several style classes are provided for different types of elements. That style classes have predefined names. Application developer should manually assign classes to controls that needs skinning or assign class to an element that contains controls.

Standard controls skinning feature provides 2 levels of skinning:

1. Standard - customization of only basic style properties.
2. Extended - extends basic level introducing customizations of a broader number of style properties

Skinning level calculated automatically at server side depending on user agent info.

Extended skinning not applied to browsers having rich visual styling for controls (e.g. Opera and Safari). Also advanced level of skinning requires support of CSS 2 attribute selectors either as implicit type attributes for button/textarea elements (e.g. IE7 in standards compilant mode) or CSS 3 draft namespace selectors (e.g. Mozilla Firefox).

Click here to call modal with an example.

There three ways of applying skinning to application:

- org.richfaces.CONTROL_SKINNING context param set to enabled means that all standard elements on the page will be skinned. (CSS style classes for elements based on their names and type attribute values will be applied)
- org.richfaces.CONTROL_SKINNING_CLASSES context param set to enabled means that basic elements nested to element having rich-container class will be skinned.
- Rich faces also provides predefined classes which can be applied by end developer to elements need to be skinned separately. This classes added to the page also according to org.richfaces.CONTROL_SKINNING_CLASSES context-param.

Using first way CSS with next definitions will be automatically added to pages:

CSS for standard elements snippet

And using the second way next CSS will influence corresponding elements:

CSS for standard elements inside rich container snippet

And the last one way means that classes with names corresponding to elements names will be added to the application pages and possible to set manually:

Predefined rich classes

Important Exception: a elements have classes based on "link" and pseudo class name. (e.g.: rich-link, rich-link-hover, rich-link-visited)

Standard components skinning All the controls below is just standard JSF components skinned with Rich Faces: