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.
- Using online ThemeRoller tool update the styles, click on the Download Theme button which will take you to the Download Builder screen.
- Uncheck component Toggle All checkbox, enter
primefaces-seablue
in the Theme Folder Name input box and click on Download. - 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/
- Now rename
jquery-ui-{version}.custom.css
totheme.css
. - 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 tourl("#{resource['primefaces-seablue:images/ui-bg_flat_75_ffffff_40x100.png']}")
. - Package the theme...