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 files as JAR with the following...