Skin the portlet

Portlets often require additional styles that may not be defined by the portal skin. eXo Platform 3.5 defines additional stylesheets for each portlet and will append the corresponding link tags to the head. The ID attribute of <link> element will be in the portletAppName/PortletName form. For example, the ContentPortlet in content.war takes "content/ContentPortlet" as ID. To define a new CSS file to be included whenever a portlet is available on a portal page, the following fragment needs to be added in the gatein-resources.xml file.




<portlet-skin>

  <application-name>portletAppName</application-name>

  <portlet-name>PortletName</portlet-name>

  <skin-name>Default</skin-name>

  <css-path>/skin/DefaultStylesheet.css</css-path>

</portlet-skin>

<portlet-skin>

  <application-name>portletAppName</application-name>

  <portlet-name>PortletName</portlet-name>

  <skin-name>OtherSkin</skin-name>

  <css-path>/skin/OtherSkinStylesheet.css</css-path>

</portlet-skin>

This action will load DefaultStylesheet.css or OtherSkinStylesheet.css when the DefaultSkin or OtherSkin is used respectively.

Note

If the current portal skin is not defined as part of the supported skins, the portlet CSS class will not be loaded. The portlet skins should be updated whenever a new portal skin is created.

Change portlet icons

Each portlet can be represented by a unique icon that you can see in the portlet registry or page editor. This icon can be changed by adding an image to the directory of portlet web application: skin/DefaultSkin/portletIcons/icon_name.png. The icon must be named after the portlet. For example, the icon of account portlet must be named AccountPortlet and located at: skin/DefaultSkin/portletIcons/AccountPortlet.png.

Note

You must use skin/DefaultSkin/portletIcons/ for the directory to store the portlet icon regardless of using any skins.