Liferay DXP Theme Generator

Liferay DXP theme generator tutorial guide on  theme generator tools installation and sample theme creation. Liferay DXP has moved theme generation,migration to NodeJS using yomen,gulp and theme generator plugins. There is no drastic changes in the theme structure from Liferay 6.2 to Liferay 7 themes and you can still use create themes using eclipse under Liferay Plugin SDK and Modules.

Liferay theme generator has below tasks:

  • Theme creation (Liferay6.2 and & versions)
  • Layouts
  • Themelets creation
  • Migrating old themes Liferay 7 version

What is Theme?

Look and feel of the applications are managed through themes with CSS, JS and Templates.Click here to access the list of theme tutorials that explained for Liferay 6.2. Liferay DXP uses Theme Generator Node plugin to create themes.

What is Themelets?

Themelets are reusable components that can be included in theme which  contains css ,java script and templates code  fragments that can would reusable  across the application

Lets look into  Liferay DXP theme creation and you need to install below software’s::

  1. NodeJS –  for yomen,gulp and generator-liferay-theme
  2. Ruby Installed – Ruby is to create SaSS and Compass CSS elements
  3. Yo – Node JS plugin
  4. Gulp – Node JS Plugin

Liferay theme generator installation steps:

Download and Install NodeJS and dependencies:

  • Download NodeJS from https://nodejs.org/download/release/v4.4.2/. Install only Version 4.42 because for latest version liferay theme generator is not working. I tried with  latest version(6.9.1), bu faced some couple of issues.
  • Install NodesJS and Node Package Manager (NPM) should also be installed along with Node.js
  • open command prompt check the  node js and npm versions
    • node -v
    • npm -v.Liferay Node Js
  • Configure the NPM Path and environment
    • When you run NodeJS  plugin manager, plugins will be installed into  USER_HOME\AppData\Roaming\npm. We will create a directory to keep these plugins at one directory. so create .npmrc config file and  set manually npm-packages path.
    • Create .npmrc file at user  Home directory
    • In Windows, create .npmrc file at  C:/User/{user-name} with below parameters:
      • prefix=C:/Users/jay/.npm-packages
        NPM_PACKAGES=C:/Users/jay/.npm-packages
        NODE_PATH=%NODE_PATH%:%NPM_PACKAGES%/lib/node_modules
    • In Linux – create .npmrc file at /users/[username]/.npm-packages
    • prefix= /users/jay/.npm-packages
      NPM_PACKAGES= /users/jay/.npm-packages
      NODE_PATH=${NODE_PATH}:${NPM_PACKAGES}/lib/node_modules
  • Install yomen plugin by giving below command  :  npm install -g yo 

    Liferay theme generator tutorial

  • Install gulp :  npm install -g gulp

  • Install liferay theme generator :   npm install -g generator-liferay-theme

  • check the yomen nad gulp commands in the command prompt:
    •  yo -v
    • gulp -v
    •  Ideally they should work. if yo and gulp commands are not working, then add .npm-packages directory  to windows PATH variable for quick fix.
  •  yo,gulp  packages are downloaded to /User/{user-home}/.npm-packages and set this .npm-packages path to Windows PATH variable.Liferay Node JS Package pathLiferay Theme generator Tutorial
  • verify yo command in the command prompt and you will get below screen Liferay Yo Theme install

    Ruby setup and Installation

  • Liferay themes generator uses NodeJS SaSS and Compas and again it requires visual studio, so  we will use ruby sass and compass instead NodeJS css components.
  • Download and Install Ruby from here http://rubyinstaller.org/downloads/
  • add the  ruby bin  path to windows PATH variable, so that you can access gem in command prompt.
  •  Execute below commands by opening ruby commander: I faced issues with SSL issue while executing commands, so bypass requests over HTTP instead on HTTPS.
  1. gem sources -r https://rubygems.org
    gem sources -a http://rubygems.org 
    gem install sass compass 

 

Liferay Themes Generator

The below  3 steps involved in theme creation

  • Create Theme
  • Modify theme to use Ruby CSS
  • Create Theme Structure
  • Deploy Theme

