Saturday, September 25, 2010

Adding color to Prime Faces

In my last post you have seen a command button. This command button uses the default Prime faces skin and is shown in grey. Let me now make things a bit colorful, by showing how to use the skins provided by Prime faces. Prime faces skins are all based on Jquery themeroller CSS framework. I am interested in cupertino font and I will download the same from - You can download lots of other ready made themes from -

In later posts I will show how to create, install and use custom theme or skin. Once downloaded unzip the theme to webapps/themes folder. This is shown in the figure below:

Blog - 2

Prime faces theme consists of a skin.css file and a set of images placed in images folder. Now modify your web.xml to tell Prime faces that it should no longer use the default theme sam. Here is the modified web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xsi:schemaLocation="" >


<servlet-name>Faces Servlet</servlet-name>

<servlet-name>Faces Servlet</servlet-name>


Finally add the css in your JSF source using the link tag as shown in the listing (home.xhtml) below:

<html xmlns=""

<f:view contentType="text/html">

<title>PrimeFaces - ShowCase</title>

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/cupertino/skin.css" />


<p:commandButton value="Ajax Submit" />



Now just like in the previous post, build and deploy the application on tomcat and browse to the following URL - http://localhost:8080/hermesconsole/home.jsf. You will see the bluish button as shown in the figure below.

Blog - 3

No comments:

Post a Comment