PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous

Plug-n-Skin feature is designed to freely extend and override one of base RichFaces skins. It allows to redefine the look of a set of components by taking the base skin as basis and plugging-in custom styles.

You may freely create your own pluggable skin in the next way:

  • Create your new pluggable skins project with CDK using mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=*RF-VERSION* -DartifactId=*ARTIFACT-ID* -DgroupId=*GROUP-ID* -Dversion=*VERSION* command from the root folder of richfaces.
  • Create new pluggable skin inside the project using mvn cdk:add-skin -Dname=*SKIN-NAME* -Dpackage=*SKIN-PACKAGE* from the folder created on the previous step.

In the result you'll get a new skin project.

In order to check some other optional parameters for CDK commands and more info about the feature in general - visit the corresponding developer guide section and explore Laguna skin project in richfaces/samples svn.

Main files in the created pluggable skin project (createdSkinName\src\main\resources\META-INF\skins\ folder) are:

  • <createdSkinName>.skin.properties which should contains base parameters for the skin such as baseSkin, generalStyleSheet, gradientType and some others and could contain skin parameters redefinitions for the skin.
  • <createdSkinName>.xcss which defines all the components xcss imports.
  • <createdSkinName>-ext.xcss defines imports for standard skinning xcss files.

All classes for all the components and standard skinning classes are already listed in corresponding imported xcss files. Thus you'll only need to fill them with the properties you need.

Check for example classes defined in panel component xcss for Laguna skin:

panel.xcss from laguna skin
<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f='http:/jsf.exadel.com/template'
   xmlns:u='http:/jsf.exadel.com/template/util'
   xmlns="http://www.w3.org/1999/xhtml" >

    <u:selector name=".rich-panel">
        <u:style name="padding" value="0px" />
        <u:style name="margin-bottom" value="5px" />
        <u:style name="border-color" skin="newBorder" />
    </u:selector>
    
    <u:selector name=".rich-panel-header">
        <u:style name="color" skin="headerTextColor" />
        <u:style name="border-top" value="0px" />
        <u:style name="border-right" value="0px" />
        <u:style name="border-left" value="0px" />
        <u:style name="border-color" skin="newBorder" />

        <u:style name="background-position" value="0% 50%" />

        <u:style name="background-image">
            <f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
                <f:attribute name="valign" value="middle" />
                
                <f:attribute name="gradientHeight" value="22px" />
                <f:attribute name="baseColor" skin="headerBackgroundColor" />
                <f:attribute name="gradientColor" skin="headerGradientColor" />
            </f:resource>
        </u:style>
        
        <u:style name="padding" value="4px 4px 4px 14px" />
    </u:selector>
    
    <u:selector name=".rich-panel-body">
        <u:style name="padding" value="10px 10px 10px 14px" />
        <u:style name="background-position" value="0% -496px" />
        <u:style name="background-repeat" value="repeat-x" />
        <u:style name="background-image">
            <f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
                <f:attribute name="valign" value="bottom" />
                <f:attribute name="gradientType" value="plain" />
                <f:attribute name="gradientColor" skin="intShadow" />
                <f:attribute name="baseColor" skin="generalBackgroundColor" />
                
                <f:attribute name="gradientHeight" value="4px" />
            </f:resource>
        </u:style>
    </u:selector>
</f:template>
RichFaces Wiki RichFaces Project Site