3.4.3.3. Customizing a shared layout

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

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 4 typical examples of the top navigation bar configuration: removing a portlet, adding a new portlet, changing the color scheme and modifying the configuration of a portlet.

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

}


<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 → Content → Sites Explorer → Sites Management → "shared" drive → "css" folder. See Creating a global stylesheet for details.

Changing configuration of the top navigation bar

Assume that you want to change the navigation link of the Help portlet, you need to override this portlet's configuration under platform-component-uxpnavigation-*.jar!/conf/portal/configuration.xml by your own extension. Below are steps to do this:

Copy the configuration.xml file from platform-component-uxpnavigation-*.jar!/conf/portal/ and paste into custom-extension.war!/WEB-INF/classes/conf/portal/.

Modify pairs of name and value attribute as your desire. These pairs define which navigation link is corresponding to which platform context. For example, name="Company Context Home" and value="http://www.exoplatform.com/company/en/company/about-us" mean that if users are staying at platform homepage, then clicking on the Help link will redirect them to the address indicated by the value attribute.


<?xml version="1.0" encoding="ISO-8859-1"?>

<configuration

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

        xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"

        xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

    <component>

        <key>org.exoplatform.platform.navigation.component.help.HelpService</key>

        <type>org.exoplatform.platform.navigation.component.help.impl.HelpServiceImpl</type>



        <init-params>

            <properties-param>

                <name>help.pages</name>

                <description>Help Pages match definition</description>

               <property name="Company Context Home"

                         value="http://www.exoplatform.com/company/en/company/about-us"/>

               <property name="Company Context Calendar"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/CALENDAR.html"/>

               <property name="Company Context Wiki" value="https://docs.exoplatform.org/PLF42/PLFUG/WIKI.html"/>

               <property name="Company Context Forum"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/FORUM.html"/>

               <property name="Company Context FAQ:Answers"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/ANSWERS.html"/>

               <property name="Company Context Documents"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/DOCUMENTS.html"/>

               <property name="Company Context Connections"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/CONNECTIONS.html"/>

               <property name="personnal:all-spaces"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/SPACE.html"/>

               <property name="personnal:connections"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/CONNECTIONS.html"/>

               <property name="personnal:activities"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/ACTIVITY.html"/>

               <property name="personnal:notifications"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/NOTIFICATIONS.html"/>

               <property name="personnal:profile"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/PROFILE.html"/>

               <property name="personnal:wiki"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/WIKI.html"/>

               <property name="dashboard"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/APPS/DASHBOARD.html"/>

               <property name="space:activity_stream"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/SPACE.html"/>

               <property name="space:manager"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/SPACE.html"/>

               <property name="space:wiki"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/WIKI.html"/>

               <property name="space:forum"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/FORUM.html"/>

               <property name="space:calendar"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/CALENDAR.html"/>

               <property name="space:faq_annswer"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/ANSWERS.html"/>

               <property name="space:document"

                         value="https://docs.exoplatform.org/PLF44/PLFUG/DOCUMENTS.html"/>

               <property name="default"

                         value="https://docs.exoplatform.org/PLF44/PLFUG.html"/>

            </properties-param>

        </init-params>

    </component>

    <component>

        <key>org.exoplatform.platform.navigation.component.breadcrumb.UserNavigationHandlerService</key>

        <type>org.exoplatform.platform.navigation.component.breadcrumb.impl.UserNavigationHandlerServiceImpl</type>

        <init-params>

            <values-param>

                <name>user.navigation.uri</name>

                <value>profile</value>

                <value>edit-profile</value>

                <value>connections</value>

                <value>activities</value>

                <value>connections/all-people</value>

                <value>connections/network</value>

                <value>connections/receivedInvitations</value>

                <value>connections/pendingRequests</value>

                <value>connections/yours</value>

                <value>connections/invitations</value>

                <value>connections/requests</value>

            </values-param>

        </init-params>

    </component>

</configuration>

Deploy your extension and restart the server. Now, when you click on the Help icon, you will be redirected to the corresponding address as shown above.