BootsFaces comes with the Bootstrap default theme and 16 Bootswatch themes. Plus, you can use an arbitrary third-party or custom Bootstrap theme.
The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css
is loaded or not.
If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own look and feel.
Setting the parameter to true causes BootsFaces to load theme.css
, this is true for Bootstrap and Bootswatch Themes.
BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME
to the name of the theme:
If you want to use a custom theme, set BootsFaces_THEME
to custom
.
In this case, you have to add the custom theme files manually to your JSF page. Typically, the custom CSS files are a Bootstrap.min.css
and a theme.css
, so the import looks like this:
You can even implement a theme switcher by using an EL expression in the web.xml: