Liferay theme is used to customize the look and feel of liferay portal application.  Themes are hot deploy-able plugins. In this post we will see how to create liferay theme using Liferay Developer Studio and basic architecture of theme.

Following are the steps to create liferay theme using Liferay Developer Studio:

  • Create a new liferay plugin project from File >> New >> Liferay Plugin Project. Add project name of theme in New Liferay Plugin Project window , select plugin type value to “theme ” and click on next as shown below:

CreatingTheme1

  • Select Theme parent and Theme framework from drop down and click on finish. Here we have selected _styled as theme parent as it adds basic required styles to the project and best option to start with theme development. Velocity is a template language which is simple and widely used. check the official apache documentation here: http://velocity.apache.org/

CreatingTheme2

  • Below is the generated theme project structure. It contains all css, images, templates details in separate folders which are generated by default. All our custom changes will go under _diffs folder with same folder structure(Ex :all custom css files will be placed under _diffs/css). These custom files will replace default contents, once we build our project.

CreatingTheme3

  • Finally, deploy the created theme. Now theme is ready for use and can be applied for site/ pages. 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 Available Themes section and click on save button as shown below:

CreatingTheme4

  •  We can also apply theme for all the available site pages from Site Administration >> Site Pages >> Look and Feel section as shown below:

CreatingTheme5.PNG

Check out all Liferay related posts.

Note: Version used: Liferay 6.2 + Apache Tomcat 7.