Blog Post

...

How to build Liferay theme using SDK and Ant

Liferay Theming is a very common Liferay technology that widely used to define the look of a portal. It consist of different sets of Javascript, CSS and HTML delivered as a single WAR-file, which should have a special folder structure and configuration files. To create and build such WAR, Liferay SDK can be used that is designed to automate the process of Liferay Theme development. This article describes how to build already existing Theme and customize it using Liferay SDK Ant builder.

Assume that we are on Windows OS and Liferay (e.g., version 6.2-GA6) installed under the C:/Liferay folder:

Page-1-Image-2

Here are the steps how to build some predefined Liferay theme called “mueller-theme”:

1. Install and configure Apache Ant. This tool will perform theme building (dirs creation, sass compilation, zipping etc.). To check that Ant is correctly installed, run the command
in Command Line: ant –version:

Page-1-Image-3

2. Download Liferay 6.2 GA6 Plugins SDK (or other version) using the link:

Page-1-Image-4

Downloaded Liferay SDK includes Ant scripts to build the theme.

3. Extract SDK archive to some directory (e.g., to c:/SDK).

4. Copy predefined mueller-theme to c:/SDK/themes folder.

5. Create a file "build.[username].properties" in c:/SDK dir. For example, if system user name is “Doe” then properties file name should be “build.Doe.properties”. In this file there is an information about Liferay bundle location (located in c:/Liferay) should be provided:

app.server.type=tomcat
app.server.dir=c:/Liferay/tomcat-7.0.62
app.server.deploy.dir=${app.server.dir}/webapps
app.server.lib.global.dir=${app.server.dir}/lib/ext
app.server.portal.dir=${app.server.dir}/webapps/ROOT

6. Navigate to location where your theme was just copied (step 4): c:/SDK/themes/mueller-theme.

7. Make sure that build.xml exists in mueller-theme dir. Run from the Command Line the Ant command to build a theme’s war file: ant war. It can take up to 2 minutes to build a theme. If the building completes successfully, the message is shown:

Page-2-Image-5

The SDK path in this image is wrong, it should look like c:/SDK, but the overall war building process is presented.

8. The resulting theme war will be generated in c:/SDK/dist:

Page-2-Image-6

Current theme is designed in a way that all changes should be performed in scss-files based on which css-files are generated. The ant script above finds these scss files and generates css. So, for example, if you want to perform some change in mueller-theme\docroot\_diffs\css\header.scss, reproduce the 1-10 steps and the updated war will have these new changes.

In this post we’ve got through the topic of Liferay Theme building using its SDK and embedded Ant scripts. I hope it is helpful.

Comments (0)

Tags: liferay


0 comments

Leave a Comment