This article contains a guide on how to add themes to a project using the Liferay Maven SDK.
Resolution
1. Open command prompt or terminal and go to your project directory.
2. Next, create a theme using the Liferay platform theme template and run the following command:
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
Now you have your theme project in sample-theme directory with the 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 done 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 of _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 are done with 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
Additional Information
For more information on how Maven is supported, see our page on Fix Delivery Methods.