2.1.1. Skin components

The complete skinning of a page can be decomposed into three main parts:

Portal Skin

The portal skin contains the CSS styles for the portal and its various UI components. This should include all the UI components, except for the window decorators and portlet specific styles.

Window Styles

The CSS styles are associated with the portlet window decorators. The window decorators contain the control buttons and boarders surrounding each portlet. Individual portlets can have their own window decorator selected, or be rendered without one.

Portlet Skins

The portlet skins affects how portlets are rendered on the page via one of the following ways:

Portlet Specification CSS Classes

The portlet specification defines a set of CSS classes that should be available to portlets. GateIn 3.5 provides these classes as part of the portal skin. This allows each portal skin to define its own look and feel for these default values.

Portlet Skins

GateIn 3.5 provides a means for portlet CSS files to be loaded, basing on the current portal skin. This allows a portlet to provide different CSS styles to better match the look and feel of the current portal. Portlet skins provide a much more customizable CSS experience than just using the portlet specification CSS classes.


The window decorators and the default portlet specification CSS classes should be considered as separate types of skinning components, but they need to be included as part of the overall portal skin. The portal skin must include these component´s CSS classes or they will not be displayed correctly.

A portlet skin does not need to be included as part of the portal skin and can be included within the portlets web application.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus