Liferay 7 theme development with IDE

Liferay IDE 3.1 M1 has been released. Previously i explored Liferay 7 theme development using theme generator as expalined on page. Since than I was curious to do it through Liferay IDE that seems to more convenient for developers. In Liferay IDE 3.1 M1, I have noticed that theme project templates are added. Explaining steps so that it might be helpful for the community.

Follow the below steps to create themes in Liferay 7 using IDE 3.1 M1.

Step-1:-

Go to Liferay workspace and create Liferay Module Project as shown in below. Select Project Template for theme. 

After creating theme module project. Project structure is created to develop custom theme.

At this point if you look at the project structure, there is no build folder generated.

Step-2:-

Now build theme using following Gradle Task. 

It will generate theme files in the build folder as shown below.

This files are generated from classic styled theme, if you want to override files just place them in the first-theme/src/main/webapp folder.

Like if you want to override portal_normal.ftl, create folder templates in first-theme/src/main/webapp/ as follows and place portal_normal.ftl.

 

Step-3:- Build theme using following gradle task.

 

It will package theme in war in the  first-theme/build/libs folder. Deploy this WAR file to see the custom changes. 

 

10
Blogs
I'm not sure if perhaps Liferay has changed something with their latest IDE release but for me, there is no longer and option in the IDE for theme. Same goes for the Blade CLI -- which I guess makes sense since I am fairly sure both the CLI and the IDE are using the same blade toolkit. Only option now is to do it using yeoman + gulp with the liferay-theme-generator.
Hi, I have followed this tutorial to build first-theme. However, I have an issue whereby the site_logo_height and site_logo_width are returned zero.
May I know how should I fix this issues?
After running buildTheme, none of the theme files have been generated for me. Is there something I'm missing?
Hi, thanks for the nice post.

I followed above said for ga4 and i didn't get the folder structure after "buildTheme" i.e i didn't generate theme files in the build folder as shown above.

is there any solution for this or it's ga4 bug ???
Hi, Even I am facing same issue. I am not to be get the build files after clicking on "buildTheme". Can i know what's going wrong with the IDE? How you have resolved it?
It has been a few months since I last tried, but I never managed to get the IDE to generate the theme files.

Instead I manually copied them out of the plugins-sdk.
[...] I wrote blog for theme development with IDE . Further I explored the way to configure gradle project. I would like to share those steps that I have experienced hard to find and many developers I... [...] Read More