Themes

TornadoFaces uses Foundation for Apps markup and styling, with a small override stylesheet.

Create a custom theme

Check out the default theme called Tornado from GitHub and use that as a base. TornadoFaces comes with a build system written in Gulp, so make your changes to settings.scss and run gulp to get your custom theme.css.

You can either manually include your new theme as a css resource in your page template and disable the default theme (see below), or you can package your theme as a jar-file and configure your app to use it in web.xml.

Package your theme

To create a reusable, pluggable theme for TornadoFaces, jar up the following directory structure, optionally adding in any image or other static resources relative to theme.css.

META-INF/resources/tornadofaces-mytheme/theme.css

In this example the theme name mytheme was chosen. Include the jar in your project and change the theme as documented below.

Change theme

Custom themese can be configured in a number of ways:

Add an attribute to the current view

<f:attribute name="tornadofaces.THEME" value="mytheme"/>

Configure in web.xml

<context-param>
    <param-name>tornadofaces.THEME</param-name>
    <param-value>mytheme</param-value>
</context-param>

Configure in a bean

Define an EL expression in the theme argument web.xml:

<context-param>
    <param-name>tornadofaces.THEME</param-name>
    <param-value>#{themeController.theme}</param-value>
</context-param>

@Named
@RequestScoped
public class ThemeController {
    public String getTheme() {
        return "dynamically-resolved-theme-name";
    }
}

The bean can have any scope. To disable theming completely, use the theme name none.

Disable default resources

You can disable the supplied JQuery version by setting tornadofaces.SKIP_JQUERY as either a view param or a web.xml init param.

You can disable all default TornadoFaces resources by setting tornadofaces.DISABLE as either a view param or a web.xml init param.