primefaces Updated November 7, 2012 by mkyong 23 comments

Create a custom theme in PrimeFaces

PrimeFaces is using jQuery ThemeRoller framework, and it comes with 30+ pre-defined themes, visit all available themes, before create a custom theme.

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 jquery-ui-{version}.custom.css to theme.css.

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 :

 
url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)

to this :


url("#{resource['primefaces-mytheme:images/ui-bg_highlight-soft_75_cccccc_1x100.png']}")

Here is what I used to do, edit theme.css in file editor, use search and replace all option.

First, replace this


url(images

to this


url("#{resource['primefaces-mytheme:images

Second, replace this :


.png

to this


.png']}"

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 yourtheme.jar file.


$ 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.

6. web.xml

In 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.

Alternative Way

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.

It works!

References

Written by mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

All posts by mkyong Website

23 comments on “Create a custom theme in PrimeFaces”

Shaima Mahmoud
March 8, 2015 at 11:15 pm

Hello , I have made my theme but I stopped in step 2
I don’e have this file jquery-ui-{version}.custom.css to rename to theme.css.

Reply
Robik Shrestha
August 10, 2014 at 1:01 pm

This worked for me:

Replacing
url(“images

to

url(“#{resource[‘primefaces-mytheme:images

And replacing
.png

to

.png’]}

Reply
Carolina
October 25, 2013 at 4:14 am

Hi!

Tks a lot for your post. I tried both ways and worked very well.

My question is if there is a way to put the “\resources” folder on another url and primefaces see it someway.

Tks!

Reply
Hjelperne
July 31, 2013 at 5:48 am

An online tool is also available to convert ThemeRoller zip files to Primefaces theme jars (so you dont have to download anything):

https://themeroller.osnode.com.

ThemeRoller versions: 1.10.3 & 1.9.2 are supported.

Just drag your zip file over and download the converted jar files.

Maven instructions are included.

Reply
1. firfin
  September 3, 2013 at 8:37 pm
  
  Thanks a lot! I am glad I read the comments first 😉
  mkyong should put this link on top…
  
  Reply
2. Hjelperne
  January 16, 2015 at 6:24 am
  
  The online tool from osnode at https://themeroller.osnode.com/themeroller/ now suppports the latest (and all previous) versions: 1.11.2, 1.11.1, 1.10.4 & 1.9.2.
  
  Drag and drop the themeroller zip -> download the primefaces theme jar. Done.
  
  Reply
3. Dilakshi
  February 24, 2016 at 4:08 pm
  
  Thanku so much
  
  Reply
Prog3
July 22, 2013 at 8:16 pm

Hi,

the easiest way for a custom theme in PrimeFaces is.

Do
Step 1. ThemeRoller CSS Framework
Step 2. Use http://www.pftc.de ( the converter makes step 2 till 6 for you)

Reply
Alan Dee
June 29, 2013 at 1:28 am

to make things easier, here is the regular expression I used to swap out the image tag:
Find: url$images([^$]+)\)
Replace: url$\”\#\{resource\[\’primefaces\-mytheme\:$1\’\]\}\”$</pre

*some IDE's will need this replace instead:
url$\”\#\{resource\[\’primefaces\-mytheme\:\1\’\]\}\”$

Reply
patrick
April 6, 2013 at 1:59 am

i have a problem in changing the css files name because there is two in my css folder can you help me please?

Reply
Geo
April 5, 2013 at 12:51 am

Hi all, I found two ways to make the jar very easily:
1-) Theme Converter: A nice tool that with no more than 4 click you can have your customized theme in a jar. Can be found here: http://sourceforge.net/projects/primefacestheme/
2-) The long way: A project in Eclipse => Plugin project…Then put the primefaces-theme folder in the project. Modify the path of the images and then Export to Jar. This can be done with right click. Uncheck all and it´s done. The holy JAR.

Hope this works…Thanx to Mkyong for this amazing space…

Reply
Sam
January 5, 2013 at 2:37 pm

Hi,
I followed the above mentioned steps for creating my own theme,but unfortunatly after placing the jar in classpath i got the following Exception.

Please can u help…

javax.servlet.ServletException: Error loading theme, cannot find “theme.css” resource of “primefaces-yourtheme” library
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)

