Themes customize the overall look and feel of Liferay and were introduced in version 3.5 of the portal.

Overview #

It is a collection of .jsp or velocity templates that contain fragments of the various components that make up the HTML sent to the client browser. Though most theme template bundles contain a variety of template files, the "required" template files are:

• portal_normal.[vm|jsp] Controls the layout of portal templates for "normal" pages
• portal_pop_up.[vm|jsp] Controls the layout of portal templates for "pop-up" pages

portal_init.[vm|jsp] is not really a required template, but by convention, it exists, and is included by both the portal_normal and portal_pop_up template.

NOTE: It appears that Velocity is now the template engine of choice. The Velocity context is created and initialized in com.liferay.taglib.util.ThemeUtil.includeVM().

A theme can have one or more "color schemes", which gives even more flexability to the look and feel of a theme. The Ant script /portal/portal-web/build.xml contains the target build-color-scheme that is capable of generating images that match a color scheme (using the services of com.liferay.portal.tools.ColorSchemeBuilder).

The themes that are available to a portal are described in WEB-INF/liferay-look-and-feel.xml (as well as WEB-INF/liferay-look-and-feel-ext.xml). These themes are read in by com.liferay.portal.service.impl.ThemeLocalUtil. Theme definitions are held in in-memory collections of com.liferay.portal.model.Theme objects (and not in the database).

Themes can be limited to certain company Ids (by including or excluding the themes in the <company-limit> section of WEB-INF/liferay-look-and-feel.xml).

Themes can be either part of the build, or "hot deployable." A "Hot deployable" theme is simply the theme(s) directory(ies) bundled up into a .WAR file with the WEB-INF directory containing the liferay-look-and-feel.xml that describes the theme(s). A hot deploy theme bundle can contain more than one theme.

The basic structure of a theme directory (whether in a .WAR, or part of the build) is: Root theme directory: /html/themes/<nameOfTheme> Image files used by theme: <themeRoot>/images Templates that describe the themes: <themeRoot>/templates

Generally speaking, themes are not layed out in tables. Best practice has placing visual elements inside of tags, then defining background, position, etc. of these elements in <themeRoot>/templates/css_cached.vm

Upgrade to 4.2.x #

Any upgrade to a theme from versions 4.0-4.1.3 to 4.2.x must change the following files:

WEB-INF/liferay-look-and-feel.xml#

1. Change version number to 4.2.1 (or whatever version you're upgrading to) resulting in:

 <version>4.2.1</version>

css_cashed.vm#

1. Add:

 .pop-up-outer { border: 1px solid #383838; background-color: #FFFFFF; }
 .pop-up-inner { border: 1px solid #747474; }
 .pop-up-header { background-color: #000000; height: 25px; }
 .pop-up-title { color: #FFFFFF; font-weight: bold; padding-left: 10px; }
 .pop-up-close a { color: #FFFFFF; margin-right: 7px; white-space: nowrap; text-decoration: underline; }

2. At this block of code:

 .portlet-box {
   height: auto;
   text-align: center;
   #if ($browserSniffer.is_ie_5_5_up($request))
     height: 100%;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$themeDisplay.getPathThemeImage()/custom/portlet-bg.png',         
     sizingmethod='scale');
   #else
     background-image: url($themeDisplay.getPathThemeImage()/custom/portlet-bg.png);
   #end
     background-color: $colorScheme.getPortletBg();
 }

Delete line "text-align: center;" resulting in:

 .portlet-box {
   height: auto;
   #if ($browserSniffer.is_ie_5_5_up($request))
     height: 100%;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$themeDisplay.getPathThemeImage()/custom/portlet-bg.png',         
     sizingmethod='scale');
   #else
     background-image: url($themeDisplay.getPathThemeImage()/custom/portlet-bg.png);
   #end
     background-color: $colorScheme.getPortletBg();
 }

portal_normal.vm#

1. Delete 2 lines:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

:and

 {{{"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">}}}

2. At this block of code:

 #if ($themeDisplay.isShowPageSettingsIcon())
  <a href="$themeDisplay.getURLPageSettings().toString()">$languageUtil.get($pageContext, "page-settings")</a>
 #end

:Add another link resulting in:

 #if ($themeDisplay.isShowPageSettingsIcon())
  <a href="$themeDisplay.getURLPageSettings().toString()">$languageUtil.get($pageContext, "page-settings")</a> - 
  <a href="javascript: void(0);" onClick="$themeDisplay.getURLLayoutTemplates()">$languageUtil.get($pageContext, "layouts")</a> 
 #end

3. At this block of code:

 {{{ <div id="layout-my-places">
  #set($myPlacesPortlet = $staticFieldGetter.getFieldValue("com.liferay.portal.util.PortletKeys", "MY_PLACES"))
  $taglibLiferay.runtime($myPlacesPortlet)
 </div>}}}

:Add align=right to div resulting in:

 {{{ <div id="layout-my-places" align=right>
  #set($myPlacesPortlet = $staticFieldGetter.getFieldValue("com.liferay.portal.util.PortletKeys", "MY_PLACES"))
  $taglibLiferay.runtime($myPlacesPortlet)
 </div>}}}

portlet_top.vm#

1. At this block of code:

 {{{<table border="0" cellspacing="0" cellpadding="0" width="100%" onMouseOver="toggleById('portlet-small-icon-bar_$portletId', true)"   
 onMouseOut="toggleById('portlet-small-icon-bar_$portletId', true)">}}}

:Add class="portlet-header-bar" resulting in:

 {{{<table class="portlet-header-bar" border="0" cellspacing="0" cellpadding="0" width="100%" 
  onMouseOver="toggleById('portlet-small-icon-bar_$portletId', true)" onMouseOut="toggleById('portlet-small-icon-bar_$portletId',  
  true)">}}}

See Also #

• Liferay Themes Guide