Step by step guide to create theme for liferay dxp 7
Download as PPTX, PDF1 like560 views
The document is a comprehensive step-by-step guide for creating custom themes for Liferay DXP 7, highlighting the complexities compared to previous versions. It outlines prerequisites, installation of necessary tools such as Node.js, Ruby, and Sass, and provides commands to generate and deploy themes. Ultimately, it serves as a resource for developers seeking efficient and error-free theme installation for Liferay DXP 7.
Step by step guide to create theme for liferay dxp 7
- 1. Step by Step Guide to Create Theme for Liferay DXP 7
- 2. Introduction of Liferay Digital Experience Platform (DXP) 7 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.
- 3. Mainly 3 steps are included: • Prerequisite (i.e. environment) to start theme development • Steps to build theme. • Deploy theme Step by Step Guide for Creating Your Own Custom Theme for Liferay 7.0.
- 4. Setup of Liferay Theme Theme generator has few inline dependencies. To make theme generator work, you need to follow following steps to resolve its dependencies. • Uninstall latest version of node & Ruby and Rails if installe • Install Node v4.2.2 via the link – https://nodejs.org/download/release/v4.2.2/node-v4.2.2-x64.msi • Open the Command Prompt and Check the node version, => Type command – 1 node –v
- 5. Check for output – v4.2.2
- 6. Setup NPM environment by following below steps: => Open it in Command Prompt (CMD)
- 7. => Go to C:Users {current User} for Example: C:Usersdharam.mali => Type 1 copy NUL .npmrc => You can see-> .npmrc file is created at C:Usersdharam.mali => Open .npmrc file and add following path: prefix=c:Usersdharam.mali.npm-packages
- 8. =>NPM_PACKAGES (Add new System Variable) = C:Users dharam.mali.npm-packages =>NODE_PATH (Add new System Variable) = %NODE_PATH%;c:Usersdharam.mali.npm-packagesnode_modules => Add to (user variable) PATH = %NPM_PACKAGES% Close the Command Prompt (CMD) and open again with Administrator, now Install Yeoman and gulp globally by executing the following command (It will take some time) 1 npm install -g yo gulp
- 9. Now you’re ready to install the Themes Generator. Install it by executing this command: Once everything is installed without error, then install Sass on Windows. Install Ruby Sass and Compass by below steps Download Ruby from: http://rubyinstaller.org/downloads/ => Use the latest version: Ruby 2.3.1 (x64) 1 npm install -g generator-liferay-theme
- 10. Liferay Theme Installation: a. Install it in Program file b. Make sure to tick i. “Add Ruby executable to you PATH ii. Associate .rb and……
- 12. iii. Open CMD with administrator, type Output: 2.5.1 Now install SASS Compiler for CSS a. To avoid error we will change source path for Ruby, => Open CMD with administrator, type: b. Install 1 gem -v 1 gem sources -a http://rubygems.org/ 1 gem install sass compass
- 13. Now it’s time to create theme! Go to directory when you want to create your theme: (for Example: E:projectsliferay-developer-studioworkspaceliferay-workspacethemes) a. Open CMD with Administrator, type : 1 yo liferay-theme
- 14. Create New Theme name ”MyFirstTheme”
- 15. b. Now your theme is created, see folder created named “MyFirstTheme” c. Go to your theme folder E:projectsliferay-developer- studioworkspaceliferay-workspacethemesmyfirsttheme-theme d. In CMD type: 1 npm install
- 16. Go to your theme folder in cmd, e.g. E:projectsliferay-developer- studioworkspaceliferay-workspacethemesmyfirsttheme-theme Type : Deploy theme in Liferay 1 gulp build
- 18. Once you get message “Finished ‘build’ after 17 s” type: 1 gulp deploy
- 19. Wrap-Up In this PPT, we have provided step by step Installation guide and error free solution for developers which helps in time efficient and user friendly installation of theme in Liferay 7. Talk to our Liferay consultant to know more about Liferay DXP(Digital Experience Platform).
- 21. Thanks You www.azilen.com Let us know if you have any Question! [email protected] | +1-972-325-2243