Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Liferay Themes

Liferay Themes

|Views: 467|Likes:
Published by niteshkorat

More info:

Published by: niteshkorat on Sep 23, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





Page 1 of 11 Created by Jorge Ferrer
Liferay Themes: Customizing Liferay’s Look & Feel
Liferay is a JSR-168 compliant enterprise portal. Starting with version 3.5.0, Liferay provides amechanism for developers to easily customize the user interface (look and feel). This is doneby creating themes. A theme is basically a user interface design aimed to make the portal moreuser-friendly and visually pleasing. Multiple themes can be added to the portal for users tochoose from. This article explains how you can use this powerful feature to customize the looand feel of Liferay to your own design.
A theme can control the whole look and feel of the pages generated by Liferay. The portal-sideof the page can be completely customized. Even the appearance of the portlets that come withLiferay can be customized using CSS, images, JavaScripts, and special templates.
The first important concept when designing a theme is the
 portlet template
. Every portlet inLiferay can be divided in two areas:1.
Portlet Content: the internal area that shows the
of the portal.2.
Portlet Template: the external area and can be customized for each theme.Using a template for the whole portal is much more flexible than just modifying a page top andbottom (which is the old way). The following pictures show several themes that have beendeveloped for real life websites.
Figure 1.1.2
PortletPortlet Content
Figure 1.1.1
Page 2 of 11 Created by Jorge Ferrer
Figure 1.1.3Figure 1.1.4Figure 1.1.5
Page 3 of 11 Created by Jorge FerrerWhen portlets are displayed, by default Liferay draws a box around each of them (this behavioris configurable though the file
). The appearance of this box can becompletely customized by using two templates – namely
. These two templates are responsible for drawing the portlet box shownbelow.The
template is responsible for drawing the buttons that control the portlet:maximize, minimize, move up, move down, close, restore, help (if help mode is supported) andedit preferences (if edit mode is supported). The portal tells the template which of these buttonsshould be shown in each situation.Besides the portal template and the portal box, the content of the portlet can also be modified.This will only be possible for portlets which follow some conventions. The most important is touse the CSS styles defined by the JSR-168 specification. The portlets packaged along withLiferay use these styles. They also use a special type of box called
every time somedemarcation is needed. The look and feel of these inner boxes can be modified in a similar wayas shown for the portlet box using the templates inner_top and inner_bottom.Liferay portal installation can have many available themes. By default the desktops of all usersand the websites of all groups use the default theme called 'classic', but this theme isconfigurable. Each user can change its own theme and the portal administrator can set adifferent theme for each group website. This is much more powerful than other CMS systemswhich use a single theme for the whole portal!Now that you have an idea of what can be done with a theme let’s take a look at how to createone.
Figure 1.1.6
Portlet boxPortlet content

Activity (5)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads
ecellesino liked this
Seif Daoud liked this
Chandresh_Prak_859 added this note
How old is this document ? What version of Liferay it was written for and does it hold for Liferay 6.0 ?

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->