Tag: Liferay 7 Responsive theme

Liferay 7 Theme

Liferay 7 Theme

Create a theme in liferay is main part after devloping portlet. Liferay 7 provides easy steps to create a theme.

Simple two steps are there to follow:

  1. Install the Themes Generator

To start with theme theme generator has several dependencies that to be installed . You need to install Node.Js . To download it click Here

Note: To avoid any potential compatibility issues, we recommend installing the Long Term Support (LTS) version of Node.js

Verify installation by following command :

node -v

-NPM(Node Package manager) is installed with Node.js

Next step to create .npmrc file which is used to specify the global location.

To create .npmrc file create one text file as text.txt and than open command prompt and fire

ren text.txt .npmrc.  Command will rename the file as .npmrc

Than edit that .npmrc file and add following line


change username according to your username.

After that you need to set several enviornment variables:

NPM_PACKAGES : C:\Users\USERNAME\.npm-packages

NODE_PATH : C:\Users\USERNAME\.npm-packages\lib\node_modules
In path variable add : C:\Users\USERNAME\.npm-packages

This will allow you to install yeoman and gulp.

Next to install yeoman and gulp

Fire following command in command prompt:

npm install -g yo gulp

You have completed all requiered dependency for theme generator.

Next step to install Theme generator

fire following command to command prompt

npm install -g generator-liferay-theme

Liferay theme allow Saas:

Before we move ahead it is important to know about Saas(Syntactically Awesome Style Sheets) is a CSS preprocessor. It is to CSS what CoffeeScript is to Javascript.
There are two way by which saas can be install are node saas and ruby saas.

Installing Sass from node-sass

By default, the generator uses Sass from node-sass. node-sass requires node-gyp, which in turn requires Python and Visual Studio. The node-gyp installation instructions explain how to set up node-gyp, Python, and Visual Studio. Since Visual Studio is a particularly large dependency, if you aren’t already using Visual Studio you might want to consider using Ruby Sass instead of node-sass.

Installing Ruby Sass and Compass

You need to install Ruby via the Ruby installer. After installing ruby we need to use gem command and to use that we need to set ruby to path variable.

Add following line to path variable : C:\Ruby23-x64\bin

Note : This path may very as per your installation version and system. Please alter path according to your installation directory.

After that run following command :

gem install saas compass

Theme generator and all other requiered are installed.

  1. Generate Theme

Create theme using following command

yo liferay-theme

Provide answers to theme as ;

1) What would like to call your theme?

– Here you provide name of your theme.

2) Would you like to use this as themeId?

– If you want to use displayed as themeId then just press enter else enter new themeId.

3)Which version of Liferay is this theme for?

– Here you can select 7.0 using arrow keys.

4) Enter the path to your app server directory ?
Here you enter path to tomcat where you want to deploy your theme.

5)Enter the URL to your production or development site?
Here provide URL of your site.

now theme is generated , in package.json file change rubySaas property from false to true

For deploy the theme fire following command;

gulp deploy