PrimeFaces Themes

I’ve introduced the new Theme Gallery with PrimeFaces 2.1, before that PrimeFaces had only one skin called yui-skin-sam which wasn’t flexible and easy to use. Now in 2.1, PrimeFaces provides the new skinning architecture based on ThemeRoller, introduces 28 new themes and an online tool to create your own themes without knowing CSS.

With the new skinning, structure and skinning styles are seperated so you don’t need to know about .ui-panel-header to style it but know about ui-widget-header global style. .ui-panel-header only defines structural CSS like margins and paddings, on the other hand skinning styles include color schemes and fonts. This clean seperation brings great flexibility, we even ported Apache Trinidad’s Casablanca skin and RichFaces’s BlueSky skins as a PrimeFaces theme in a 10 minute simple process.

Here are the 28 themes from PrimeFaces Theme Gallery, more themes are on the way as we’ll create more and share the community submitted themes.

Installing a Theme

Applying a theme to your PrimeFaces project is very easy, once you download the zipped theme file, extract the contents to a folder in your application. A theme consists of a css file called skin.css and images which are located in images folder.

1) Add the skin.css file to your JSF page using link tag

    <link type="text/css" rel="stylesheet" href="%PATH_TO_THEME_FOLDER%/skin.css">

2) And configure PrimeFaces not to add it’s bundled default skin (sam).

<context-param>
	<param-name>primefaces.skin</param-name>
	<param-value>none</param-value>
</context-param>

That’s it, as an example assume you want to use redmond theme which you’ve copied the theme contents to a css folder of your application.

<link type="text/css" rel="stylesheet" href="{CONTEXT_PATH}/css/redmond/skin.css">

Creating a Theme

If you’d like to create your own theme instead of using the pre-defined ones, that is easy as well because ThemeRoller provides a powerful and easy to use online tool for this. Once you have created your own theme the way you like follow the steps in installing themes section to start using it.

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.

Online Demo

If you’d like to test these 28 built-in themes, you can try them at Online PrimeFaces Showcase.