javax.faces.FacesException: Error loading theme, cannot find “theme.css” resource of “primefaces-yourtheme” library
org.primefaces.renderkit.HeadRenderer.encodeTheme(HeadRenderer.java:130)
org.primefaces.renderkit.HeadRenderer.encodeBegin(HeadRenderer.java:92)
javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:820)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1777)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1782)
com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:424)
com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:125)
com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:121)
com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
javax.faces.webapp.FacesServlet.service(FacesServlet.java:594)

Reply
David
December 8, 2012 at 4:31 am

sorry my english, in the moment that i’m going to execute the the command “jar -cvf yourtheme.jar” return this message.

La marca ‘c’ necesita la especificaci?n de archivos de manifiesto o de entrada.
Uso: jar {ctxui}[vfm0Me] [archivo-jar] [archivo-manifiesto] [punto-entrada] [-C dir] archivos…

please help me.

thanks.

Reply
1. Eduardo Yáñez
  December 17, 2012 at 7:23 pm
  
  Hola David, te falta especificar los archivos que quieres incluir en el JAR…
  
  Después del nombre del fichero jar debes decir qué fichero quieres que formen parte del mismo:
  
  jar -cvf yourtheme.jar .
  
  jar -cvf yourtheme.jar *
  
  etc….
  
  Reply
Steven
November 7, 2012 at 6:09 pm

It should have said:

First, replace this

url(images

to this

url(“#{resource[‘primefaces-mytheme:images

It left out the “images” when replacing “url(images”.

Reply
1. mkyong
  November 7, 2012 at 6:56 pm
  
  Thanks, article is updated.
  
  Reply
Mat
November 2, 2012 at 5:01 am
Hi Mkyong,
very useful info. I applied the above to p:dataTable with paginator as below.
The FirstPageLink,PreviousPageLink,NextPageLink and LastPageLink were never displayed. I can hover over them and the colour correctly changes but the arrows are never visable. If click on were the arrows should be, the data correctly changes. Any ideas how I can get the above links to be displayed?
```
<p:dataTable id="dataTable" var="car" value="#{newTableBean.cars}"
                 paginator="true" rows="10"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink}
                 {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
                 {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15"
                 style="width:340px; font-size: 12px; font-family:verdana">
```
Reply
1. Ivo
  November 21, 2012 at 4:56 am
  
  Hello… I got the same problem? How did you solve yours?
  Thanks.
  
  Reply
2. Ivo
  November 21, 2012 at 5:10 am
  
  Problem sovled:
  images must be inside resources folder. NOT primefaces-theme folder.
  
  Reply
Beth Boose
August 29, 2012 at 2:03 am
Hi Mkyong, I use the information you post frequently, thank you. Just wanted to suggest a regular expression for that search and replace. I downloaded a theme jar, copied the css and images to my application and mad the image pathing changes(using an eclipse editor, but other regex should be similar)
to go from
```
url("#{resource['primefaces-bluesky:images/ui-bg_highlight-hard_70_000000_1x100.png']}") 
```
to
```
url(#{request.contextPath}/resources/images/ui-bg_highlight-hard_70_000000_1x100.png)
```
I use:
```
$"#\{resource\['primefaces-bluesky:images/(.*)\.png'\]\}"$
```
for the search and:
```
$#\{request.contextPath}/resources/images/$1\.png$
```
for the replace
To go the other way
from
```
url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 
```
to
```
url("#{resource['primefaces-mytheme:images/ui-bg_highlight-soft_75_cccccc_1x100.png']}")
```
use
```
url$(.*).png$
```
for search and
```
url$"#\{resource\['primefaces-mytheme:$1\.png'\]\}"$
```
for the replace
Reply
1. mkyong
  August 29, 2012 at 9:01 am
  
  Wow, thanks for your inputs 🙂
  
  Reply
  1. tholier
    October 24, 2012 at 5:26 pm
    i’ve used ‘sed’ command in linux to convert the urls of css file.
    
    one command:
    
    sed "s/url(images\/$.*$\.png/url(\"\#\{resource[\'primefaces-YOURTHEME\:images\/\1\.png\']\}\"/g" jquery-ui-1.9.0.custom.css > theme.css
    Reply