Liferay7 theme creation using Eclipse IDE & Gradle as build tool

Installations: 

Need to download and install the following for a workspace :

  • Eclipse Neon with IDE - 3.1.0
  • Liferay Plugins ce sdk 7.0- ga3
  • Liferay Portal ce 7.0-ga3(tomcat)

Now configure workspace and start the server.

Creating Liferay 7 Theme using Gradle :

To create a theme

Go to File  > New > Liferay Module project and give a project name and select Gradle as build type and select theme for Project Template Name and click on Finish. (Refer attached screenshot below)

                 

 So now a Theme is created as Liferay7(Project name as given).

Once the theme is created, the structure is as follows :

                

 

Now Gradle needs to be added to eclipse for bulding the theme.

Go to Eclipse menu bar Window > show view nad search for Gradle, form Gradle select Gradle tasks and gradle executions and click ok. Refer screen shot attached.

                 

 

Build Theme :

To build a theme Go to Gradle Tasks tab and doublick on buildTheme. If your theme is built successfully, a success message is shown in console. Refer Screenshot below

                

 

Go to the created theme and refresh it, build folder gets created with all the folders & files (css, images, js & templates). For folder structure refer below screen shot

                       

 

Now from Gradle Tasks double click on build, this will download all the dependencies needed.

Screenshot attached.

                             

 

Once you build the theme, folders like libs, resources and tmp gets created inside build folder.

                  

 

For any customizations replicate the folder structure as in buildTheme to src > main > webapp.

For css changes the pre-existing _custom.scss file can be used.

For a simple check i am changing the background-color of the wrapper.

After adding the changes, Go to Gradle Tasks and first do buildCss and then build.

A war file will be created in liferay7 > build > libs

                    

 

This war file file can be deployed either by dropping to deploy folder in liferay-ce-portal-7.0-ga3 or from portal, Go to control panel > Apps > App Manager

In App Manager click on the options from the right top corner and upload the file and install. Screen shot attached for reference.

                    

 

 

 

Theme is now deployed. To check Go to Navigation > Public Pages > Configure

                             

 

 

Now Go to Change current theme and the deployed theme will be visible in available themes popup

 

                                     

 

Select the theme and save it. Changes done to the theme are reflected.

Here i have changed the background-color of wrapper to dark grey, See the attached screen shot

 

                              

 

 

Blogs
I was wondering how to use compass in Liferay gradle theme
Hi Joye Luo,

I have checked compass in theme generator but not in IDE with gradle. I will check and will get back to you