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
1 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
1 npm install -g yo gulp

(It will take some time)

Now youre ready to install the Themes Generator. Install it by executing this command:
1 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

1 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:
1 gem sources -a http://rubygems.org/
b. Install
1 gem install sass compass

Everything is installed properly, now its 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 :
1 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:
1 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 :
1 gulp build
 Once you get message Finished build after 17 s type:
1 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.

Talk to our Liferay consultant to know more about Liferay

DXP (Digital Experience Platform).