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


Add the following markup to the header.jsp (for example after the section containing:
<li><span class=lotusBranding>
. . . 
# Start Connections Engagement Center FLYOUT PAGE
--%><c:if test="${hasUsername || fn:indexOf(appName, ':search:') == -1}"><%--
            --%><li id="lotusBannerFlyout"><%--
              --%><a id="lotusBannerFlyoutLink" 
onmouseover="dojo.require('lconn.core.header'); lconn.core.header.menuMouseover(this);" 
onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this);" role="button" src="/xcc/rest/public/getFlyoutConfigs?lang=<c:out value="${locale.language}" />&amp;_<%= System.currentTimeMillis() %>" href="javascript:;" aria-label="Open Flyout"><%--
                --%><img alt="FlyoutIcon" src="<lc-ui:blankGif />" class="xccTHIcon" /><%--
                --%><span class="lotusAltText">Open Flyout</span><%--
# 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("/");


Restart the Connections servers to publish the changed header.jsp to all Connections applications.