The default skin

The default skin of eXo Platform 3.5 is in the eXoResource.war file. The main files associated with the skin are:

WEB-INF/gatein-resources.xml defines the skin settings to use.
WEB-INF/web.xml contains the resource filter with the display-name set.
skin/Stylesheet.css contains the CSS class definitions for this skin.

Note

To get a new portal skin declared in gatein-resources.xml loaded successfully, display-name of the extension webapp (in web.xml) should be identical to the context path of the extension webapp.

The following block of CSS illustrates content of the skin/Stylesheet.css file:

@import url(DefaultSkin/portal/webui/component/UIPortalApplicationSkin.css); (1)
@import url(DefaultSkin/webui/component/Stylesheet.css); (2)
@import url(PortletThemes/Stylesheet.css); (3)
@import url(Portlet/Stylesheet.css); (4)

In which:

(1) Skin of the portal page. The UIPortalApplicationSkin.css defines CSS classes shared by all the portal pages.
(2) Skins of various portal-owned components, such as WorkingWorkspace, MaskWorkspace, PortalForm, and more.
(3) Window decorator skins.
(4) The portlet specification CSS classes. (The CSS styles defined in Portlet Specification JSR286)

To make a default skin flexible and highly reusable, instead of defining all CSS classes in this file, CSS classes are arranged in nested stylesheet files, based on the @import statement. This makes easier for new skins to reuse parts of the default skin. To reuse a CSS stylesheet from the default portal skin, you need to refer to the default skin from eXoResources. For example, to include the window decorators from the default skin within a new portal skin, you need to use the following import:

@import url(/eXoResources/skin/Portlet/Stylesheet.css);

Note

When the portal skin is added to the page, it merges all CSS stylesheets into a single file.