Themes in Liferay Portal

Themes

Themes make it possible to easily switch among different presentational or “look and feel” layers. Within a single .war file, a designer/developer can deliver an integrated package of JSP (or Velocity), Javascript, image and configuration files that will control all presentation logic and design attributes for a portal community. Liferay Portal 3.5 comes with a handful of pre-made themes that showcase the versatility and creative possibilities themes enable:

Figure 2.1: “Classic” Theme	Figure 2.2: “Breeze” Theme
Figure 2.3: “Velocity” Theme	Figure 2.4: “Genesis” Theme
Figure 2.5: “Clean” Theme	Figure 2.6: “Brochure” Theme

Themes in Liferay Portal 3.5 are also incredibly flexible in how they can be applied:

• Different themes can be assigned to specific user groups (a.k.a. communities).
• Users can choose a unique theme for their own personal portal page
• Both Java Server Page (JSP) and Velocity (VM) languages are supported
• Themes are hot-deployable as .wars (when supported by the app server)

To select a different theme, simply go to the Look and Feel section (in the header bar) and choose one of the available themes and a corresponding color scheme. The process is as straightforward as setting a new desktop background in Windows.

Making Your Own Theme

Now that we’ve seen the power and flexibility of themes, let’s see how you can put your creativity to work and design your own. Making a new theme requires only four main steps:

1. Configure properties
2. Edit templates (JSP or VM)
3. Define CSS styles
4. Code JavaScript (optional)

Let’s take a high-level look at how Liferay created the JSP-based “Brochure” theme (Figure 2.6) by modifying a few things in a copy of the “Classic” theme (Figure 2.1).

Note: If you want to see an example using VM, take a look at the bundled “Velocity” theme (Figure 2.3).

Configuration

To start, we created a copy of the “Classic” theme’s directory and renamed it “brochure.” (Figure 2.1.1.1). We then deleted the color-schemes directory because we decided we would only have one color scheme for the “Brochure” theme. Although you don’t have to follow the layout shown here, this convention will make your themes easier to organize and keep them standard.

Figure 2.1.1.1 Directory structure

Once we have a directory to house our new theme, we need to let Liferay know the new theme’s directory location. This is done in liferay-look-and-feel.xml (Figure 2.1.1.2). Notice that the theme configuration shows theme id=”brochure” and identifies the compatible version. The root-path, templates-path and images-path are also set here. Make sure that these values match your directory structure.

<look-and-feel>
<compatibility>
<version>3.5.0</version>
</compatibility>
<theme id="brochure" name="Brochure">
<root-path>/html/themes/brochure</root-path>
<templates-path>/html/themes/brochure/templates</templates-path>
<images-path>/html/themes/brochure/images</images-path>
<template-extension>jsp</template-extension>
<color-scheme id="01" name="Default">
<!-- color-scheme content omitted to simplify example -->
</color-scheme>
</theme>
</look-and-feel>

Figure 2.1.1.2 liferay-look-and-feel.xml

Templates

Now that Liferay Portal is configured to load your theme, the next step is to edit the template files that give the theme its uniqueness. Here’s a brief description of some of the templates that are used in the default themes:

init.jsp	Initializes variables and properties needed for the theme.
css.jsp	Contains CSS style definitions for your entire theme.
portal_normal.jsp	Controls the layout of portal templates for normal pages.
portal_pop_up.jsp	Controls the layout of portal templates for pop-ups.
top.jsp	Draws the top of the portal.
bottom.jsp	Draws the bottom of the portal.
navigation.jsp	Draws the navigation bar of the portal.
portlet_top.jsp	Draws the top of each portlet.
portlet_bottom.jsp	Draws the bottom of each portlet.
javascript.jsp	Contains JavaScript declarations.

Each template controls the layout of a particular area within the portal. For instance,portlet_top.jsp controls the top portion of each portlet; navigation.jsp determines how the navigation bar will look.

