Time for action – creating a new theme

In this section we will look at how we can create custom theme using the online ThemeRoller tool, and convert it into PrimeFaces theme library.

1. Using online ThemeRoller tool update the styles, click on the Download Theme button which will take you to the Download Builder screen.
2. Uncheck component Toggle All checkbox, enter primefaces-seablue in the Theme Folder Name input box and click on Download.
3. Extract the downloaded ZIP file and go into the CSS folder. You can see the following folder structure:

   primefaces-seablue
     - jquery-ui-{version}.custom.css
         -jquery-ui-{version}.custom.min.css
         -images/

4. Now rename jquery-ui-{version}.custom.css to theme.css.
5. Image references in the theme.css file must be converted to JSF resource loading expressions.

   For example, url(images/ui-bg_flat_75_ffffff_40x100.png) needs to be changed to url("#{resource['primefaces-seablue:images/ui-bg_flat_75_ffffff_40x100.png']}").

6. Package the theme...