Defining a new theme in Liferay

Before digging into these folders, the next step is to registerthe theme in Liferay. Edit the file

liferay-look-and-feel.xmlpresent in the WEB-INF directory and add the followingXML

fragment:

<theme id="my-theme" name="My theme">

<root-path>/html/themes/my-theme</root-path>

<templates-path>/html/themes/my-theme/templates</templates-path>

<images-path>/html/themes/my-theme/images</images-path>

<template-extension >jsp</template-extension>

<settings>

<setting key="my-setting" value="example-value"/>

</settings>

<color-scheme id="gen-color" name="DarkBlue">

<![CDATA[

-- Content omitted for clarity --

]]>

</color-scheme>

</theme>

The root-path element must point to the root theme folder. Theelements templates-path

contains the path to the JSP templates, and images-path pointsto the subfolder that contains the

images for this theme. Note that you can choose any subdirectoryname you want or point to

subdirectories in other directories. However, it is recommendedthat you keep the default

convention unless you have a good reason to change it.

The template-extension element specifies the language in which thetemplates of the theme are

written. JSPs and velocity (specifying vm as the template extension) aresupported. Liferay

comes with examples of both. In this article we will assume JSPtemplates, but they are very

_

Page 5 of 11 Created by Jorge Ferrer

similar.

Finally the settings element and its inner setting sub elementsallow you to specify any number

of custom settings of the theme (note that this is optional). Thesesettings can be retrieved from

the templates of the theme by calling the getSetting() method ofthe current theme object. For

example using JSP scripting:

<% String value =themeDisplay.getTheme()getSetting(“my-setting”); %>

Each theme must also have at least one color-scheme which controlsthe colors of the theme.

The color scheme is defined using the color-scheme element in the liferay-look-and-feel.xml.

By specifying several color schemes, it is possible to have onesingle theme with more than one

combination of colors. An example of a combination of colors forthe previous theme would be:

<color-scheme id="gen-color" name="DarkBlue">

<![CDATA[

body-bg=#666666

layout-bg=#666666

layout-text=#FFFFFF

layout-tab-bg=#666666

layout-tab-text=#FFFFFF

layout-tab-selected-bg=#666666

layout-tab-selected-text=#FFFFFF

portlet-title-bg=#666666

portlet-title-text=#FFFFFF

portlet-menu-bg=#666666

portlet-menu-text=#FFFFFF

portlet-bg=#666666

portlet-font=#FFFFFF

portlet-font-dim=#FFFFFF

portlet-msg-status=#FFFFFF

portlet-msg-info=#FFFFFF

portlet-msg-error=#FFFFFF

portlet-msg-alert=#FFFFFF

portlet-msg-success=#FFFFFF

portlet-section-header=#FFFFFF

portlet-section-header-bg=#666666

portlet-section-subheader=#FFFFFF

portlet-section-subheader-bg=#666666

portlet-section-body=#FFFFFF

portlet-section-body-bg=#666666

portlet-section-body-hover=#000000

portlet-section-body-hover-bg=#F4F4F4

portlet-section-alternate=#FFFFFF

portlet-section-alternate-bg=#333333

portlet-section-alternate-hover=#000000

portlet-section-alternate-hover-bg=#F4F4F4

_

Page 6 of 11 Created by Jorge Ferrer

portlet-section-selected=#FFFFFF

portlet-section-selected-bg=#666666

portlet-section-selected-hover=#FFFFFF

portlet-section-selected-hover-bg=#666666

]]>

</color-scheme>

The values of these colors will be used by a file called css.jsp.

Liferay acknowledges that the format of a theme may need to changein the future and provides

a mechanism to prevent errors should that happen. You can specifyfor which versions of

Liferay your theme is designed for:

<look-and-feel>

<compatibility>

<version>3.5.0</version>

<version>3.5.1</version>

</compatibility>

...

After covering how to define a new theme we are ready to explaineach of its components in

moredetail.

Posted in: Liferay Interview