Do you want to transform the look and feel of your Liferay Portal? Create your own Liferay Theme! Themes are hot deployable plugins unique to a site served by the portal. With themes, you can alter the user interface so completely that it’s difficult or impossible to tell that the site is running on Liferay.

Liferay provides a well organized, modular structure to its themes. Themes follow the same philosophy as Liferay configuration: they are modifications, or differences from the default. Because of this, every line of markup and every style has a default value that your theme can fall back on if you have chosen not to customize it. In other words, your theme inherits the styling, images, and templates from any of the built-in themes. This saves you time and keeps your themes smaller and less cluttered, because your theme contains only its own resources, using defaults for the rest, like emoticon graphics for the message boards portlet.

In this chapter, you’ll learn all about Liferay themes:

  • Creating a Theme
  • Anatomy of a Theme
  • Developer Mode
  • Thumbnails
  • JavaScript
  • Settings
  • Color Schemes
  • Portal Predefined Settings
  • Theme Inheritance
  • Importing resources with themes

Liferay themes are easy to create. You can start by making changes only in the CSS files. When you need to customize themes more extensively, you can change the HTML.

If you hope to become a theme customization guru, there are several technologies you should know:

  • CSS: Create a new theme simply by modifying a CSS file.
  • Velocity: Customize the markup generated by the theme.
  • JavaScript: Add special behaviors to your theme.
  • XML: Some theme settings are specified in XML.

To follow the examples in this guide, you should be familiar with the command line or the Liferay IDE.

Let’s create a theme!

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...

Read More

Anatomy of a Theme

Custom themes are created by layering your customizations on top of one of Liferay’s built-in themes. The structure of a theme separates different types of resources into easily accessible folders....

Read More

Developer Mode

Do you want to develop Liferay resources without having to redeploy to see your portal modifications? Use Liferay Developer Mode! In Developer mode, all caches are removed, so any changes you make...

Read More

Thumbnails

Now that your theme is available in Liferay, it’s time to dress it up for a stylistic appeal. Currently in the Look and Feel settings, your theme’s thumbnail is a broken image. To remedy this,...

Read More

JavaScript

Liferay has its own JavaScript library called AlloyUI, an extension to Yahoo’s YUI3 framework. You can take advantage of AlloyUI or YUI3 in your themes. Inside your theme’s main.js file, you’ll...

Read More

Settings

You can define settings to make your theme configurable. Create a file named liferay-look-and-feel.xml in the WEB-INF directory, with the following content: Read More

Color Schemes

Specify color schemes with a CSS class name, which of course also lets you choose different background images, different border colors, and more. Here’s how you can define your color schemes in...

Read More

Portal Predefined Settings

The portal defines some settings that allow the theme to determine certain behaviors. As of this writing, predefined settings are only available for portlet borders, bullet styles, and the site...

Read More

Theme inheritance

By default, themes are based on the _styled theme, which provides only basic styling of portlets. If you open the build.xml file in your theme’s directory using the Build Application Configuration...

Read More

Importing resources with your themes

A theme without content is like an empty house. If you’re trying to sell an empty house, it may be difficult for prospective buyers to see its full beauty. However, staging the house with some...

Read More

Summary

In this chapter, you learned how to customize the look and feel of your Liferay Portal by creating custom themes. During this process, you created your own theme, learned about its directory...

Read More
0 (0 Votes)
Summary Previous