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!