Code Excursion

Liferay: Setting Theme Color based on User Attributes

In the Liferay portal product they provide the capability to provide multiple color schemes using one theme. Which provides flexibility for the end users to customize their experience. If you want to control that experience and choose different theme colors based on the user then you will need to write something custom.

The first challenge is how to get the user information to the Liferay Theme. One option would be to customize the User service layer. By default Liferay provides the user object to the theme. I found this objectionable as it would make database calls for every page load. This seems excessive just to identify which color scheme should be used. I decided that I would set a session variable when a user logs in and use that to set the color scheme.

First generate a Liferay hook project using “mvn archetype:generate”

Next we need to register our hook by adding the following line to the portal.properties file in the Maven resources folder.

src/main/resources/portal.properties

login.events.post=com.codeexcursion.ColorHook

Write our ColorHook class.

src/main/java/com/codeexcursion/ColorHook.java

public class ColorHook extends Action {

  private static final Log _log = IkromeLogUtil.getLog(SynchronizationHook.class);

  @Override
  public void run(HttpServletRequest request, HttpServletResponse response) throws ActionException {
	/* This is where you would pull in your user object to set the color value based on a
	   User attribute.  I simply set it explicitly for this example.
	*/ 
	String colorValue = "defaulColor";
	request.getSession().setAttribute("color",colorValue);

  }
}

To use this Liferay hook we would then need to create a custom theme to use the session variable. Once again use “mvn archetype:generate” to setup a Liferay theme project. Now we need to add a custom Velocity template file to our theme. Here we are modifying the $css_class variable in the template to have the color value.

Liferay’s default theme already adds a value to the variable so first we want to remove said value and add our own.

src/main/webapp/templates/init_custom.vm

# set ($css_class = $css_class.substring($css_class.indexOf("")))
# set ($css_class = $request.getSession().getAttribute() + " " + "${css_class}")