How to create a theme in Liferay 7 DXP

Here is the list of software that required to create liferay 7 DXP theme

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

Installing Node and NPM

First we need to download and install the node if you have already installed and configured Node, feel free to skip this section. We can download Node.js from http://nodejs.org and follow the instructions mentioned here:

Download the installer for your operating system from http://nodejs.org/. Nodejs provides different installer as per your platform. It also include the npm package manager

•  If the installation asks for the system restart, then restart your computer.
• Once the system is restarted, we can check whether Node.js was set up properly or not.
•  Open the command prompt and run the following command to make sure you are installing latest version:
  • node –version // to verify the version

Configure the NPM Path and environment

After NodeJS installation we need to configure the NPM path. we will create .npmrc config file and set manually npm-packages path to keep these plugins at one directory.

Create .npmrc file at user Home directory C:/User/{user-name} with below parameters:

prefix=C:/Users/harmeet.singh/.npm-packages
NPM_PACKAGES=C:/Users/harmeet.singh/.npm-packages
NODE_PATH=%NODE_PATH%:%NPM_PACKAGES%/lib/node_modules

Now we need to install yomen and gulp plugin by giving below command:

• npm install -g yo
• npm install -g gulp

Ruby Installation

Now we need to install ruby sass and compass.

• Download and Install Ruby from here http://rubyinstaller.org/downloads/
• Add the ruby bin path to windows environment variable PATH , so we can access the gem globally

Then run the below command with gem keyword such as (gem sources -r https://rubygems.org):

• sources -r https://rubygems.org
• sources -a http://rubygems.org
• install sass compass

Steps for creating a theme in Liferay 7 DXP

• Create one folder in your local drive where you want to create your theme.
• Now open the cmd in same folder
• Next run this command —yo liferay-theme

• Enter your Theme name “My First Liferay 7 Theme (no need to give “-” between spaces) press enter
• Next —-enter (it will ask you..would you like to use as ID)
• Then select liferay theme version 7.0 or 6.2
• Next — enter the path of app server directory
• then enter the URL of your site – http://localhost:8080

Now we need to update the theme package.json to use Ruby SaSS and Compass by default it use Node SaSS:

• Edit package.json in you theme directory folder and set rubySass to true
• templateLanguage to vm (by default it set to “ftl”)

We have change vm in liferay-look-and-feel.xml file because you will get below error: SERVLET_CONTEXT_/templates/portal_normal.ftl does not exist

Run gulp build to build the theme

Note: if you get the below error while build your theme:

Starting ‘build:compile-ruby-sass’…
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)”)

To solve this error do this:

edit the file “\theme-folder\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');
//}

Run gulp build deploy again to deploy your theme and start your development

Note:  Make sure your are connected with internet while creating theme.