Blogs

Liferay Theme generator tool is an easy way to create themes in Liferay v6.2 and 7. You would not need SDK for this but remember that there are some prequisities in terms of installation and configuration of few components before you can actually create theme and deploy to your Liferay.

Sharing this quick and short article on to highlight what are those key components to be installed.

High Level Steps required for configuration:

1.  Install NodeJS  ( Download the NodeJS from official site). Make sure to download 64bit or 32 bith as per your system conifguration.  
2. Set the proxy settings using the npm config command in case internet access is available through proxy. Command:  npm config set proxy http://username:password@proxyHost:proxyPort
3. Set Node JS to the PATH Environment Variable
4. Install the gulp using command:  npm install –g gulp
5. Install Yo using command: npm install –g yo
6. Post this, Install liferay theme generator using the command :  npm install -g generator-liferay-theme
7. Create a folder (let us say theme-generator). This is required so that you can create themes under this folder.
8. Run following command to generate theme : yo liferay-theme.   It will ask you name, id of theme and version of Liferay for which you want to create the theme.
9. Before running step 8 you may need additonal components like Python and Visual Studio C++ (2008+) in case they are not there on your system as a pre-requisities.Install Python and Visual Studio by downloading from their official site.
10. It is recommended to install Ruby , Saas and Compass to have better quick aroundtime for creating the theme
11. Install Ruby from their official site
12. Install Saas using command: gem install sass
13. Install Compass using command: gem install compass

Theme for Liferay 6.2: Here are few screenshots of creating theme and then deploying the same on Liferay v6.2

Step 1. Run command yo liferay-theme and enter the name,id and select version. Please note that you will need provide the Liferay 6.2 Tomcat path

Step 2. Use gulp build command to build the theme

Step 3: Use gulp deploy command to deploy the same directly to the Liferay v6.2.  Once this process is successfull, you will see the theme war file being directly copied to the deploy folder and then automatically getting deployed for you.