Portlet Decorators

In the previous step we covered decorating page elements such as the page header and footer, and the menus. In this step we look at decorating individual portlets.

Each Jetspeed portlet window on a page can be associated with a different portlet decoration. Portlet decorations control some important aspects of a portlet window:

  • The colors, images, CSS styles that skin this window
  • The title portion of the portlet
  • The borders of the window
  • Action buttons displayed on the window

Jetspeed comes with several portlet decorations out of the box. The default page decorator for most pages is simply called jetspeed. It looks like this:

We are going to create a new decorator for this tutorial. This new decorator can be copied into our project from the decorations/portlet/jetexpress/ directory in tutorial-resources.zip. This will save you the trouble of creating all the logo images and CSS definitions.

In your project, under jetexpress-portal/src/main/webapp/decorations, create a directory portlet. From jetspeed-tutorial-resources.zip, copy the decorations/portlet/jetexpress/ directory and all its files and subdirectories to jetexpress-portal/src/main/webapp/decorations/portlet in your project.

We are going to skip over the intricate details of portlet decorators, as page decorators are much more important, as they set your organization's branding. Whereas the standard window decorators are good enough for getting you started. Go ahead and review the content of our custom portlet decorator. You will see that the directory layout is the same as for page decorators. The decorator simply creates a new color variation on an existing window decorator.


Now that you have a general idea of what a portlet decorator does, and how you can customize it, let's have a look at desktop themes.

Previous - Next