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 response to “Cutsomizing RichFaces skins”

  1. […] you want to learn how to create custom skins, read this blog […]

Leave a comment