Step by Step Guide to Create Theme for Liferay DXP 7

We have been working with Liferay platform ever since the release of Liferay 3.6 for developing enterprise web applications and over this time , not only we have seen the platform evolve and grow significantly with each release, it has also been recognized as a leader in the “Magic Quadrant for Horizontal Portals”– an yearly publication from Gartner ( A leading IT research firm), for the fifth year in a row.
With introduction of Liferay Digital Experience Platform (DXP) 7, creation of custom themes became a complex process, compared to Liferay 6.2 where themes can be easily created using Liferay developer studio and Eclipse.
Therefore in this blog, we have provided a step by step guide for creating your own custom theme for Liferay 7.0.
Mainly 3 steps are included:
- Prerequisite (i.e. environment) to start theme development
- Steps to build theme.
- Deploy theme
Setup of Liferay Theme
Theme generator has few inline dependencies. To make theme generator work, you need to follow following steps to resolve its dependencies.
- Uninstall latest version of node & Ruby and Rails if installed
- Install Node v4.2.2 via the link – https://nodejs.org/download/release/v4.2.2/node-v4.2.2-x64.msi
- Open the Command Prompt and Check the node version,
=> Type command –node –v
and check for output – v4.2.2
- Setup NPM environment by following below steps:
=> Open it in Command Prompt (CMD)
=> Go to C:\Users\ {current User} for Example: C:\Users\dharam.mali
=> Type
copy NUL .npmrc
=> You can see-> .npmrc file is created at C:\Users\dharam.mali
=> Open .npmrc file and add following path:
prefix=c:\Users\dharam.mali\.npm-packages
- Set environment variables for Node and NPM as follows:
=> NPM_PACKAGES (Add new System Variable) = C:\Users\ dharam.mali\.npm-packages
=> NODE_PATH (Add new System Variable) = %NODE_PATH%;c:\Users\dharam.mali\.npm-packages\node_modules
=> Add to (user variable) PATH = %NPM_PACKAGES% - Close the Command Prompt (CMD) and open again with Administrator, now Install Yeoman and gulp globally by executing the following command
npm install -g yo gulp
(It will take some time)
- Now you’re ready to install the Themes Generator. Install it by executing this command:
npm install -g generator-liferay-theme
Once everything is installed without error, then install Sass on Windows. Install Ruby Sass and Compass by below steps
- Download Ruby from: http://rubyinstaller.org/downloads/
=> Use the latest version: Ruby 2.3.1 (x64)
Installation:
a. Install it in Program file
b. Make sure to tick
i. “Add Ruby executable to you PATH
ii. Associate .rb and……
iii. Open CMD with administrator, type
gem -v
output: 2.5.1
- Now install SASS Compiler for CSS
a. To avoid error we will change source path for Ruby,
=> Open CMD with administrator, type:gem sources -a http://rubygems.org/
b. Install
gem install sass compass
Everything is installed properly, now it’s time to create theme!
- Go to directory when you want to create your theme: (for Example: E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes)
a. Open CMD with Administrator,
type :yo liferay-theme
Create New Theme name ”MyFirstTheme”
b. Now your theme is created, see folder created named “MyFirstTheme”
c. Go to your theme folder E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes\myfirsttheme-theme
d. In CMD type:
npm install
Now, to deploy theme in Liferay, follow the simple steps given below:
- Go to your theme folder in cmd, e.g. E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes\myfirsttheme-theme
- Type :
gulp build
- Once you get message “Finished ‘build’ after 17 s” type:
gulp deploy
Now your theme is ready for use.
Wrap-Up
In this Blog, we have provided step by step Installation guide and error free solution for developers which helps in time efficient and user friendly installation of theme in Liferay 7.