Skip to content

Flyout mode configuration

To integrate the Connections Engagement Center into the Connections top navigation bar, configure a custom drop menu in the header.jsp in the <CUSTOMIZATION_DIR/>.

Step Instructions

|Copy the header.jsp file into Connections customization folder under common/nav/templates/.

| |2

|Add the following markup to the header.jsp (for example after the section containing:

<li><span class=lotusBranding>
. . . 


Start Connections Engagement Center FLYOUT PAGE

--%><%-- --%>

  • <%-- --%><a id="lotusBannerFlyoutLink" class="lotusBannerFlyout" onmouseover="dojo.require('lconn.core.header'); lconn.core.header.menuMouseover(this);" onclick="dojo.require('lconn.core.header');lconn.core.header.menuClick(this);" onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this);" role="button" src="/xcc/rest/public/getFlyoutConfigs?lang=&_<%= System.currentTimeMillis() %>" href="javascript:;" aria-label="Open Flyout"><%-- --%>FlyoutIcon<%-- --%>Open Flyout<%-- --%><%-- --%>
  • <%-- --%><%--

    END Connections Engagement Center FLYOUT PAGE

    |Add the following CSS to your Connections theme customization and copy the images for the Flyout page to the <THEME\_FOLDER\>/images folder of the <CUSTOMIZATION\_DIR\>.
    **Note:** For Right-to-Left languages such as Hebrew or Arabic, add the following CSS to the customRTL.css file.
    .xccTHIcon {
        background-image: url("/");
        background-position: 0 0;
        background-repeat: no-repeat;
        height: 16px;
        margin: 2px 0 0 0;
        width: 16px;
    .lotusui30 #lotusBannerFlyout.lotusSelected  .xccTHIcon,
    .lotusui30 #lotusBannerFlyout.lotusHover .xccTHIcon,
    .lotusui30 .lotusBanner .xccTHIcon:hover,
    .lotusui30 .lotusBanner .xccTHIcon:focus,
    .lotusui30 .lotusBanner .xccTHIcon:active {
        background-image: url("/");

    | |4

    |Restart the Connections servers to publish the changedheader.jsp to all Connections applications.


    Parent topic:Mode configuration