In this post, we are going to discuss how to import and upgrade liferay-6.2.0 portal themes to liferay-7.1.0 themes.
Follow the instructions carefully to have a successful import and upgrade....
Before we Import and Upgrade, there are pre-requisites has to be met, make sure you have following tools available in your local environment.
You can use the following links to install Node Package Manager, Yeoman and Gulp.
Import of liferay-theme is a straight forward approach, but the way I want to discuss here is slightly different than the one what has been said in other tutorials or articles. I am not going to refer 6.2.0 theme directly instead I make a copy of it in a separate workspace and then import the same...
To have this done, follow the instructions carefully....
Open a terminal and navigate to one of your favourite locations and create folders to hold the components of the theme...
Now create the following files as mentioned....
Now Copy and Paste the folders available in _diffs folder of the original 6.2.0 theme folder to the _diffs of hello-world-theme/docroot/_diffs
We are almost at the end of making things right...
Run the command below to import the theme..
You can refer the same in the image given below... in case you need it.
The console looks the one below when you provide the absolute path of the theme's root folder.
Press enter to execute the import.
At the end of the command execution, the console window ask you to provide the absolute path to the local application server, please provide the one which you have installed in your local machine.
In my case, I have given the Tomcat Application Server associated with the liferay portal, the image below would detail it in a comprehensive manner...
Once the theme is imported successfully we will have the directory called hello-world-theme in our workspace.
Use the above command to check it out, you should see something like the one given in the image below..
This concludes the import of liferay 6.2.0 theme.
Now we have successfully imported the theme, the next step is to upgrade it to 7.1.0.
To upgrade the 6.2.0 theme to 7.1.0, use the following command
The execution of the above command is depicted in pictures given below...the images are self explanatory.
This upgrade process converts the components from 6.2.0 to 7.1.0 to its best, but there would be certain errors which has to be fixed manually.
Correcting errors manually is a daunting task but ..... "Patience is a virtue".
This concludes the upgrade of liferay 6.2.0 themes to 7.1.0
Thanks.
Follow the instructions carefully to have a successful import and upgrade....
Before we Import and Upgrade, there are pre-requisites has to be met, make sure you have following tools available in your local environment.
| Prerequisites | |||
|---|---|---|---|
| Name | Version | Download Page | Direct Link |
| Node | 11.15.0 | Node Package Manager Download Page | Click to Download Directly |
You can use the following links to install Node Package Manager, Yeoman and Gulp.
Installation of Node Package Manager
The node package manager version given in the pre-requisite secition is different than the one that is mentioned in the link, but the installation procedure remains the same
Node Package Manager Installation
Installation of Yeoman and Gulp
Yeoman and Gulp Installation
Import and Upgrade of Liferay 6.2.0 Theme
Import of liferay-theme is a straight forward approach, but the way I want to discuss here is slightly different than the one what has been said in other tutorials or articles. I am not going to refer 6.2.0 theme directly instead I make a copy of it in a separate workspace and then import the same...
To have this done, follow the instructions carefully....
Open a terminal and navigate to one of your favourite locations and create folders to hold the components of the theme...
> mkdir hello-world-theme
> mkdir -p hello-world-theme/docroot
> mkdir -p hello-world-theme/docroot/_diffs
> mkdir -p hello-world-theme/docroot/WEB-INF
Now create the following files as mentioned....
> touch hello-world-theme/build.xml
> touch hello-world-theme/docroot/WEB-INF/liferay-look-and-feel.xml
> touch hello-world-theme/docroot/WEB-INF/liferay-plugin-package.properties
Updating build.xml file
Copy and Paste the content given below in build.xml file.
<?xml version="1.0"?>
<!DOCTYPE project>
<project name="hello-world-theme" basedir="." default="deploy">
<import file="../build-common-theme.xml" />
<property name="theme.parent" value="_styled" />
</project>
<!DOCTYPE project>
<project name="hello-world-theme" basedir="." default="deploy">
<import file="../build-common-theme.xml" />
<property name="theme.parent" value="_styled" />
</project>
Updating liferay-look-and-feel.xml
Copy and Paste the below contents to liferay-look-and-feel.xml file and save it.
<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_2_0.dtd">
<look-and-feel>
<compatibility>
<version>6.2.1+</version>
</compatibility>
<theme id="hello-world-theme" name="hello-world-theme">
<template-extension>ftl</template-extension>
<color-scheme id="01" name="Green">
<css-class>theme_green</css-class>
<color-scheme-images-path>${images-path}/color_schemes/green</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Orange">
<css-class>theme_orange</css-class>
<color-scheme-images-path>${images-path}/color_schemes/orange</color-scheme-images-path>
</color-scheme>
</theme>
</look-and-feel>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_2_0.dtd">
<look-and-feel>
<compatibility>
<version>6.2.1+</version>
</compatibility>
<theme id="hello-world-theme" name="hello-world-theme">
<template-extension>ftl</template-extension>
<color-scheme id="01" name="Green">
<css-class>theme_green</css-class>
<color-scheme-images-path>${images-path}/color_schemes/green</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Orange">
<css-class>theme_orange</css-class>
<color-scheme-images-path>${images-path}/color_schemes/orange</color-scheme-images-path>
</color-scheme>
</theme>
</look-and-feel>
Updating liferay-plugin-package.properties file
Copy and Paste the following content in liferay-plugin-package.properties file and save it.
name=hello-world-theme
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
long-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.2.0+
#required-deployment-contexts=\
# resources-importer-web
resources-importer-developer-mode-enabled=true
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
long-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.2.0+
#required-deployment-contexts=\
# resources-importer-web
resources-importer-developer-mode-enabled=true
Now Copy and Paste the folders available in _diffs folder of the original 6.2.0 theme folder to the _diffs of hello-world-theme/docroot/_diffs
We are almost at the end of making things right...
Importing 6.2.0 Theme
Now everything is set to import the theme from 6.2.0 to 7.1.0Run the command below to import the theme..
> yo liferay-theme:import
The above command would ask you to provide the absolute path of the theme folder, provide the one we have just created in previous steps...You can refer the same in the image given below... in case you need it.
The console looks the one below when you provide the absolute path of the theme's root folder.
Press enter to execute the import.
At the end of the command execution, the console window ask you to provide the absolute path to the local application server, please provide the one which you have installed in your local machine.
In my case, I have given the Tomcat Application Server associated with the liferay portal, the image below would detail it in a comprehensive manner...
Once the theme is imported successfully we will have the directory called hello-world-theme in our workspace.
> cd hello-world-theme
> ls
Use the above command to check it out, you should see something like the one given in the image below..
This concludes the import of liferay 6.2.0 theme.
Theme Upgrade from 6.2.0 to 7.1.0
Now we have successfully imported the theme, the next step is to upgrade it to 7.1.0.
To upgrade the 6.2.0 theme to 7.1.0, use the following command
> gulp upgrade
The execution of the above command is depicted in pictures given below...the images are self explanatory.
This upgrade process converts the components from 6.2.0 to 7.1.0 to its best, but there would be certain errors which has to be fixed manually.
Correcting errors manually is a daunting task but ..... "Patience is a virtue".
This concludes the upgrade of liferay 6.2.0 themes to 7.1.0
Thanks.
