3.3.8.3. Creating a new portlet skin

Portlets often require additional styles that may not be defined by the portal skin. You can easily create a new portlet skin via the extension mechanism. eXo Platform allows you to define additional stylesheets for each portlet and will append the corresponding link tags to the head.

First, you need to declare the skin by adding the following fragment to the custom-extension.war!/WEB-INF/gatein-resources.xml file.


<gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

  xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

    <portlet-skin>

        <application-name>hello-portlet</application-name>

        <portlet-name>HelloPortlet</portlet-name>

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

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

    </portlet-skin>

</gatein-resources>

Next, create DefaultStylesheet.css which contains your desired stylesheets for the portlet in the templates/skin/HelloPortlet directory.


.hello {

   background-color: gray;

}

Note

If the current site 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.
The link ID will be of the form: {portletAppName}{PortletName}. For example: HelloPortlet in hello-portlet.war will give id="hello-portletHelloPortlet".

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: skin/DefaultSkin/portletIcons/icon_name.png.

To use the icon correctly, it must be named after the portlet. For example, the icon for the Hello portlet named HelloPortlet is located at: skin/DefaultSkin/portletIcons/HelloPortlet.png.

Note

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

Customizing a style for a built-in portlet

The procedure to customize a style for a built-in portlet is the same as when creating a new portlet skin. Assuming that you want to change the background color of Activity Stream portlet on the Intranet homepage, you first need to declare your desired skin in the custom-extension.war!/WEB-INF/gatein-resources.xml file.


<gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                  xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

                  xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">



  <portlet-skin>

    <application-name>social-portlet</application-name>

    <portlet-name>UserActivityStreamPortlet</portlet-name>

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

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

  </portlet-skin>

</gatein-resources>

Next, create the DefaultStylesheet.css file which contains your desired stylesheets for the portlet in the templates/skin/HelloPortlet directory.


.uiUserActivityStreamPortlet {

 background-color: green;

}

The background color of Activity Stream portlet is now changed.