Basic Liferay Theme Development

Liferay Theme Development is the main aim of this article. Liferay Theme controls the whole look and feel of the portal. When we log into the portal we can see many sections like navigation bar, dockbar, logo, footer etc. These all are part of liferay theme. Liferay Theme Development becomes more easier if you are good in css. In this article we are not going to explain the advance concept of Liferay Theme Development. This article would be more useful for those who are new to Liferay Theme. 

[focus]

A Liferay Theme is a collections of css, images, js, fonts, xml and template (i.e., VM, Free Marker..) files. When we install liferay portal it comes with some default themes.

[/focus]

[focus]

By default Liferay Portal has four out of the box themes: _unstyled, _styled, classic,and control_panel. Sometimes these themes are not enough for our requirements. We need to develop our own custom themes.  

[/focus]

For Liferay Theme Development there 3 ways. One is using command prompt, second one is using Liferay IDE and the third one is using maven. In this article we are going to discuss how to use command prompt and Liferay IDE. In another article we will talk about maven to develop theme. 

Creating a new liferay theme by Command Prompt is straight forward. Before using command prompt you need to ensure 2 things

i) There should be ANT installed in your machine or there should be ant in your environment variables. Without it the command wont work. 

ii) Plugin SDK should be properly configured.

Using Command Prompt: 

To run the command go to the theme folder of your plugin SDK. create is the command to create new theme which takes two parameters. See the details in the below screen shot.

 As shown in the above we have just created a sample theme. Go to your themes directory of the plugin SDK to check the newly created theme. 

[focus]

Just creating a new theme is not sufficient until and unless we don’t add any look and feel changes. In our custom theme all the changes should go under _diffs directory of a theme. To make this article short we are not going to discuss what are the files need to modified. At first the newly created theme does not contain any css, images or js files. Navigate to the newly created theme by command prompt and run the command ant deploy. This command will do lot of things behind the scene.Now just for understanding create a directory called css under _diffs. Copy custom.css from docroot/css of the newly created theme and past it into /docroot/_diffs/css folder. Do some changes in this file and deploy it by the command ant deploy. From the control panel apply the new theme and observe the look and feel. 

[/focus]

Create Theme by Using Liferay IDE: 

Form your eclipse navigate to File -> New -> Liferay Plugin Project. Follow the below screen shot and hit Finish button. It will do the same job as described above. 

[focus]

This article is very very basic. It does not explains the details of liferay theme. However the beginners can use this article for their quick start guide. Once theme created you can play around it.

[/focus]