Creating Liferay Themes with Maven

Some time ago I posted on how you can get started creating portlets with Liferay Maven SDK now I’m going to show how you can add themes to your project. If you need a refresher on how to get started check out this post.

1) Open command prompt or terminal and go to your project directory. Next we are going to create a theme using the Liferay theme template. Run:

mvn archetype:generate \
    -DarchetypeArtifactId=liferay-theme-archetype \
    -DarchetypeGroupId=com.liferay.maven.archetypes \
    -DarchetypeVersion=6.1.0 \
    -DartifactId=sample-theme \
    -DgroupId=com.liferay.sample \
    -Dversion=1.0-SNAPSHOT
For 6.1 EE ga1 use -DarchetypeVersion=6.1.10. 

Now you have your theme project in sample-theme directory with following structure.

sample-theme
sample-theme/pom.xml
sample-theme/src
sample-theme/src/main
sample-theme/src/main/resources
sample-theme/src/main/webapp
sample-theme/src/main/webapp/WEB-INF
sample-theme/src/main/webapp/WEB-INF/liferay-plugin-package.properties
sample-theme/src/main/webapp/WEB-INF/web.xml

2) Open the theme pom.xml file. From the properties section remove liferay.version and liferay.auto.deploy.dir properties. These properties should be defined in the pom.xml in your project root just as we did with the portlet project.

You should also note that there’s two additional properties liferay.theme.parent and liferay.theme.type. These set the parent theme and the theme template language just like in ant based plugins sdk. The property liferay.theme.parent however allows you to define basically any war artifact as the parent. The syntax is groupId:artifactId:version or you can use the core themes: _unstyled, _styled, classic and control_panel.

3) Now you can add your customizations in src/main/webapp. Just follow the same structure as you would do in _diffs. So your custom.css would go to src/main/webapp/css/custom.css.

4) Once you’ve done your customizations and want to create the war file just run

mvn package

It will create the war file just like with any maven war type project. Another thing it will do is download and copy your parent theme and then overlay your changes on top of it. It will also create a thumbnail from src/main/webapp/images/screenshot.png just like ant based plugins sdk does. These are accomplished by adding the theme-merge and build-thumbnail goals into the generate-sources phase.

5) Now deploy the theme into your Liferay bundle by running:

mvn liferay:deploy
Blogs
Very informative article..These guidelines can easily help anyone in creating Liferay Themes with Maven ...
*** DO NOT USE THIS APPROACH ***

We tried and failed miserably -- it wasted a ton of time. Specifically, the Mavenized Theme building has some terrible bugs that the author doesn't seem interested in fixing. STICK WITH THE ANT BUILD SYSTEM UNTIL AT LEAST THE "_DIFFS" DIRECTORY BUG IS FIXED (it's completely unsupported).

Here's just a small list of issues that were submitted as a patch nearly a year ago but completely ignored: https://github.com/mikakoivisto/liferay-maven-incubation/pull/3
I'm sorry you've had problems but all known issues are fixed. _diffs is not needed with maven as same functionality is supported the maven way. See instructions above. The old incubation project is deprecated as there's an official project now. If you experience any issues please report them to JIRA http://issues.liferay.com/browse/MAVEN. I'll try to fix bugs as soon as I can but taking contributions to new features might take a while because we want to keep the Maven version aligned with the ant based sdk.
First of all, thanks for providing support for Liferay development using Maven! It is greatly appreciated. A few questions...

I've been looking on an official Maven site for the liferay-maven-plugin, but haven't found one. Do you have any plans to make available such a site to serve as documentation of the plugin? Currently, I often look in the plugin's source to figure out how to configure the different features.

Recently, I was in was trying to figure out how to package two themes inside a single plugin using Maven. It looks like the code in your incubator repository is renaming the webappDir configuration property to webappDirectory. Is this planned to be merged in the next version? For others who need to package multiple themes together, I've written a small pom.xml snippet with my solution here:

https://projects.savoirfairelinux.com/projects/ctr-liferay/wiki/Liferay_Maven_Plugin_-_Snippets#Configure-a-Liferay-Maven-Plugin-61-theme-plugin-that-contains-two-themes
Thanks Jonas for sharing.

The liferay-maven-incubation project is out dated and will not be maintained. All current development will occur against the official Liferay Maven Support project at http://github.com/liferay/liferay-maven-support. We currently don't have any plans for maven site but documentation will be published one way or another for the plugin.

