11 mins
Apr 03, 2024
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:
Theme generator has few inline dependencies. To make theme generator work, you need to follow following steps to resolve its dependencies.
and check for output – v4.2.2
Setup NPM environment by following below steps:
=> Open it in Command Prompt (CMD)
=> Go to C:\Users\ {current User} for Example: C:\Users\dharam.mali
=> Type
copy NUL .npmrc
=> 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
(It will take some time)
Installation:
a. Install it in Program file
b. Make sure to tick
i. “Add Ruby executable to you PATH
ii. Associate .rb and……
iii. Open CMD with administrator, type
gem -v
output: 2.5.1
b. Install
Create New Theme name ”MyFirstTheme”
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:
npm install
Now, to deploy theme in Liferay, follow the simple steps given below:
Now your theme is ready for use.