Changing theme in PrimeFaces

PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes that you can download and apply in seconds. In this tutorial, we will show you how to change a theme n PriceFaces.

PrimeFaces themes

There are two ways to change a theme :

  1. Using Maven to download and apply.
  2. Download manually and apply.

1. Maven Download

For Maven user, visit this PrimeFaces available theme, select a theme and remember the theme, defined in Maven and configure the web.xml.

In this case, we will show you how to change a default theme (aristo) to glass-x theme.

File : pom.xml


    //...
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>Prime Repo</name>
			<url>http://repository.primefaces.org</url>
		</repository>
	</repositories>

	<dependencies>

		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>glass-x</artifactId>
			<version>1.0.6</version>
		</dependency>

	<dependencies>
Theme version?
Visit this PrimeFaces repository directly, check the theme folder to know which one is the latest.

File : web.xml


    //...
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>glass-x</param-value>
	</context-param>

Run it, the theme color will be changed, and looking inside the source code, it point to glass-x now.


<!-- html source code -->
<link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x" />

2. Download Manually

For non-Maven user, just visit the PrimeFaces’s repository and download the theme jar manually, and put it in your project classpath, and configure the web.xml.

File : web.xml


    //...
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>glass-x</param-value>
	</context-param>

Change Theme Dynamic

A nice trip to use EL expression to apply a theme dynamically. See following code snippet :

File : web.xml


  <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>#{loggedInUser.preferences.theme}</param-value>
  </context-param>

P.S Reference – PrimeFaces user guide

References

  1. PrimeFaces Available Themes
  2. jQuery Theme Roller
  3. PrimeFaces User Guide

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
AnonCristian Recent comment authors
newest oldest most voted
Cristian
Guest
Cristian

Amigo una pregunta: existe algun formato de factura en primeFaces??? pues q necesitamos algo relacionado.. muchas gracias por tu tiempo….

Anon
Guest
Anon

LoL

Cristian
Guest
Cristian

Amigo una pregunta: existe algun formato de factura en primeFaces??? pues q necesitamos algo relacionado.. muchas gracias por tu tiempo….