How to customize SKIN in Richfaces?

Question

I want to customize whole look and feel of my web application. Currently I am using Richfaces 4.1.0.

1st Trial:

To customize the SKIN I tried to follow http://www.packtpub.com/article/skin-customization-in-jboss-richfaces-3.3

1. Added mySkin properties file.
2. Updated build.xml
3. Updated web.xml.

But All this is not fruitful. I am not able to customize the SKIN.

2nd Trial:

Ref Link:- http://docs.jboss.org/richfaces/latest_4_1_X/Developer_Guide/en-US/html/chap-Developer_Guide-Skinning_and_theming.html

<context-param> <param-name>org.richfaces.skin</param-name> 
<param-value>emeraldTown</param-value> </context-param>

But this is also not working. To get it working am I required to add any additional RESOURCE?

3rd Trial:

<rich:tabPanel switchType="client" style="width: 70%;margin: auto;background-color:red;">
            
                <rich:tab header="Overview">
                    Tab 1 Content
                </rich:tab>
                <rich:tab header="JSF 2 and RichFaces 4">
                    Tab 2 Content
                </rich:tab>
            
        </rich:tabPanel>

I tried to put background color Explicitly, but even this is failing.

Answer 1

You can customize skin in Richfaces at three level.

Using property files of skin

you can modify the Application interfaces by changing the values of skin parameters in the skin. for that you need to Edit the constant values defined in the skin.properties file to change the style of every component mapped to that skin property.

Using Component stylesheets

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

Using Custom components style classes

you can also specify styleClass attribute to Individual components. For that add the new style class to the application CSS and reference it from an individual component with the styleClass attribute.

By Overwriting stylesheets in application

You can also load custom stylesheets using which rewrites of extends styles defined for style classes of components.

for detailed information refer http://docs.jboss.org/richfaces/latest_4_1_X/Developer_Guide/en-US/html/chap-Developer_Guide-Skinning_and_theming.html