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 with 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
are 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 need
skinning or assign a class to an element that contains controls.
Standard controls skinning feature provides 2 levels of skinning:
Standard - customization of only basic style properties.
Extended - extends basic level introducing customizations
of a broader number of style properties
Skinning level is calculated automatically at server side depending on user agent info.
Extended skinning is not applied to browsers with 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
There three ways of applying skinning to application:
By default org.richfaces.CONTROL_SKINNING context param is set to enable
and it 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).
You may redefine it to disable in order to turn it off.
By default org.richfaces.CONTROL_SKINNING_CLASSES context param is set to
enable and it
means that basic elements nested to element having rich-container class
will be skinned. It could be also turned off using disable value.
RichFaces also provides predefined classes which can be applied by an 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 the next definitions will be automatically added to pages:
And using the second way the next CSS will influence corresponding elements:
And the last one means that classes with names corresponding to elements names
will be added to the application pages and possible to set manually:
Important Exception:a elements have classes based on "link"
and pseudo class name. (e.g.: rich-link, rich-link-hover, rich-link-visited)
One additional note. In the predefined rich classes css we provide not only classes
for basic HTML elements but also classes for some complex elements creation.
There is a snippet with some of them for example:
To get a better idea of standard component skinning we recommend to explore CSS files located in ui/core/src/main/resources/org/richfaces/ folder of RichFaces svn.
Standard components skinning
All the controls below is just standard JSF components skinned with Rich Faces: