Application skins are used with the RichFaces framework to change the appearance of an application by setting the visual elements of controls and components. Typically the appearance of web applications is handled through CSS files associated with the application, but skinning allows CSS settings to be easily edited. Skins consist of a small, generalized set of font and color parameters that can be applied to multiple different styles. This avoids repetitive coding and duplication in CSS files. CSS files are not completely replaced: skins work as a high-level extension to standard CSS.

Each skin has a set of skin-parameters for defining theme palette and other elements of the user interface. These parameters work together with regular CSS declarations and can be referred to from within CSS using JavaServer Faces Expression Language (EL).

Skins can be changed at runtime so users can personalize an application's appearance on the fly.

Individual components can use the styleClass attribute to redefine specific elements. These components then use the styles defined in a CSS file instead of the standard look for components as defined by the ECSS stylesheets.

Application interfaces can be modified by altering the values of skin parameters in the skin itself. Edit the constant values defined in the skin.properties file to change the style of every component mapped to that skin property.

Component stylesheets

Mappings and other style attributes listed in a component's ECSS file can be edited. Edit the ECSS file to change the styles of all components of that type.

Custom components style classes

Individual components can use the styleClass attribute to use a unique style class. Add the new style class to the application CSS and reference it from an individual component with the styleClass attribute.

Overwriting stylesheets in application

Load custom stylesheets using <h:outputStylesheet>, which rewrites and extends styles defined for style classes of components.

Note

To extend or overwrite style sheet definitions with your own stylesheets, ensure their definitions are placed to be rendered in the correct order of occurrence.

Support for adding round borders to skins is available with the panelBorderRadius skin parameter. The value of this parameter maps to the CSS 3 border-radius property. This CSS 3 property is ignored in older browsers, and the skin reverts to square corners.

Units of the panelBorderRadius skin parameter must be either px (pixels) or % (a percentage). The greater the pixels or percentage, the more rounded the edges are.

Skinning style properties are automatically applied to controls based on their element names and attribute types. If the HTML elements are referenced in the standard skin stylesheets, the controls are styled according to the mapped skin properties.

Standard HTML controls are skinned in this way by default. To override this behavior and prevent the RichFaces skins from being applied to the standard HTML controls, set the org.richfaces.enableControlSkinning context parameter in the web.xml configuration file to false:

The skinning style properties are determined through a separate CSS class. This method is not available by default, but is enabled through the org.richfaces.enableControlSkinningClasses context parameter in the web.xml settings file:

When enabled, a stylesheet with predefined classes generates a CSS class named rfs-ctn. Reference the rfs-ctn class from any container element (such as a <div> element) to skin all the standard HTML controls in the container.

Standard HTML controls can also be specifically defined in the CSS. Refer to the /core/impl/src/main/resources/META-INF/resources/skinning_both.ecss file in the richfaces-ui.jar package for examples of specially-defined CSS classes with skin parameters for HTML controls.