How to Defining a new theme

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

liferay-look-and-feel.xml present in the WEB-INF directory and add the following XML

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. The elements templates-path

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

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

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

convention unless you have a good reason to change it.

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

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

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

_

Page 5 of 11 Created by Jorge Ferrer

similar.

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

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

the templates of the theme by calling the getSetting() method of the 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 controls the 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 one single theme with more than one

combination of colors. An example of a combination of colors for the 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 change in the future and provides

a mechanism to prevent errors should that happen. You can specify for 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 explain each of its components in

more detail.

Posted in: LifeRay