Liferay Theme Structure

The Liferay theme provides a custom look and feels for our portal application. (Learn more about how to create a Liferay theme project here).

In this article, we will learn about the Liferay theme files and folders structure. We will also learn how to change our custom Liferay theme application’s thumbnail image.

Version details: Liferay 6.2

Liferay theme default structures

We can create our theme by extending one of Liferay’s default theme structures, and they are _unstyled, _styled, or classic.

For most of the use cases, we can use either _styled/classic theme as parent structure, as it contains basic styling.

We can also add required customization to meet our required look and feel (The aui CSS may override our custom style and may have to override it where ever necessary).

Note that the _unstyled theme provides more freedom over the other parent theme structures(_styles/classic), as we are writing style from scratch.

Liferay Theme’s files and folder structure

A Liferay theme contains mainly the following folders/ files.

_diffs

This folder contains all the custom changes related to style, javascript, templates, images, etc.

Note that the folder names should be same as parent folder structure(Ex: /docroot/_diffs/css/ folder will contain all custom CSS files).

We can copy the Liferay generated files that we are customizing into this folder and modify them.

css

The folder contains basic styling of the parent structure(_styled_unstyled, or classic).

Note that the CSS inside the _diffs folder overrides these styles.

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. This callback function receives two parameters and they are portlet Id and node.

Here, the portlet Id is the ID of the current portlet. The node is the Alloy Node object of the same portlet.

Liferay.on(‘allPortletsReady’, fn) : The function is executed after everything else (including AJAX portlets) has finished loading. We can override these by copying the main.js file to the _diffs/js/ folder.

images

The folder contains the images required for the portal.

We can add any custom images like page background images under the _diffs/images folder.

templates

This folder contains template files required to organize the 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 also override any of these files by copying them to _diffs/templates and modifying them according to our requirements.

And also 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, details related to the theme settings, color schemes, roles, etc.

build.xml

This file contains the parent structure of the theme with property tag: <property name=”theme.parent” value=”_styled” />. 

We can also modify the theme parent by changing this property value and building the theme again.

Thumbnail Image

We can add the thumbnail images to our custom theme by placing them inside the docroot/_diffs/images directory with the name thumbnail.png.

The recommended image dimension of the image is 150 pix width and 120 pix height.

Below is the classic thumbnail image.

thumbnail

Conclusion

In this article, we learned about the Liferay theme’s files and folder structure.

We also learned about the Liferay theme thumbnail image and how to change the default thumbnail image of our Liferay theme application.