« Back

Creating Liferay Themes with Maven

Company Blogs March 15, 2012 By Mika Koivisto Staff

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
Threaded Replies Author Date
Very informative article..These guidelines can... Erin Caroll March 19, 2012 9:02 PM
*** DO NOT USE THIS APPROACH *** We tried and... Laura Kram March 19, 2012 7:27 PM
I'm sorry you've had problems but all known... Mika Koivisto March 19, 2012 10:58 PM
First of all, thanks for providing support for... Jonas Fonseca March 21, 2012 9:06 PM
Thanks Jonas for sharing. The... Mika Koivisto March 22, 2012 4:07 PM
[...] Hello Andre, you should definitely check... Anonymous March 24, 2012 10:58 AM
Yeah, we've been using the maven integration... Dana Oredson March 28, 2012 12:45 PM
I met a problem when I create theme by using... Rujuan Xing October 19, 2012 7:51 AM
Does someone have any idea about it? I've spent... Rujuan Xing October 19, 2012 7:51 AM
Hey Rujuan Xing, this is a m2e-eclipse specific... Gregory Amerson March 13, 2013 10:52 PM
Hi, I tried this against version 6.1.20ga2 ee... Bart Van den Abeele June 20, 2013 6:25 AM
I used "theme" as artifact id. After renaming... Bart Van den Abeele June 20, 2013 7:38 AM
Nice post, thank you @Mika! Question: How can I... Adolfo Benedetti March 20, 2014 2:59 AM
@ Adolfo Benedetti : To use parent theme... Varun Shah May 30, 2014 1:21 PM
Hi, I used maven to create a Classic derivated... J Viso July 22, 2014 5:38 AM
Hi, What I know is the parent theme is... Rujuan Xing July 22, 2014 7:56 AM
Hi Rujuan, I'm using Maven, not Ant, so the... J Viso July 22, 2014 11:24 PM

Very informative article..These guidelines can easily help anyone in creating Liferay Themes with Maven ...
Posted on 3/19/12 9:02 PM.
*** 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
Posted on 3/19/12 7:27 PM.
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.
Posted on 3/19/12 10:58 PM in reply to Laura Kram.
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_Mav­en_Plugin_-_Snippets#Configure-a-Liferay-Maven-Plugin-61-theme-plugin-that-conta­ins-two-themes
Posted on 3/21/12 9:06 PM.
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.
Posted on 3/22/12 4:07 PM in reply to Jonas Fonseca.
[...] Hello Andre, you should definitely check Mika's blog post about creating Liferay themes using maven SDK: http://www.liferay.com/web/mika.koivisto/blog/-/blogs/13011588 Flag Please sign in to flag this... [...] Read More
Posted on 3/24/12 10:58 AM.
Yeah, we've been using the maven integration for themes, portlets and hooks since 6.0.5 was released. It works fine for us.
Posted on 3/28/12 12:45 PM in reply to .
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)
Posted on 10/19/12 7:51 AM.
Does someone have any idea about it? I've spent a lot of time on it. It's really frustrating.
Posted on 10/19/12 7:51 AM in reply to Rujuan Xing.
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.
Posted on 3/13/13 10:52 PM in reply to Rujuan Xing.
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?
Posted on 6/20/13 6:25 AM.
I used "theme" as artifact id. After renaming it to "test-theme-3" i had no errors.
Posted on 6/20/13 7:38 AM in reply to Bart Van den Abeele.
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/developm­ent/-/ai/theme-inheritan-4
[2]http://maven.apache.org/plugins/maven-war-plugin/ov­erlays.html
Posted on 3/20/14 2:59 AM.
@ 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.
Posted on 5/30/14 1:21 PM.
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:

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


Thanks in advance for your help.

j.viso
Posted on 7/22/14 5:38 AM.
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>
Posted on 7/22/14 7:56 AM in reply to J Viso.
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.par­ent>
...
</properties>
Posted on 7/22/14 11:24 PM in reply to Rujuan Xing.