Creating Liferay Theme

With the help of the Liferay theme, we can easily customize the look and feel of the Liferay portal application. Themes are hot deployable plugins. Creating a Liferay theme is using the Liferay Developer Studio(LDS) IDE is a simple task.

In this article, we will be creating a Liferay theme using Liferay Developer Studio and the basic architecture of the theme application.

Version details: Liferay 6.2.

Creating a simple Liferay theme

Let’s create a simple Liferay theme using Liferay Developer Studio.

Create a new Liferay plugin project from File >> New >> Liferay Plugin Project.

Add the project name of the theme in New Liferay Plugin Project window, select plugin type value to the theme,  and then click on next as shown below.

Select Theme parent and Theme framework from the drop-down menu and click on finish. Here we have selected _styled as theme parent as it adds basic required styles to the project and the best option to start with theme development.

Velocity is a template language that is simple and widely used. check the official apache documentation here: http://velocity.apache.org/

Below is the generated theme project structure. It contains all auto-generated CSS, images, templates details.

All our custom changes will go under the _diffs folder with the same folder structure(Ex: all custom CSS files will be available under _diffs/CSS).

These custom files will replace default contents once we build our project.

Finally, deploy the created theme. Now theme is ready for use and can be applied to the site/ pages. 

The theme can be applied to a particular page using Edit >> Look and Feel >> Define a specific look and feel for this page option.

Choose the newly created theme from the Available Themes section and click on the Save button.

We can also apply the theme for all the available site pages from Site Administration >> Site Pages >> Look and Feel section.

Conclusion

In this article, we learned how to create a simple Liferay theme.

We also learned how to apply the created theme to the Liferay portal application.