PrimeFaces is integrated with the ThemeRoller CSS Framework. You can either choose from the free themes, purchase premium themes or create your own using easily the online theme generator tool of ThemeRoller.
Theme Gallery
Layout is an amazing looking responsive template with a set of xhtml files including dashboard, login, error, 404 along with icons and images to kickstart applications quickly. Each premium layout offers a compatible theme with a similar design. Although theme can be used standalone without the layout, we suggest using the theme of a layout for a unified look in your application.
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.
Omega for ELITE and PRO
Basic License for Omega Layout is available for both ELITE & PRO users at no extra cost and it can be purchased as standalone without requiring an Elite or Pro support subscription as well. A separate purchase is necessary to get an extended license for Elite subscribers but not for PRO users. Read more about premium template licenses for details.
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
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 |
<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.
|
1 2 3 4 |
<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.