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 Comments

Please sign in to comment.

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.

Please sign in to reply.

Hi Andrew

In latest 3.1 GA 1 release, this is available.
https://web.liferay.com/web/yanan.yuan/blog/-/blogs/3-1-ga-1-and-installers-released

Regards

Please sign in to reply.

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?

Please sign in to reply.

After running buildTheme, none of the theme files have been generated for me. Is there something I'm missing?

Please sign in to reply.

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 ???

Please sign in to reply.

Hi Om Prakash,

Check latest release https://web.liferay.com/web/yanan.yuan/blog/-/blogs/3-1-1-ga-2-and-installers-released.

Folder structure is generated.

Regards

Please sign in to reply.

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?

Please sign in to reply.

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.

Please sign in to reply.

Make sure that your build folder is not hidden.

https://discuss.gradle.org/t/is-there-a-setting-that-makes-build-folder-visible-in-eclipse/14941

Please sign in to reply.

[...] 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

Please sign in to reply.

Menu Display

Blogs

Category Filter

More Blog Entries

Extending Liferay OSGi Modules

Overriding Module JSP in Liferay 7 using Liferay IDE