In eXo Platform, the top navigation bar is a special container which is composed of portlets.
All sites share the same top navigation bar that is defined in
platform-extension.war!/WEB-INF/conf/portal/portal/sharedlayout.xml. You can see its content
here.
This sharedlayout.xml file configures portlets
which are currently displayed on the top navigation bar.
To override the default shared layout, you first need to copy the sharedlayout.xml file
from platform-extension.war!/WEB-INF/conf/portal/portal/
and paste into custom-extension.war!/WEB-INF/conf/portal/portal/ directory.
Followings are 3 typical examples of the top navigation bar configuration: removing a portlet, adding a new portlet and changing the color scheme.
Removing a portlet from the top navigation bar
Assume that you want to remove the Help portlet from the top navigation bar, do as follows:
Remove the following block from
custom-extension.war!/WEB-INF/conf/portal/portal/sharedlayout.xml....
<container id="UIHelpPlatformToolbarPortlet" template="system:/groovy/portal/webui/container/UIContainer.gtmpl">
<portlet-application>
<portlet>
<application-ref>platformNavigation</application-ref>
<portlet-ref>UIHelpPlatformToolbarPortlet</portlet-ref>
</portlet>
<access-permissions>*:/platform/users</access-permissions>
<show-info-bar>false</show-info-bar>
</portlet-application>
</container>
...
Deploy your extension and restart the server. The Help portlet (
) is now removed from the top navigation bar.
Adding a portlet to the top navigation bar
Assume that you want to add the SEO portlet to the top navigation bar, do as follows:
Add the following block to
custom-extension.war!/WEB-INF/conf/portal/portal/sharedlayout.xml....
<container id="SEOToolbarPortlet" template="system:/groovy/portal/webui/container/UIContainer.gtmpl">
<portlet-application>
<portlet>
<application-ref>seo</application-ref>
<portlet-ref>SEOToolbarPortlet</portlet-ref>
</portlet>
<access-permissions>*:/platform/administrators; editor:/platform/web-contributors</access-permissions>
<show-info-bar>false</show-info-bar>
</portlet-application>
</container>
...
Deploy your extension and restart the server. The SEO portlet will appear on the top navigation bar.
Changing the style of top navigation bar
The default style of the top navigation bar is defined in the webapps/eXoPlatformResources.war!/skin/css/platform.css file.
In particular:
Style of background on the top navigation bar, such as color, image, border bottom and height.
.UIToolbarContainerDark .NormalContainerBlock .ToolbarContainer {
background-color: #535353;
background-image: linear-gradient(to bottom, #5B5B5B, #474747);
background-repeat: repeat-x;
border-bottom: 1px solid #2C3440;
height: 41px;
}Color of texts on the top navigation bar.
.UIToolbarContainerDark .uiDropdownWithIcon > a {
color: #FFFFFF;
}Style of split lines.
.UIToolbarContainerDark .uiDropdownWithIcon {
background: url("/eXoPlatformResources/skin/images/ToolbarContainer/line.png") no-repeat scroll left top transparent;
}Style of icons displayed on the top navigation bar, such as position, background image, height, width.
.uiIconPLF24x24Edit {
background-position: 0 0;
}
[class^="uiIconPLF24x24"] {
background-image: url("/eXoPlatformResources/skin/images/icons/uiIconsPLF24x24White.png");
background-repeat: no-repeat;
display: inline-block;
height: 24px;
line-height: 24px;
vertical-align: middle;
width: 24px;
}
In eXo Platform, customizing the top navigation bar can be performed in the
custom-extension.war!/templates/skin/DefaultStylesheet.css file.
As an example, here are steps to change the style of the top navigation bar,
including the color of background (from dark to grey), of texts and icons (from white to dark) and split lines (from dark grey to light grey).
Add the following stylesheets to the
custom-extension.war!/templates/skin/DefaultStylesheet.cssfile..UIToolbarContainerDark .uiDropdownWithIcon > a {
color: #4C4C4C;
}
.UIToolbarContainerDark .NormalContainerBlock .ToolbarContainer {
background-color: #E7E7E7;
background-image: linear-gradient(to bottom, #F4F4F4, #D4D4D4);
background-repeat: repeat-x;
border-bottom: 1px solid #CCCCCC;
}
.UIToolbarContainerDark [class^="uiIconPLF24x24"], .UIToolbarContainerDark a:hover [class^="uiIconPLF24x24"], .UIToolbarContainerDark[class^="uiIconPLF24x24"]:hover {
background-image: url("/eXoPlatformResources/skin/platformSkin/images/icons/uiIconsPLF24x24DarkGray.png");
}
.UIToolbarContainerDark .uiDropdownWithIcon > a:hover, .UIToolbarContainerDark .uiDropdownWithIcon .uiDropdownWithIcon.open > a {
background: none repeat scroll 0 0 rgba(128, 128, 128, 0.3);
color: #333333;
}
.UIToolbarContainerDark .uiDropdownWithIcon {
background: url("/eXoPlatformResources/skin/platformSkin/images/ToolbarContainer/line.png") no-repeat scroll left bottom transparent;
}
.uiIconPLF24x24Edit {
background-position: 0 0;
}Register your CSS file to Default skin, by adding
custom-extension.war!/WEB-INF/gatein-resources.xml:<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">
<portal-skin>
<skin-name>Default</skin-name>
<skin-module>myintranet-css</skin-module>
<css-path>/templates/skin/DefaultStylesheet.css</css-path>
</portal-skin>
</gatein-resources>
Deploy your extension and restart the server. The new style of the top navigation bar is displayed below that is different from its default style.
Note
You can also:
Use the Branding portlet to change the logo and color of the top navigation bar.
Create a new CSS file in Sites Explorer by menu
→ → → → → .
See Creating a global stylesheet
for details.