Liferay Theme Structure

Liferay theme is can be used to provide custom look and feel for our portal application. (To know more about how to create Liferay theme check this link). We can create our theme by extending liferay’s default theme structures _unstyled, _styled or classic.

It is recommended to use either _styled / classic theme parent, as it contains basic styling but may require customization to meet our required look and feel (aui’s css may override our custom style and may have to override it where ever required). _unstyled provides more freedom over other two parent theme structures, as we are writing style from scratch.

A liferay theme contains mainly following folders/ files:

  • _diffs : This folder contains all the custom changes related to style, java script, templates, images, etc. Folder names should be exactly same as that of parent folder structure(Ex: /docroot/_diffs/css/ folder will contain all custom css files). Any files which we are customizing can be copied to respective folder and modified.
  • css : This folder contains basic styling of parent the structure(_styled, _unstyled or classic). These styles are overridden by css inside _diffs folder.
  • js : By Default main.js file inside this folder contains three call back java-script functions : AUI().ready(fn) : Executed when HTML in the page is loaded. Liferay.Portlet.ready(fn) : Executed after each portlet on the page has loaded. The callback receives two parameters: portlet Id and node.
    portlet Id is the ID of the portlet that was just loaded. node is the Alloy Node object of the same portlet. and Liferay.on(‘allPortletsReady’, fn) : Executed after everything else (including AJAX portlets) has finished loading.. We can over ride these by copying main.js file to _diffs/js/ folder.
  • images : Contains images required for portal. any custom images like page background image can be added under _diffs/images folder.
  • templates: Templates folder contains template files required to organize liferay portal’s basic html structure. It contains basic structure required for navigation menu(navigation.vm/ navigation.ftl), pop up(portal_pop_up.vm/ portal_pop_up.ftl), portlet(portlet.vm/ portlet.ftl) and portal content(portal_normal.vm/ portal_normal.ftl). We can override any of these files by copying them to _diffs/templates and modifying according to our requirement. Any modification/ addition of velocity variable can be done using init_custom.vm/ init_custom.ftl file.
  • WEB-INF/liferay-look-and-feel.xml : This configuration file contains theme Id, information related to theme settings, color schemes, roles, etc.
  • build.xml : This file contains the parent structure of theme with property tag :<property name=”theme.parent” value=”_styled” />. We can modify theme parent by modifying this property value and building theme again.


Thumbnail Image : Thumbnail image can be added to our custom theme by placing them inside docroot/_diffs/images directory with name thumbnail.png. Recommended image dimension of image is 150 pix width and 120 pix height. Below is the classic thumbnail image:


Note: Version used: Liferay 6.2 + Apache Tomcat 7.

Check out all Liferay related posts.