Liferay DXP theme migration

Liferay DXP theme migration tutorial will give you detailed steps to migrate old themes to Liferay DXP platform. You must install Node,Ruby and yo,gulp,generate-liferay-theme NodeJS modules. Please go through “Liferay DXP Theme generator installation” tutorial and install the required software’s.

High Level steps:

1. Install the NodeJS, Ruby
2. Import Existing theme using  yo liferay-theme:import
3. Upgrade the theme : Upgrades bootstarp 2 to 3 and Liferay version to 7
4. Fix the suggested issues in the console
5. Build and deploy the theme

Upgrade Liferay 6.2 theme to Liferay DXP Theme

1. Navigate to folder where you want to create theme. This would be always {liferay-workspace}\bundles\themes folder. In this tutorial,I am using new folder
2. Import theme : We need to import the theme to make use of Liferay theme generator utilities
   • Run the command :  yo liferay-theme:import
   • 
3. Give the absoulte path of the theme. In this tutorial, We are gonna migrate existing theme build on Liferay 6.2

   1. ? What theme would you like to import? (C:\Users\jay\yo-generated-themes\mythem
      e-theme) D:\liferay-work\LR6_CE\liferay-plugins-sdk-6.2\themes\jntu-theme

4. It will ask for the server path  and give the absolute server path

   1. [19:55:37] Starting 'plugin:init'...
      ? Enter the path to your app server directory: (C:\Users\jay\yo-generated-theme
      s\tomcat)D:\liferay-work\LR7EE\lds\workspace\liferay-workspace\bundles\tomcat-8.0.32

5. Now, we imported the Liferay 6.2 theme and next task would be to upgrade to Liferay 7
6. Gulp upgrade would upgrade bootstrap 2 to bootstrap 3 and Liferay version from  gulp upgrade
7. Change to theme directory (cd jntu-theme) and Run upgrade command :  gulp upgrade
8. Now you can see below result with warnings and list of files need to modify

   •  
     ---------------------------------------------------------------
     Bootstrap Upgrade (2 to 3)
     ---------------------------------------------------------------
     File: src/css/bootstrap.css
      Line 1: Padding no longer affects width or height, you may need to change yor rule (lines 1-1)
      Line 1: You would change height from "30px" to "40px"
      Line 1: You would change height from "30px" to "42px"
      Line 1: You would change height from "46px" to "66px"
      Line 1: You would change height from "46px" to "68px"
      Line 1: "btn" has changed to "btn btn-default"
      Line 1: "radio-inline" has changed to "radio-inline"
     File: src/css/custom.css  No errors
     File: src/css/dataTables.css No errors
     File: src/css/font-awesome.min.css No errors
     File: src/css/main.css No errors
     File: src/css/simplesidebar.css No errors
     File: src/css/style.css Line 116: Padding no longer affects width or height, you may need to change our rule
      Line 117: You would change height from "91px" to "181px"
      Line 139: Padding no longer affects width or height, you may need to changeour rule (lines 139-144)
      Line 143: You would change height from "450px" to "510px" Line 391: Padding no longer affects width or height
      Line 463: Padding no longer affects width or height you may need to change our rule (lines 463-470)
      Line 473: Padding no longer affects width or height, you may need to change our rule (lines 473-479)
      Line 474: You would change width from "350px" to "430px"
      Line 516: Padding no longer affects width or height, you may need to change our rule (lines 516-523)
      Line 530: Padding no longer affects width or height, you may need to change our rule (lines 530-537)
      Line 531: You would change width from "450px" to "470px"
     ----------------------------------------------------------------
      Liferay Upgrade (6.2 to 7)
     ----------------------------------------------------------------
     
     File: portal_normal.vm
      Warning: #dockbar() is deprecated, replace with #control_menu() for new admi
     n controls.
      Warning: not all admin controls will be visible without #control_menu()
     [20:09:06] Finished 'upgrade:log-changes' after 12 ms
     [20:09:06] Finished 'upgrade' after 1.12 min

   • 
9. Now fix the fixes (Just forget css issues )
10. verify the package.json that can be found on liferay theme root directory. Liferay version and depencies are updated to 7

    1. {
        "name": "jntu-theme",
        "version": "0.0.0",
        "main": "package.json",
        "keywords": [
        "liferay-theme"
        ],
        "liferayTheme": {
        "baseTheme": "styled",
        "screenshot": "",
        "rubySass": false,
        "templateLanguage": "vm",
        "version": "7.0"
        },
        "devDependencies": {
        "gulp": "^3.8.10",
        "liferay-theme-tasks": "*",
        "liferay-theme-deps-7.0": "*"
        },
        "publishConfig": {
        "tag": "6_2_x"
        }
       }

11. Build the newly migrated theme with command: gulp build
12. Now deploy the theme: gulp build

That’s it. your theme is now migrated to Liferay 7 and deployed to Liferay 7 tomcat.

Hope this helps!!