Currently it's best to use the archetypes we've created or to look at Mojos the parameters will be mostly the same as those in ant build files however I've tried to provide defaults to minimize the required configuration for each plugin.
Yeah, we've been using the maven integration for themes, portlets and hooks since 6.0.5 was released. It works fine for us.
I met a problem when I create theme by using Maven. in the <executions> node, it gives me an error as followed:
-Plugin execution not covered by lifecycle configuration: com.liferay.maven.plugins:liferay-maven-plugin:6.1.0:theme-merge (execution: default, phase: generate- sources)
-Plugin execution not covered by lifecycle configuration: com.liferay.maven.plugins:liferay-maven-plugin:6.1.0:build-thumbnail (execution: default, phase: generate-sources)
Does someone have any idea about it? I've spent a lot of time on it. It's really frustrating.
Hey Rujuan Xing, this is a m2e-eclipse specific issue that will be addressed in the upcoming 2.0.0-M1 release of liferay IDE. I'll be posting more info on liferay.org blogs in a few days.
Hi,

I tried this against version 6.1.20ga2 ee edition, but when i go to the control panel i get the following error in the log :
15:21:48,329 WARN [http-bio-8080-exec-6][ThemeLocalServiceImpl:149] No theme found for specified theme id . Returning the default theme.
How can i fix this?
Nice post, thank you @Mika!
Question: How can I apply the Theme inheritance[1] (not from the classic theme but from a customized one) with maven SDK? via maven overlays[2]?

[1]https://www.liferay.com/documentation/liferay-portal/6.1/development/-/ai/theme-inheritan-4
[2]http://maven.apache.org/plugins/maven-war-plugin/overlays.html
@ Adolfo Benedetti : To use parent theme concept using maven please follow below steps.

1. Create Parent Theme using either _styled , classic or other out of box themes as parent theme. To do that use <liferay.theme.parent>_styled</<liferay.theme.parent> tag of pom.xml

2. Create Child Theme using parent theme update child theme's pom.xml and configure custom parent theme.
<liferay.theme.parent>com.xyz.theme:xyz-parent-theme:1.0.0</liferay.theme.parent>

where com.xyz.theme (parent theme group id)
xyz-parent-theme (parent theme artifcatid)
1.0.0 (parent theme version)

you can open parent theme pom.xml and get groupid , artifactid and version.

Build :
1. First build parent theme using mvn targets.
2. Build Child theme using mvn targets.

Whenever you are making any changes to parent theme please make sure to build it first before deploying child theme otherwise child theme will not get updates.

Theme Resources (i.e. css , js , templates) Precedence:
1. Child Theme Resources
2. Parent Theme Resource
3. LR out of box _Styled theme

Hope it helps you to create parent/child relationship of theme using maven.
Hi,

I used maven to create a Classic derivated theme succesfully, but i can't do it with Control Panel theme. I'd to create a theme for the Liferay Control Panel, so I'm setting "control_panel" as the parent theme. But it seems something i wrong because when compiling and creating the theme war, Maven doesn't copy the Control Panel Theme files, it just copies the files from "_unstyled" and "styled" themes.

This is the piece of the console output where you can see it:

[INFO] --- liferay-maven-plugin:6.1.2:theme-merge (default) @ epsilon-liferay-cpanel-theme ---
[INFO] Parent theme group ID com.liferay.portal
[INFO] Parent theme artifact ID portal-web
[INFO] Parent theme version 6.1.2
[INFO] Parent theme ID controlpanel
[INFO] Copying html/themes/_unstyled/templates to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/templates
[INFO] Copying html/themes/_unstyled/css to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/css
[INFO] Copying html/themes/_unstyled/images to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/images
[INFO] Copying html/themes/_unstyled/js to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/js
[INFO] Copying html/themes/_styled/css to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/css
[INFO] Copying html/themes/_styled/images to /opt/src/eplus/trunk/epsilon/core/frontend/liferay/cpanel-theme/target/epsilon-liferay-cpanel-theme-1.0.0-SNAPSHOT/images


Thanks in advance for your help.

j.viso
Hi,

What I know is the parent theme is configured in build.xml file. Check to see if your parent theme is configured to be control panel theme.

Example:
<project name="Splash-Screen-theme" basedir="." default="deploy">
<import file="../build-common-theme.xml" />

<property name="theme.parent" value="../Registered-Member-Theme" />
</project>
Hi Rujuan,

I'm using Maven, not Ant, so the configuration is on the pom.xml, and this is the property configuration:

<properties>
<liferay.theme.parent>control_panel</liferay.theme.parent>
...
</properties>
can you please assist us with the instructions for Liferay 7?