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
Table of Contents
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.
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.
