Cutsomizing RichFaces skins

RichFaces comes with the following skins:

  • DEFAULT
  • plain
  • emeraldTown
  • blueSky
  • wine
  • japanCherry
  • ruby
  • classic
  • deepMarine
  • NULL

To use a skin, all you need to do is set the name in web.xml file:


  org.richfaces.SKIN
  ruby
 

Suppose you like the skin, but you want to make some small changes to it. Here is what to do.

  1. Unzip richfaces-impl-3.2.x.GA.jar file. All the skin files are under META-INF/skin
  2. Take the skin you want to modify and save it under a different name in the root of your Java source folder. For example rubycustom.skin.properties
  3. Open the file and change the parameter you need. For example, changing the general font from 11px to 14px:
generalSizeFont=14px

then just set the new skin in web.xml file:


  org.richfaces.SKIN
  rubycustom
 

Save and restart the server.

Starting with RichFaces 3.2.1, this process has become simpler. You still create a new custom skin file under Java source, and specify which skin to extend:

baseSkin=ruby

this means the skin is based on ruby skin. Next, you just over write the parameter that you need. In this example, it would look like this:

baseSkin=ruby
generalSizeFont=14px

There is a full chapter on skinnability and various customization options in my upcoming book Practical RichFaces.

One thought on “Cutsomizing RichFaces skins

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s