Adding links to Suite Bar in Office 365

So we want to add few custom links to the Delta suite bar within Office 356. You can either add it to the Script Editor webpart to add these links for single page or add it to the master page if you want so.

Before:

suitebar_before

After:

suitebar_after

 

<script type="text/javascript">    
    
        $(document).ready(function() {
           var addLinks = "<div class='o365cs-nav-O365LinksItem'><div><a title='Google' class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' id='O365_MainLink_ShellMail' role='menuitem' aria-disabled='false' aria-selected='false' aria-label='Google' href='http://google.co.uk'><span>Google</span><div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display: none;'></div></a></div><div style='display: none;'></div></div>";

addLinks +=  "<div class='o365cs-nav-O365LinksItem'><div><a title='Bing' class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' id='O365_MainLink_secondLink' role='menuitem' aria-disabled='false' aria-selected='false' aria-label='Bing' href='http://bing.co.uk'><span>Bing</span> <div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display:none;'></div></a></div><div style='display: none;'></div></div>";
        $('.o365cs-nav-O365Links div:first').prepend(addLinks);
     });
   </script>

Customising Office 365 icon in SharePoint 2013

While implementing an Office 365 solution, I did some quick fixes to the system (mostly branding the site) which I would like to share in this post.

Hiding the Office 365 icon on the top left of the window


Add the following lines to the CSS file

.ms-core-brandingBox {display:none;}


Editing the Office 365 icon to custom icon

If you want to show your company logo instead, add the logo to your SharePoint site and refer it in the CSS like the following:

#suiteBrandingIconBox {background-image:url(image url location)!important;
background-color:transparent;background-position:top left;background-repeat:no-repeat;height:30px; }

Hiding the Show More on person.aspx


When you implement mysites within SharePoint 2013, on the person.aspx page, there are few information available for the person like Email Address, Office Phone, Mobile and so on. This webpart comes with a Jquery link Show More and Show Less which contracts and expands on click.
I had a requirement where I had to hide this button and expand the box always so that all the values are visible to the user at all times. Here is how I implemented the solution.

  • Find out the ID for the control by going to Developer tools within your browser.
  • Replace it after the # sign in the example below.
  • Add the whole snippet into Script Editor webpart on the person.aspx page

#your respective ID of the control_ProfileViewer_showHideLink
{
display:none;
}
.ms-profile-hiddenDetails
{
display:block !important;
overflow:visible !important;
}