Module Installation

By following the steps below, you will be able to convert your non-themed Broadleaf site to one that supports switching themes. At the time of writing, these instructions were based on a version of the Heat Clinic sample project targeting Broadleaf version 3.0.2-GA and Theme module version 1.0.0-GA.

Configuration Changes

1. Create a folder called default-theme inside of site/src/main/webapp/WEB-INF

2. Move the css, fonts, img, js, and template folders inside of the new default-theme folder.

   When using themes, the typical project structure for site changes slightly. Basically, we need to get all of the templates/css/images/js folders under a parent theme folder so that we can dynamically select themes.

3. Add the following to the dependency management section to your parent pom.xml:

   <dependency>
       <groupId>com.broadleafcommerce</groupId>
       <artifactId>broadleaf-theme</artifactId>
       <version>1.1.0-GA</version>
       <type>jar</type>
       <scope>compile</scope>
   </dependency>
   

   Note: You must have previously configured your pom to reference the Broadleaf private repositories. This information will be provided as part of your license agreement.

4. Pull this dependency into your core/pom.xml:

   <dependency>
       <groupId>com.broadleafcommerce</groupId>
       <artifactId>broadleaf-theme</artifactId>
   </dependency>
   

5. In site/src/main/webapp/WEB-INF/applicationContext-servlet.xml, delete the following lines:

   <mvc:resources order="-10" location="/img/, classpath:/common_style/img/" mapping="/img/**" />
   <mvc:resources order="-10" location="/fonts/, classpath:/common_style/fonts/" mapping="/fonts/**" />
   

   and add in these to the SimpleUrlHandlerMapping bean:

   <prop key="/img/**">blImageResources</prop>
   <prop key="/fonts/**">blFontResources</prop>
   

6. In site/src/main/webapp/WEB-INF/applicationContext.xml, delete the following beans:

   <bean id="jsLocations" ... >
   <bean id="cssLocations" ... >
   <bean id="blJsResources" ... >
   <bean id="blCssResources" ... >
   

   along with the two LateStageMergeBeanPostProcessor beans that are defined below them.

   After that, add in the following lines:

   <bean id="resourceBase" abstract="true" class="com.broadleafcommerce.theme.web.resource.ThemeResourceHttpRequestHandler">
       <property name="themesBaseDirectory" value="/WEB-INF/" />
   </bean>
   
   <bean id="blJsResources" parent="resourceBase">
       <property name="locations" ref="blJsLocations"/>
       <property name="themeDirectory" value="/js/" />
       <property name="handlers" ref="blJsHandlers" />
   </bean>
   
   <bean id="blCssResources" parent="resourceBase">
       <property name="locations" ref="blCssLocations"/>
       <property name="themeDirectory" value="/css/" />
       <property name="handlers" ref="blCssHandlers" />
   </bean>
   
   <bean id="blImageResources" parent="resourceBase">
       <property name="locations" ref="blImageLocations"/>
       <property name="themeDirectory" value="/img/" />
   </bean>
   
   <bean id="blFontResources" parent="resourceBase">
       <property name="locations" ref="blFontLocations"/>
       <property name="themeDirectory" value = "/fonts/" />
   </bean>
   

7. The following subfolder locations have been added to the configuration via the blSubfolderResourceLocations bean:

- js/
- css/
- img/

This will allow resources found under themed folders to be versioned correctly. If any additional subfolders are added within a theme folder such as /js/core/, etc., they will need to be added to the blSubfolderResourceLocations list. To do so add the following configuration in site/src/main/webapp/WEB-INF/applicationContext.xml:

```



js/core/

```

Demo Site Changes (optional)

1. If you would like access to the theme variables through JavaScript, you will want to add blc-theme.js to list of JavaScript files that you will be using. Typically, this is configured through footer.html, but it will be application specific if you are not basing your project on the Heat Clinic.

2. Modify site/src/main/webapp/WEB-INF/default-theme/css/style.css to take advantage of the theme variable replacement.

   • Add the following line to the comment block at the top of the file:

     __headerColor=blue__

   • Replace the border-top definition in the header element:

     border-top: 15px solid __headerColor__;

   • Replace the background-color definition in the #header_content #cart_info element:

     background-color: __headerColor__;

Data Changes

Schema Changes

If you are allowing hibernate to create and modify your tables, this will be done automatically when you restart with the new configuration settings.

Otherwise, you will need to generate the SQL to customize your Broadleaf implementation. See the Broadleaf Schema Upgrade Documentation for details.

Admin Security Changes

To maintain theme configurations in the Broadleaf admin, you will need to load new permissions. The recommended changes are located in the following files:

/config/bc/sql/load_theme_admin_security.sql

Note: In development, you can automatically load this SQL by adding this file to the blPU.hibernate.hbm2ddl.import_files property in the development-shared.properties file.

Optional Data Changes

If you want to augment the Heat Clinic demo with some theme configurations, you can utilize the /config/bc/sql/samples/load_theme_demo_data.sql file provided with the theme module.