Step1: Create Theme

  • Verify  below commands in command promot, otherwise update windows PATH to NodeJS plugins directory
    • yo (Check here for additional commands: https://www.npmjs.com/package/generator-liferay-theme)
    • gulp
    • gem -v
  •  Liferay Work space folder has theme to contain all theme projects. Navigate to  lifearay-workspace\themes in the command prompt and execute below command:
    • yo liferay-theme yo liferay-theme

Step2: Update Theme to use Ruby SaSS and Compass

  • Node JS uses Node’s Sass by default and need to change this with Ruby
  • Edit package.json in javasavvy-theme folder and
    • set rubySass to true
    • templateLanguage  to vm (by default it set to “ftl”)
    •  change <template-extension>vm</template-extension> in liferay-look-and-feel.xml file. otherwise you will get below error: SERVLET_CONTEXT_/templates/portal_normal.ftl does not exist
    • {
       "name": "javasavvy-theme",
       "version": "1.0.0",
       "main": "package.json",
       "keywords": [
       "liferay-theme"
       ],
       "liferayTheme": {
       "baseTheme": "styled",
       "screenshot": "",
       "rubySass": true,
       "templateLanguage": "vm",
       "version": "7.0"
       },
       "devDependencies": {
       "gulp": "^3.8.10",
       "liferay-theme-tasks": "*",
       "liferay-theme-deps-7.0": "*"
       },
       "publishConfig": {
       "tag": "7_0_x"
       }
      }
  • Go to  javasavvy-theme directory and run the below command:  npm i –save gulp-ruby-sass

Step3 : Create Theme Structure using gulp build

  • Execute the below command to  create theme structure:
    • gulp build
  • Now Theme structure is created  like  below and we need to copy the files from build to src directory.
  • Plugin SDK theme development uses _diffs folder to modify theme, but  theme generator uses src folder.
  • dist folder contains generated theme war filesLiferay theme generator example

Step4: Deploy the theme

Run command : gulp deploy to deploy the theme. It will copy the javaasvvy-theme.war to  deploy folder under bundles directory

you can change the deployment directory also  in liferay-theme.json file which can be found in theme root directory

 "LiferayTheme": {
 "appServerPath": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\tomcat-8.0.32",
 "deployPath": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\deploy",
 "url": "http://localhost:8080",
 "appServerPathPlugin": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\tomcat-8.0.32\\webapps\\javasavvy-theme",
 "deployed": true,
 "pluginName": "javasavvy-theme"
 }
}

 

Note: you might get the below error:

[18:18:44] Starting ‘build:compile-ruby-sass’…
[18:18:53] error build/_css/aui/lexicon/lexicon-base/mixins/_nameplates.scss (Line 14: Invalid CSS after “(max-width: “: expected expression (e.g. 1px, bold), was “$screen-xs-max)”)

then edit the file “\javasavvy-theme\node_modules\liferay-frontend-theme-unstyled\css\aui\lexicon\lexicon-base\_nameplates.scss” and  comment below code:

//.nameplate-label-autofit-xs-max {
// @include nameplate-label-autofit('max-width: $screen-xs-max');
//}

After deploying theme, you may see below warning but still liferay 7 supports velocity:

9 WARN  [Refresh Thread: Equinox Container: 7023f7e4-d0b3-0016-19e8-d1eb27696407][ThemeHotDeployListener:129] Support of Velocity is deprecated. Update theme javasavvy to use FreeMarker for forward compatibility.

10 Comments

  1. Pingback: Liferay gulp tasks,Liferay theme generator, liferay theme tasks,gulp tasks

  2. Pingback: liferay dxp theme migration,Liferay 7 theme migration,liferay DXP theme

  3. ashish

    Control panel is not visible using vm in liferay7..

    Reply
  4. Raghu

    New fix pack is released to resolve the issue.
    https://issues.liferay.com/browse/LPS-67225

    Reply
  5. Ujjainee

    Hello,
    I’m getting the following error while installing yeoman and same for gulp also. Please can you say what is the problem?
    C:\Users\986216>npm install -g yo
    npm ERR! Windows_NT 10.0.10240
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install” “-g” “yo”
    npm ERR! node v4.2.2
    npm ERR! npm v2.14.7
    npm ERR! code EAI_AGAIN
    npm ERR! errno EAI_AGAIN
    npm ERR! syscall getaddrinfo

    npm ERR! getaddrinfo EAI_AGAIN registry.npmjs.org:443
    npm ERR!
    npm ERR! If you need help, you may report this error at:
    npm ERR!

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Users\986216\npm-debug.log

    Reply
    1. Jayaram Pokuri (Post author)

      Seems to be you are accessing from office firewall which is not allowing to download yeoman and gulp. Try to add proxy settings in node js to bypass or connect over port 80 rather 443

      Reply
      1. Ujjainee

        I’m now facing this error when I’m giving the following command:gem sources -a http://rubygems.org
        ERROR: Could not find a valid gem ‘sass’ (>= 0), here is why:
        Unable to download data from https://rubygems.org/ – no such name (https://rubygems.org/specs.4.8.gz)

        what should be done?

        Reply
  6. Dayanand Tiwari

    Hi,
    Can we place our set of jsp,js,css and images into somewhere and then build and deploy….
    If yes then where????

    Reply
  7. Andrew Jardine

    Nice start but I would stray from recommending that people use Velocity over Freemarker. Velocity was the standard for Liferay (the default) up until 6.2. There are several advantages in using FTL. First and foremost, it doesn’t SILENTLY fail. When something is wrong in your script, it actually explodes and gives you a hint as to what you need to fix. If has proper built ins for type conversion, better control flow and so much more. But the best reason to use FTL is that you are able to leverage the Liferay tag libraries as part of the FTL markup. Given the breadth of taglibs that are available, this can be an extremely effective way to leverage out of the box components with just a few lines of code — rather than trying to roll your own. You should really give FTL a shot. It’s a much better option for your (and your clients) solutions.

    Reply
  8. VMD

    Thank you for clear instructions! It did work 🙂

    Reply

Leave a Reply to Dayanand Tiwari Cancel reply

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