Add New Theme

The Widget Framework is shipped with one default theme called default. To add a new theme:

1. Add a folder for your theme to every widget's theme folder. If your theme is called my-theme then you would need to add a widget/src/main/webapp/static/theme/my-theme folder to every widget.

2. Add a corresponding theme folder to the Widget Framework 's core theme folder: widget-framework-core/src/main/webapp/static/theme/my-theme, for example.

3. Create a base subfolder in each my-theme folder you have created. The base folder should contain all the theme's common .css and graphics files (in css and gfx subfolders). You can also create variant folders that have the same structure as the base folder but with different names. The variant folders can contain modified .css and graphics files, making it possible for the theme to include variations for use in different sections of a publication. Variants are selected by setting a theme.variant section parameter in publication sections.

4. Add a property setting like this to widget-framework-core/src/main/resources/com/escenic/framework/ApplicationResources.properties:

   publication.theme.my-theme.title = My theme

5. Add a transformer specification like this to your publication's POM file:

   <transformer implementation="org.apache.maven.plugins.shade.resource.AppendingTransformer">
     <resource>static/theme/my-theme/base/css/theme.css</resource>
   </transformer>

   The Maven Shade plug-in will then merge all the theme.css files in all the widgets into a single theme.css file.

6. Compile and deploy your code.

To use your new theme you will need to set the theme section parameter in your publication's root section. For information on how to do this, see Changing Themes and Variants, in the Widget Framework User Guide.