eXo Platform provides support for skinning the entire User Interface (UI) of a site, including your own portlets. Skins are designed to help you pack and reuse common graphic resources.
The complete skinning of eXo Platform can be decomposed into three main parts: site skin, portlet windows and portlet skin.
The portal skin contains styles for the HTML tags (for example, div, th, td) and the portal UI (including the toolbar). This should include all UI components, except for window decorators and portlet specific styles.
The CSS styles are associated with the portlet window decorators. The window decorators contain control buttons and borders surrounding each portlet. Individual portlets can have their own window decorators selected, or be rendered without one. See example of Window decorator.
The portlet skins affect how portlets are rendered on the page. The portlet skins can be affected in two main ways described in the following sections.
Portlet Specification CSS Classes: The portlet specification defines a set of CSS classes that should be available to portlets. eXo Platform provides these classes as a part of the portal skin. This enables each portal skin to define its own look and feel for these default values.
eXo Platform provides a means for portlet CSS files to be loaded that is based on the current portal skin. This enables a portlet to provide different CSS styles to better match the current site's look and feel.
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 a part of the overall portal skin. The portal skin must include CSS classes of these components or they will not be displayed correctly. A portlet skin does not need to be included as a part of the portal skin and can be included within the portlets web application. See Skins in page markups for more information.
More details about the eXo Platform skin elements are described in: