Creating Configurable Styles for Portlet Wrappers

Portlet Decorators customize the style of an application’s wrapper. If you inspect the markup of your application when it’s on a page you’ll observe that it is wrapped by two layers. Among other things, these layers provide some common basic features like drag and drop and the application border style. In order to protect these features, you can’t modify the markup of these layers directly with a theme.

With Portlet Decorators, you can add a CSS class to one of these wrapping layers via a user’s setting. By defining styles for this class in your theme, you can change the look and feel of the application instances where the Portlet Decorator is applied, including its wrapper.

The figure below shows the markup of the layers wrapping a Liferay Portal application when the Decorate Portlet Decorator is applied:

portlet-application-markup.png

Figure 1: Portlet Decorators add the decorator’s CSS class to the application’s wrapper

Once your Portlet Decorator is complete, apply it to your applications through the Look and Feel Configuration menu.

app-decor-look-and-feel.png

Figure 2: Portlet Decorators can be applied through the Look and Feel Configuration menu

The tutorials in this section detail how to customize Portlet Decorators and apply them to your applications.

Adding Portlet Decorators to a Theme

Portlet Decorators are associated with a particular theme. If your theme does not define any portlet decorators, none are available. It is recommended that you provide a few decorators for your...

Read More

Applying Portlet Decorators to Embedded Portlets

Once you have installed a theme that contains Portlet Decorators, site administrators can apply them to a portlet instance by selecting the Application Decorator in the Look and Feel Configuration...

Read More
0 (0 Votes)
Embedding Portlets in Themes Previous