« Back to Blogs

Upgrade Theme from Liferay 7.0 to 7.1

Since Liferay 7.1 has been released, many of us have started upgrading their apps or themes in Liferay 7.1. In this blog steps to upgrade theme from Liferay 7.0 to Liferay 7.1 CE are mentioned. As Liferay 7.1 has given support of Bootstrap 4 and Lexicon 2.0, we can also leverage theme development with better quality.

The theme upgrade process can be categorized in two ways.

  1. Automatic Upgradation
  2. Manual Upgradation

These two categories are depending on which approach you have followed to develop your theme in Liferay 7.0/DXP. In Liferay 7/DXP, has very useful tool called Liferay Theme Generator tool or in other environments (Plugins SDK, Maven, etc) to develop a theme.

So let’s accelerate how to upgrade theme into Liferay 7.1

  1. Automatic Upgradation

Prerequisite:

  • Latest version 8.x.x of Liferay Theme Generator
  • Check and update devDependencies of "liferay-theme-deps-7.0" and "liferay-theme-tasks" in theme’s package.json file (at the root folder of theme).
"liferay-theme-tasks": "8.0.0-beta.4",
"liferay-theme-deps-7.1": "8.0.0-beta.4"

Since Gulp is introduced in Liferay 7.0, many of theme development task are designed in Gulp. Among them one is gulp upgrade. Theme which is created using Liferay Theme Generator can leverage gulp upgrade task. Here are steps to execute gulp upgrade command.

  • Navigate to your theme’s root directory
  • Execute gulp upgrade command to upgrade your theme.


When you execute the above command, it performs some upgradation tasks on theme.

  • As backup is an essential thing whenever performing upgradation, this command creates _backup folder in which your theme source are kept safe.
  • As per your base theme, it creates core code of its files.
  • It will collect all removed bootstrap and lexicon variables.
  • At last it updates version reference of Bootstrap, Liferay and Lexicon.


The gulp task also logs details about variables which are deprecated or not supported anymore and theme template changes. You will still require manual changes to upgrade your theme as this task is not enough to upgrade complete theme version.

After upgrading if you want to restore your theme to the previous state, execute gulp upgrade:revert


  1. Manual Upgradation

If your theme is built with any other environment (Plugins SDK, Maven, etc) then you can update your theme to Liferay 7.1 by performing below steps manually.

A. Update metadata of Theme:

  • Navigate to theme_root_directory/src/WEB-INF and open “liferay-plugin-package.properties” file.
    Update liferay-versions property value to 7.1.0+
    For eg.
    liferay-versions=7.1.0+
    

     

  • Open liferay-look-and-feel.xml file and update value of compatibility version to 7.1.0+
    For eg.
    <look-and-feel>
       <compatibility>
         <version>7.1.0+</version>
       </compatibility>
    </look-and-feel>
    

     

  • If your theme has package.json file then update devDependencies as given below.
    "devDependencies": {
        "gulp": "3.9.1",
        "liferay-theme-tasks": "8.0.0-beta.4",
        "liferay-theme-deps-7.1": "8.0.0-beta.4"
    }
    

 

B. For UI improvements:

  1. CSS Changes

    Follow the CSS changes as per described below guideline.

    • Rename css files
    • Update class variable
    • Update core imports of theme

Liferay 7.1 has replaced Lexicon CSS with new introduction of Clay CSS. The old aui css files’ name now will be renamed with clay.

css/

_aui_custom.scss

_aui_variables.scss

aui.scss

css/

_clay_custom.scss

_clay_variables.scss

clay.scss

 

Liferay 7.1 is built with Bootstrap 4 so you can now leverage its features and new elements. Here reference for bootstrap migration is given that can be useful while upgrading css rule to Bootstrap 4. At last you must update path of old aui lexicon to new clay paths that will update core imports of theme.

  1. Theme Template Changes

    As Velocity templates are now deprecated from Liferay 7.0, you have to go ahead with only Freemarker templates.

  2. Bootstrap 3 Lexicon Change Compatibility

    Liferay 7.1 ensures that your existing Bootstrap 3 and Lexicon css components are not broken while upgrading theme to Liferay 7.1. You can use them along with Bootstrap 4 and Clay css. Liferay gives facility to enable and disable those components as per concern with compatibility.

That’s it… Your theme is upgraded from Liferay 7.0 to 7.1 successfully now. Cheers!!


Stay connected and don’t miss our blogs on Liferay Portal Development. For Liferay Services please visit us.

Comments
No comments yet. Be the first.
contact-us Request a callback