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:
- 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.
- 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
Site Title 