PrimeFaces

1 de 3

http://www.primefaces.org/themes

Overview

Demos

Development

Support

Social

PrimeFaces is integrated with the ThemeRoller CSS Framework. You can either choose from the 38 pre-designed free themes, purchase the ELITE
themes or create your own using easily the online theme generator tool of ThemeRoller.

ELITE Themes
ELITE Themes are available to ELITE & PRO users exclusively. They are also available as a standalone purchase without upgrading to ELITE or
PRO. License type of the ELITE themes is a Site License under the terms and conditions of PrimeFaces Commercial License.
MetroUI
Buy Now for $49

Community Themes
Community themes are open source and free to use under Apache License. These themes include the ones available in ThemeRoller and custom
themes like Twitter Bootstrap.
Twitter Bootstrap

afterdark

afternoon

afterwork

aristo (default)

black-tie

blitzer

4/11/2014 13:10

PrimeFaces

2 de 3

http://www.primefaces.org/themes

bluesky (richfaces)

casablanca (trinidad)

cruze

cupertino

dark-hive

delta

dot-luv

eggplant

excite-bike

flick

glass-x (richfaces)

home

hot-sneaks

humanity

le-frog

midnight (wijmo)

mint-choc

overcast

pepper-grinder

redmond

rocket (wijmo)

sam

smoothness

south-street

start

sunny

swanky-purse

trontastic

twitter bootstrap

ui-darkness

ui-lightness

vader

Installation
Applying a theme from Theme Gallery to your PrimeFaces project is very easy, you just need to download the theme jar, add it your classpath and
configure PrimeFaces to use it.
1) You can either download the theme manually from repository or using maven.
Manual Download
PrimeFaces community themes are bundled as jar files available at PrimeFaces Repository.
Maven Dependencies
view plain

01.
02.
03.
04.
05.
06.

print

<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>cupertino</artifactId>
<version>1.0.10</version>
</dependency>

All community themes are also available in "all-in-one" package.

view plain

01.
02.
03.
04.
05.

print

<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>all-themes</artifactId>
<version>1.0.10</version>
</dependency>

2) Next and final step is setting primefaces.THEME parameter with the theme name, note that you can also use an EL expression for dynamic
themes.

4/11/2014 13:10

PrimeFaces

3 de 3

http://www.primefaces.org/themes

view plain

01.
02.
03.
04.

print

<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>

That's it!

Creating a New Theme

If you want to create a custom theme instead of using the prebuilt ones, easiest way is to use the ThemeRoller which provides a visual tool to
create your themes easily without requiring knowledge of CSS. Once you've downloaded your custom theme from ThemeRoller, refer to User's
Guide for more information and an example about applying your theme. There is also a 3rd party Theme Converter application as an alternative.

Sharing Themes
If you think your custom theme looks cool and would like to share it with PrimeFaces community, feel free to contact us and we'll add it to the
theme gallery.

Overview

Demos

Development

Support

Social

Why PrimeFaces

Showcase

Getting Started

Support Options

Blog

Who Uses PrimeFaces

Mock OS X

Documentation

PrimeFaces PRO

Forum

Testimonials

Mobile

Downloads

PrimeFaces ELITE

Newsletter

License

PrimeUI

Wiki

Training

Mobile Apps

Multimedia

Theme Gallery

Forum

Twitter

FAQ

Extensions

Issue Tracker

Facebook

Partners

LinkedIn

Certification

Copyright 2009-2014 PrimeTek All rights reserved.

4/11/2014 13:10