eXo Platform 4.0 Documentation > Reference Guide / GateIn > Portal Development > Skinning the portal > Creating new skins

2.1.6.3. Creating a new portlet skin

Portlets often require additional styles that may not be defined by the portal skin. GateIn 3.5 allows you to define additional stylesheets for each portlet and will append the corresponding link tags to the head.

The link ID will be of the form {portletAppName}{PortletName}. For example: ContentPortlet in content.war will give id="contentContentPortlet".

To define a new CSS file to include whenever a portlet is available on a portal page, the following fragment needs to be added to gatein-resources.xml.


<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 will load the DefaultStylesheet.css or OtherSkinStylesheet.css when the default skin 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. It is recommended that you update portlet skins whenever a new portal skin is created.

Changing 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 the portlet webapplication:

To use the icon correctly, it must be named after the portlet. For example, the icon for an account portlet named AccountPortlet would be located at:

Note

You must use skin/DefaultSkin/portletIcons/ for the directory to store the portlet icon regardless of what skin is going to be used.

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