Creating a New Theme

Click on the download theme button that will direct you into download page.

From the version option select 1.10.4 for compatibility issue.

From components option deselect ToggleAll so that your theme only includes skinning
styles.

At the bottom of the download page, just download your theme would look like below.

Create a structure of folders that comply with the Primefaces theme structure
standard. Look below:

META-INF folder should contain resources which in turn contains primefacesyourtheme folder. In our case weve named primefaces-journaldev.

Primefaces-journaldev folder should contains your css and images.

Return back into downloaded theme, extract the zip file into your desk and navigate
into css folder and search for jquery-ui-1.10.4.custom.css and rename it to
be theme.css.

Open your theme.css file and change all the images paths to
be url(#{resource[primefaces-journaldev:imagesimages/{image}]) rather
than url(images/{image}). Look below at a sample of fragments of our theme.css
file.

As youve noticed, all of images urls are changed to be used in conjunction

with Faces resourceobject.

Copy your theme.css file and images file into your primefaces-yourtheme, in our case
they will be located inside

primefaces-journaldev

folder.

Package your theme into JAR file using jar -cvf yourTheme.jar PATH-INTO-YOURMETA-INF-FOLDER. Look JAR below.
c:\metro-ui-master\src\main\resources>jar -cvf metroui.jar META-INF

Import your JAR into your project build path, remember that weve used the Primefaces
Calendarproject that was introduced some time ago. Easiest way to create a

lib

directory

at the project root and copy the jar file into it. Then add the jar file to the project build
path.

Since we need to package the project jar file when we build the project, we need to
make some changes in the pom.xml file to copy the journaldev.jar file to WEB-INF/lib
directory of the WAR file. The changes are easy, all we need is to add a configuration to
include the jar file to WEB-INF/lib directory for

maven-war-plugin

plugin. Our final pom.xml

file looks like below.

pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/mavenv4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.journaldev</groupId>
<artifactId>Primefaces-Calendar-Sample</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>Primefaces-Calendar-Sample</name>
<url>http://maven.apache.org</url>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>http://repository.primefaces.org</url>
<layout>default</layout>
</repository>
</repositories>

<dependencies>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- Faces Implementation -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Faces Library -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Primefaces Version 5 -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
<!-- JSP Library -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- JSTL Library -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
<!-- Primefaces Theme Library -->
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>blitzer</artifactId>
<version>1.0.10</version>
</dependency>
</dependencies>
<build>
<sourceDirectory>src/main/java</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>

<warSourceDirectory>WebContent</warSourceDirectory>
<failOnMissingWebXml>false</failOnMissingWebXml>
<webResources>
<resource>
<directory>lib</directory>
<includes>
<include>**/*.jar</include>
</includes>
<targetPath>WEB-INF/lib</targetPath>
</resource>
</webResources>
</configuration>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
</plugins>
</build>
</project>

Configure your web.xml file by changing the primefacs.THEME param.

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5" metadata-complete="true">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification
2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>

<param-value>client</param-value>
</context-param>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>journaldev</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>