The SharePoint Designer

Brand. Design. Amaze.

May 28

Adding links to the Office 365 App Bar in SharePoint Online

No Gravatar

When you are using Office 365 in its totality, you notice a difference in the top bar. In SharePoint Online (when not using the rest of O365) your top bar is called the Suite Bar (#suiteBar). When using the full O365 portal your top bar is the O365 Navigation Header (#o365cs-nav).

SharePoint Online
SharePoint Online

 

Office 365 SharePoint Online
Office 365 SharePoint Online

 

In SharePoint Online, we could over write the bar to have logo’s links and even a search box.

The code is simple enough:

Code

<div id="suiteBar" class="ms-dialogHidden noindex">
 <div id="suiteBarLeft"> 
   <div class="ms-table ms-fullWidth">
     <div class="ms-tableRow"> 
       <div class="ms-tableCell ms-verticalAlignMiddle">
            <a href="#" style="padding-left:20px;"><asp:Image ImageUrl="<% $SPUrl:~sitecollection/Style Library/Custom/images/CustomLogo.png %>" runat="server" /></a>

 <SharePoint:DelegateControl id="ID_SuiteBarBrandingDelegate" ControlId="SuiteBarBrandingDelegate" runat="server" />

 </div>
 <div id="Search"> 
   <div id="SearchBar">
     <SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="" runat="server">
      <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
        <div id="searchInputBox">
         <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
        </div>
     </asp:ContentPlaceHolder>
    </SharePoint:AjaxDelta>
  </div>
 <div id="SuiteIcons">
 <a href="https://dimensiondata.onedrive.com" style="padding-right:30px;"><asp:Image ImageUrl="<% $SPUrl:~sitecollection/Style Library/Custom/images/OneDriveIcon.png %>" runat="server" /></a>
 <a href="https://www.yammer.com/Custom.com"style="padding-right:10px;"><asp:Image ImageUrl="<% $SPUrl:~sitecollection/Style Library/Custom/images/YammerIcon.png %>" runat="server" /></a>
 </div>
 </div>

When we come to the O365 bar, I had a massive issue. I couldn’t modify the bar, insert anything, and the one thing i could control (albeit with difficulty) was the left Office 365 text and you can use css to add an image. Even using Jquery and Javascript to do an insert into the middle bar (.o365cs-nav-centerAlign) got “stripped” on the ribbon load.

After a long fight and pure desperation I tried the simple approach: Wait for the page to finish loading and executing its code, and then do the replace. I added this to the bottom of my master page. Ensure you are linking up with the JQuery files. Either via CDN (“//code.jquery.com/jquery-1.11.3.min.js”) or a direct link to a JS file (download here )in your style library or master page directory.

Code:

<script type="text/javascript">
 (function ($) {

 $(window).bind("load", function() {
 $('.o365cs-nav-centerAlign').append('<div class="site-links"><a href="https://#">Link One</a><a href="Https://#">Link Two</a></div>');
 });
 })(jQuery);

  </script>

 

(Quick how to on the logo)

In your CSS

.o365cs-nav-brandingText

{ display:none;}

#O365_MainLink_Logo

{ background-image: url(‘your image’); }

Resulting in this kind of effect:

O365-links

 

 

So I know this is probably simple enough for most of you SharePoint Whispers out there, but I hope this helps some one as I couldn’t find anything relating to this on the net.

If you need a bit more help, let me know, I can send you the full masters.

 

Leave a comment

The SharePoint Designer is using WP-Gravatar