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
    • Liferay 7 theme migration
  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 upgradeLiferay 6.2 to Liferay DXP theme 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
    • Liferay 6.2 to 7 migration
  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

Liferay 7 theme migration

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

 

 

Hope this helps!!

4 Comments

  1. Bunny

    Inihsgts like this liven things up around here.

    Reply
  2. Parth

    Super duper helpful !!! Thanks a lot !!!

    Reply
  3. Simi Rajan

    I get an error when building the migrated theme.

    Error: property missing ‘:’ near line 10:7
    the line in _custom.scss is below

    $dockbar-gradient-start: #118ADE;

    Reply
  4. Simi Rajan

    Also after deploying this theme to my site i get errors in console
    12:40:08,450 WARN [http-nio-8081-exec-1][code_jsp:172] {code=”404″, msg=”ProxyServlet: /o/MAIPF-theme/css/mixins”, uri=/o/MAIPF-theme/css/mixins}
    Please help

    Reply

Leave a Reply to Simi Rajan Cancel reply

Your email address will not be published. Required fields are marked *