-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Primefaces Theme development
By :

As you already know, the ThemeRoller themes can't be used directly on the PrimeFaces components. They need to be modified as it suits the PrimeFaces infrastructure. Once you download the custom themes from the ThemeRoller tool, you need to perform the following steps:
On http://jqueryui.com/download/, the download page of the ThemeRoller site, you need to uncheck the Toggle All option in order to make a theme file contain only skinning styles.
Rename the jquery-ui-theme.css
file to the theme.css
file and then copy the images
folder.
Convert the images
reference in the theme.css
file to an expression that JSF can understand. For example, the image
reference in theme.css
is as follows:
url("images/ui-bg_flat_30_cccccc_40x100.png")
The preceding reference should be modified as follows:
url("#{resource['primefaces-themename:images/ui-bg_flat_30_cccccc_40x100.png']}")
After doing this, create a JAR file with the following folder structure:
- jar -META-INF - resources...
Change the font size
Change margin width
Change background colour