Documentación

Creating a Theme

The theme creation process is nearly identical to the portlet creation process
that we covered in the last chapter. Our theme will be named Deep Blue, so the
project name (without spaces) is deep-blue, and the display name (which can
have spaces) is Deep Blue. Let’s create the theme using Liferay Developer
Studio first, and then with the terminal.

Using Developer Studio:

Go to File → New → Liferay Project.

Fill in deep-blue for the Project name and Deep Blue for the Display
name.

Select the build type, Plugins SDK, and Liferay runtime.

If you select the Maven build type, you’ll be prompted to enter an artifact
version, group ID, and active profile for your project. See Using Liferay
IDE with
Maven
for more information. Otherwise, select the Ant build type, a Plugins SDK
and a Liferay runtime.

Select a theme parent. Your theme inherits the parent theme’s styling as a
base from which to build your theme. In addition to the _styled theme, you
can choose to inherit from the _unstyled theme, which contains no styling.
There’s also the classic theme that has a smooth look and feel and works
well. For now, select _styled as the theme parent.

Select your theme’s framework. You can select the Freemarker or Velocity
template frameworks for your theme. Or you can select JSP as your theme’s
framework.

Click Finish.

Figure 5.1: Make sure to select the *Theme* plugin type for your theme.

With Developer Studio, you can create a new plugin project, or if you already
have a project, create a new plugin in an existing project. A single Liferay
project can contain multiple plugins.

Using the terminal: Navigate to the themes directory in the Plugins SDK
and enter the appropriate command for your operating system:

In Linux and Mac OS X, enter

./create.sh deep-blue "Deep Blue"

In Windows, enter

create.bat deep-blue "Deep Blue"

Now there’s a blank theme in your themes folder, which the Plugins SDK
automatically named by appending “-theme” to your project name. Right now your
theme is empty. Your next step is to set a base theme that serves as the default
for your theme.

All themes in Liferay are built on top of two base themes, named _unstyled and
_styled. Your newly created theme is based on these by default, but they
contain very limited styling. You can take advantage of an existing theme’s
styling by setting the theme of your choice as the base for your theme.

Base themes are added in layers. First _unstyled is added, giving you the core
of the theme, then _styled, providing the most basic elements. When you set a
different base theme, it’s added on top of _styled and overrides the default
styling wherever there are differences. After the base themes are added, your
own custom styling is added on top.

To specify a base theme, edit the build.xml file for your theme and change
_styled in <property name="theme.parent" value="_styled> to the name of any
existing theme that’s installed or in your Plugins SDK. Now that your base theme
is set, let’s deploy the theme to your portal instance.

Upon deploying, your server outputs messages indicating your plugin is read,
registered, and available for use.

Reading plugin package for deep-blue-theme
Registering themes for deep-blue-theme
1 theme for deep-blue-theme is available for use

Deploying in the terminal: Open a terminal window in your
themes/deep-blue-theme directory and enter

ant deploy

A BUILD SUCCESSFUL message indicates your theme is now being deployed. If you
switch to the terminal window running Liferay, within a few seconds you will
see the message 1 theme for deep-blue-theme is available for use.