Official Blog of Azilen

The Techie Explorations

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.

liferaythemeblog1

  • Setup NPM environment by following below steps:

=> Open it in Command Prompt (CMD)

liferaythemeblog2

=> Go to C:\Users\ {current User} for Example: C:\Users\dharam.mali
=> Type

=> 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

    (It will take some time)
  • Now you’re ready to install the Themes Generator. Install it by executing this command:

Once everything is installed without error, then install Sass on Windows. Install Ruby Sass and Compass by below steps

Installation:
a. Install it in Program file
b. Make sure to tick
i. “Add Ruby executable to you PATH
ii. Associate .rb and……

liferaythemeblog3

iii. Open CMD with administrator, type

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:

    b. Install

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 :

Create New Theme name ”MyFirstTheme”

liferaythemeblog4

         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:

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 :

liferaythemeblog5

  • Once you get message “Finished ‘build’ after 17 s” type:

liferaythemeblog6

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).

 

 

Liferay Knowledgebase

Comments on this post

  1. Is it necessary to open CMD through Administrator? I mean for security reasons in our company I don’t have administrator right to CMD. So can it be done in any other way?

    Ujjainee
    • “npm install” command will creae some files in C drive. If your windows user is not having such permission, you will need to run this command with user having admin rights over c drive.

      If your user roll is Adminstrator, then you can run CMD by normal user.

      Dharam Mali
  2. Rather! This was a truly excellent post. Thank you for your supplied advice

    Audra
  3. I have created theme through theme- generator so i need it in eclipse please can you tel me how to import that theme in eclipse

    karthik

Trackbacks

  1. How to Create an Angular 2.0 Application in Liferay DXP to Fetch the OOTB Advantages? | Official Blog of Azilen says:

    […] If you are not familiar with Liferay theme creation, please find the primary knowledge at Step by Step Guide to Create Theme for Liferay DXP. […]

Leave a reply