Liferay theme generator is the new way to create theme, layout in liferay 7 support rather using traditional way of creating theme using SDK in liferay 6.2. Theme Generator is also used to upgrade theme plugin. Liferay has leveraged number of new features and new front end libraries to advance theme development with the theme generator integration. There might be some hindrance for installing theme generator. But, after completing installation process, This is the most efficient, less time consuming and independent way to develop user interface and user experience components.
Consider below points to steer clear of the installation restraints :-
-
Install all the packages under the directory having all the permissions.
- Select only latest stable version of dependent package to avoid version conflicts.
Install following required dependencies for theme creation:-
-
Node js (recommended Long Term Support (LTS) )
-
Yeoman
-
Gulp
-
Requirements :- To run tasks such as build, clean, deploy and so on.
-
Command to install : npm install -g gulp
After installing above dependencies, Follow below steps to create theme.
1) Run below command to Install theme generator.
npm install -g generator-<generator_name>
e.g. To create “liferay-theme” generator : npm install -g generator-liferay-theme
2) Go to the directory where theme needs to be created and run below command to create theme by running theme generator.
yo <generator_name>
3) Follow the instructions provided by theme generator
a) Enter a name for your theme :- (e.g., Test Theme)
b) Enter a theme ID (e.g., tester-theme), or press enter to accept the default.
c) Select the version of your Liferay instance (e.g, 7.0).
Following user customizable files will be created under theme structure :-
- package.json
- .gitignore
- gulpfile.js
- src\WEB-INF\liferay-look-and-feel.xml
- src\WEB-INF\liferay-plugin-package.properties
- src\css\_custom.scss
d) Enter the path to your app server directory : e.g., E:\theme-generator\liferay-server-7.0\tomcat-8.0.32
e) Enter your deploy directory path : e.g., E:\theme-generator\liferay-server-7.0\deploy
f) Enter the url to your production or development site : e.g., http://localhost:8080 for local development server.
(The information related to app server can be configured in liferay-theme.json file in root directory of created theme.)
Note :- You may go through installation process for required dependencies during this steps.
Important : - By default, Liferay theme uses node-sass which in turn, needs node-gyp, python and visual studio as large dependencies. This task is ,of course, will get lots of effort to work. So, we recommend to install ruby-sass and compass which reduce hurdles and increase development efficiency.
To build and deploy theme, we need to install below dependencies :-
-
Ruby
-
Sass
-
Requirements :- Syntax engine to write css using mixins, variable, nested syntax efficiently.
-
Command to install : gem install sass
-
Compass
To use ruby sass and compass as build and deploy tool, follow below steps :-
-
Locate package.json file in root directory of created theme and change property rubysass value from false to true.
-
Go to theme directory in console and run below command to acknowledge node package manager for using ruby sass and compass as build tool for your theme.
npm i --save gulp-ruby-sass
-
Follow the build and deploy commands to build theme package and deploy to app server.
gulp build
gulp deploy
For more implementation details or support, you may contact us at [email protected].
For professional paid support, you may contact us at [email protected] .
