3.3.8.2.4. Customizing a shared layout

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:

  1. 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>
    ...
  2. 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:

  1. 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>
    ...
  2. 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:

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).

  1. Add the following stylesheets to the custom-extension.war!/templates/skin/DefaultStylesheet.css file.

    
    .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;
    }
  2. 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>
  3. 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 ContentSites ExplorerSites Management"shared" drive"css" folder. See Creating a global stylesheet for details.

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