Create a custom theme in PrimeFaces
In this tutorial, we will show you how to create a custom theme and apply it in PrimeFaces.
1. ThemeRoller CSS Framework
Visit jQuery ThemeRoller, play around the value to customize your theme, and click download.
On the download page, select “Deselect all components“, and click on the download
2. Rename to theme.css
The file you’ve downloaded from ThemeRoller will have css, development-bundle and js folders. Go to css folder, rename
P.S Must be theme.css, no other name.
3. Change Image Path
This is the tedious and boring path, edit “
theme.css“, replace all existing standard css image path to the JSF resource loading path.
For example, change from this :
to this :
Here is what I used to do, edit
theme.css in file editor, use search and replace all option.
First, replace this
Second, replace this :
4. Jar It
Your new theme must follow following folder structure :
- jar - META-INF - resources - primefaces-yourtheme - theme.css - images
Adjust the folder to create an above folder structure, just a few copy and paste. Then go to one level up of folder “META-INT“, and issue a
jar -cvf yourtheme.jar command to create a
$ jar -cvf yourtheme.jar .
List the content of the created jar file.
$ jar -tf yourtheme.jar META-INF/ META-INF/MANIFEST.MF .DS_Store META-INF/resources/ META-INF/resources/primefaces-yourtheme/ META-INF/resources/primefaces-yourtheme/.DS_Store META-INF/resources/primefaces-yourtheme/images/ META-INF/resources/primefaces-yourtheme/images/ui-bg_flat_0_aaaaaa_40x100.png //..image files META-INF/resources/primefaces-yourtheme/theme.css
5. Jar on Classpath
Copy above “
yourtheme.jar” to project classpath.
web.xml, put this :
<context-param> <param-name>primefaces.THEME</param-name> <param-value>yourtheme</param-value> </context-param>
Done. The new custom theme is created and applied in your PrimeFaces project.
Above are what mention in PrimeFaces user guide, personally I don’t like the Jar process, which is quite troublesome, instead, you can copy the entire “
primefaces-yourtheme” folder, and put it directly into the JSF resources folder.