Keep in mind that not all of these templates require modification; nor are you limited to the ones mentioned here. Feel free to add another template to control a different area of the portal. Just make sure to include the template in portal_normal.jsp and/or portal_pop_up.jsp.

A number of changes were made to these templates for the brochure theme. Highlighted, you can see one such major change made to the placement and appearance of the portal configuration menu (Figures 2.1.2.1 and 2.1.2.1):

Figure 2.1.2.1 The “Classic” theme’s portal config menu is integrated with the tabs.

Figure 2.1.2.2 The “Brochure” theme’s portal config menu is relocated to the top of the portal.

In the “Classic” theme, the portal configuration menu is part of the navigation bar. It consists of buttons and a dropdown menu. By contrast, the “Brochure” theme has the portal configuration menu relocated to the top of the portal and separated from the navigation bar. Also notice that the buttons are now simple text links. Some of the code changes required highlighted below in Figure 2.1.2.3:

<div id="layout-outer-side-decoration">
<div id="layout-inner-side-decoration">
<div id="layout-top-decoration">
<div id="layout-corner-ul"></div>
<div id="layout-corner-ur"></div>
</div>
<div id="layout-box">
<div id="layout-top">
<div id="layout-logo">
<a href="<%= themeDisplay.getPathFriendlyURL() %>/guest/home"><img border="0" hspace="0" src="<%= themeDisplay.getCompanyLogo() %>" vspace="0"></a>
</div>

<c:if test="<%= themeDisplay.isSignedIn() %>">
<div id="layout-user-menu">
<a style="font-size: 8pt;" href="<%= themeDisplay.getURLSignOut() %>"><bean:message key="sign-out" /></a> - 

<c:if test="<%= GetterUtil.getBoolean(PropsUtil.get(PropsUtil.UNIVERSAL_PERSONALIZATION)) || RoleLocalServiceUtil.isPowerUser(user.getUserId()) %>">
<a style="font-size: 8pt" href="<%= themeDisplay.getPathMain() %>/portal/personalize_forward?group_id=<%= portletGroupId %>"><%= LanguageUtil.get(pageContext, "content-and-layout") %></a> - 
</c:if>

<c:if test="<%= GetterUtil.getBoolean(PropsUtil.get(PropsUtil.LOOK_AND_FEEL_MODIFIABLE)) %>">
<a style="font-size: 8pt" href="<%= themeDisplay.getPathMain() %>/portal/look_and_feel_forward?group_id=<%= portletGroupId %>"><%= LanguageUtil.get(pageContext, "look-and-feel") %></a> - 
</c:if>

<font style="font-size: 8pt;">
<%= LanguageUtil.get(pageContext, "my-communities") %>
</font>

<% String selectedStyle = "style=\"background: " + colorScheme.getPortletMenuBg() + "; color: " + colorScheme.getPortletMenuText() + ";\" "; %>

<font size="2">
<select name="my_communities_sel" style="font-family: Verdana, Arial; font-size: smaller; font-weight: normal;" onChange="self.location = '<%= themeDisplay.getPathMain() %>/portal/group_forward?group_id=' + this.value;">
<option <%= !layout.isGroup() ? selectedStyle : "" %> value="<%= Group.DEFAULT_PARENT_GROUP_ID %>"><%= LanguageUtil.get(pageContext, "desktop") %></option>

<% List myCommunities = UserLocalServiceUtil.getGroups(user.getUserId());
for (int i = 0; i < myCommunities.size(); i++) {
Group myCommunity = (Group)myCommunities.get(i);
%>
<option <%= layout.isGroup() && layout.getGroupId().equals(myCommunity.getGroupId()) ? selectedStyle + "selected" : "" %> value="<%= myCommunity.getGroupId() %>"><%= myCommunity.getName() %></option>

<% } %>

</select>
</font>
</div>
</c:if>

Figure 2.1.2.3 top.jsp for the “Brochure” theme