So you want to brand the Suite Bar in SharePoint 2013 huh? Well, you are luck as I got some information below on how to do it. But before I begin, I’m only going to go through how to do this with SharePoint Server. Why you ask? Well, for starters I can’t keep up with Office 365 and their constant updates to the suite bar. As soon I figure out a way, there they go changing it again…Anyhow.

In this post I will show you have to customize the ‘SharePoint’ branding in the top left and replace it with anything you want such as new text or even adding an image.

Editing the SharePoint Suite Bar

Ok, modifying the SharePoint logo is really straight forward, and we can achieve this with the use of some jQuery. Oh yea, you will need SharePoint Designer 2013 too, but I’m assuming you have this already.
  • Step 1: Open up your site in SharePoint Designer 2013.
  • Step 2: Go to your custom master page and open it in Advanced Mode.
    IMPORTANT: If you are unsure about master pages, please do some research before making any changes to it.
  • Step 3: Locate the header section where you load your jQuery scripts and insert the following to the head:

    Note: Line 4 in the snippet above is where the goodness is at. Replace the HTML with whatever you like, perhaps even add an image? You know, make it sexy.

  • Step 4: Save & Publish the changes to your master page.
  • Step 5: Enjoy the new branding on your SharePoint site!

Before:

After:

That’s a wrap!

Were you expecting more? Well, sorry about that if you were, but no need to write a super long article to accomplish such an easy task. So here you go, and hope you enjoy and get creative with this!

Tags: