You are looking at documentation for an older release. Not what you want? See the current release documentation.
eXo Platform allows to inject new CSS files by configuration,
by declaring them in a file WEB-INF/gatein-resources.xml
in an extension webapp.
New CSS files can be added to a portal skin, meaning they are loaded in all the pages
of the sites using this skin.
For example, in order to add a new CSS file to override some styles of the Default skin,
the following configuration must be defined in the file WEB-INF/gatein-resources.xml:
<gatein-resources>
<portal-skin>
<skin-name>Default</skin-name>
<css-path>/skin/my-style.css</css-path>
<skin-module>MyStyle</skin-module>
<css-priority>0</css-priority>
<overwrite>false</overwrite>
</portal-skin>
</gatein-resources>
In which:
<portal-skin> is the root element that declares the portal skin element, including:
<skin-name> is the identifier of the skin.
<skin-module> is the identifier of the skin element. It must be an unique name.
<css-path> is the path to the CSS file in the webapp which defines the style of the site.
<css-priority> is the loading priority amongst portal stylesheets. Lower values are loaded first. This property is optional.
<overwrite> is the property that defines if the portlet skin overwrites or not another skin which has the same name, if it exists. This property is optional. Defaults to false.
Once deployed, the CSS file /skin/my-style.css will be loaded in all the pages
of the sites which use the Default skin.
CSS files will be loaded as link tags in
the head section of the web page,
following a defined Loading strategy,
so before the portlets CSS files.
A sample Maven project is available here as a working example to customize a skin.
Since the Portal skin stylesheets are loaded before the Portlets skin stylesheets, portlets style overrides the portal style.
While this is very useful to control the style of a portlet no matter what the portal style is,
it can be a problem when a portal style must be applied on all portlets no matter what the portlets style is.
eXo Platform provides the capability to define portal CSS files which can be loaded after portlet CSS files.
They must be declared in the file WEB-INF/gatein-resources.xml like portal CSS files.
The only difference is that they must have a skin-module tag starting with customModule:
<!-- XML : generated by JHighlight v1.0 (http://jhighlight.dev.java.net) --> <span class="xml_tag_symbols"><</span><span class="xml_tag_name">gatein-resources</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"><</span><span class="xml_tag_name">portal-skin</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"><</span><span class="xml_tag_name">skin-name</span><span class="xml_tag_symbols">></span><span class="xml_plain">Default</span><span class="xml_tag_symbols"></</span><span class="xml_tag_name">skin-name</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"><</span><span class="xml_tag_name">css-path</span><span class="xml_tag_symbols">></span><span class="xml_plain">/skin/my-custom-module-style.css</span><span class="xml_tag_symbols"></</span><span class="xml_tag_name">css-path</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"><</span><span class="xml_tag_name">skin-module</span><span class="xml_tag_symbols">></span><span class="xml_plain">customModuleMyStyle</span><span class="xml_tag_symbols"></</span><span class="xml_tag_name">skin-module</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"><</span><span class="xml_tag_name">overwrite</span><span class="xml_tag_symbols">></span><span class="xml_plain">false</span><span class="xml_tag_symbols"></</span><span class="xml_tag_name">overwrite</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><span class="xml_tag_symbols"></</span><span class="xml_tag_name">portal-skin</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_tag_symbols"></</span><span class="xml_tag_name">gatein-resources</span><span class="xml_tag_symbols">></span><span class="xml_plain"></span><br /> <span class="xml_plain"> </span><br />
Portlets often require additional styles that may not be defined by the portal skin. eXo Platform allows to define
additional stylesheets for each portlet and appends the corresponding link tags to the head.
Here is an example that can be added in the file WEB-INF/gatein-resources.xml to define a
new CSS file to be included whenever the portlet WhoIsOnLinPortlet is available on a portal page:
<gatein-resources>
<portlet-skin>
<application-name>homepage-portlets</application-name>
<portlet-name>WhoIsOnLinPortlet</portlet-name>
<skin-name>Default</skin-name>
<css-path>/skin/WhoIsOnLinPortlet/my-portlet-style.css</css-path>
<css-priority>1</css-priority>
<overwrite>false</overwrite>
</portlet-skin>
</gatein-resources>
In which:
<portlet-skin> is the root element that declares the portlet skin element, including:
<application-name> is the context name of web application that contains the portlet declared in <portlet-name>.
<portlet-name> is the identifier of the portlet.
<skin-name> is the identifier of the skin. The portlet skin element is only loaded when the given skin is selected for the site.
<css-path> is the path to the CSS file in the webapp which defines the stylesheets of the portlet.
<css-priority> is loading priority amongst portlets stylesheets. Lower values are loaded first. This property is optional.
<overwrite> is the property that defines if the portlet skin overwrites or not another skin which has the same name, if it exists. This property is optional. Defaults to false.
This example tells eXo Platform to load the CSS file /skin/WhoIsOnLinPortlet/my-portlet-style.css
when the portlet WhoIsOnLinPortlet of the webapp homepage-portlets
is displayed on the page. As for sites, CSS files will be loaded as link tags in
the head section of the web page. The ID attribute of <link> element uses the
pattern portletAppName_PortletName. In the above example, the ID of the link is "homepage-portlets_WhoIsOnLinPortlet".
The portlet can be any native eXo Platform portlet or any custom portlet.
The full schema for gatein-resources.xml files can be found at https://www.exoplatform.com/xml/ns/gatein_resources_1_4.xsd.
Customizing the Enterprise Skin
The Enterprise Skin (available only in Enterprise Edition) has been done as a new skin, using the customStyle.less file. It means that its CSS style is loaded as a portal skin custom module, so after all the others type of stylesheets, as described in the CSS priority chapter.
In order to customizing styles defined in the Enterprise Skin, a portal skin custom module must be used, with a higher priority.
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.
You must use skin/DefaultSkin/portletIcons/ for the directory to store the portlet icon regardless of which skin is going to be used.