Theme PlugIn in Liferay

What is theme

Starting with version 3.5.0, Liferay provides a mechanism for developers to easily customize the user interface (look and feel). This is done by creating themes. A theme is basically a user interface design aimed to make the portal more user-friendly and visually pleasing. Multiple themes can be added to the portal for users to choose from.

 Theme controls the complete look and feel of the page generated by liferay. The themes are hot deploy plugins which can completely transform the look and feel of the portal. The portal-side of the page can be completely customized using css, images, JavaScript and templates. Liferay provides a well organized, modular structure to its theme. This allows the theme developer to be able to quickly modify everything from the boarder around a portlet window to every object on the page, because all of the objects are easy to find.

The theme applying levels :

 In the liferay we have two levels of applying the themes

1.  Page level

In page level, the theme will be applied for one particular page. It will change the look and feel of each page.

2.  Community level

In community level, the theme will be applied globally for entire portal.

The default themes of the liferay:

The liferay enterprises provides four default themes 

1.  _Styled: Displays only borders of the page(when the theme plugin is loaded by the user, the default theme will be ‘_styled’ theme).

2.  Un styled- Displays only content of the page without borders.

3.  Classic- It is the complete theme of the liferay (To customize the theme the user uses classic theme only or we can say it is a parent theme).

4.  Control panel- It is for the purpose of admin.

Customizing the liferay theme:

Liferay’s themes are designed in such way that they can be very easy to create.

The process for creating new liferay theme

select new project> give the project name> select the theme plugin> Select the ‘finish’

With this process the new default theme will be loaded. In build.xml the value as show in default it will show as ‘styled’.  We have to change value as the ‘classic’ and refresh the project.

<property name="theme.parent" value="classic" />

ü In the docroot file the existing four folders will be displayed.

ü They are css,images,js(JavaScript),templets. In liferay technology we should not touch or modify any existing files.

ü So here to modify custom theme you have to create duplicates folders in diff folder.

ü Here the existing four folders contains

·     css: if desired you can create a whole new theme just by changing a css file. It all about look and feel

·     images: in image folder having the complete images of the website.

·     js(JavaScript): can be used to add special behavior. Its for validation purpose.

·     templates: a simple yet powerful tool to create templates.You will need to use it in order to customize the HTML generated by the theme

ü So in diff folder you have to paste the modifying files or documents as per in folder.