Jeff Jacobson-Swartfager

Link Your Site Logo to Your Root Homepage in SharePoint 2013

On most websites, clicking on the site logo will take you back to the website homepage. Given this established interaction pattern, Microsoft has made an extremely odd choice in SharePoint: instead of bringing you to the homepage, clicking on the site logo takes you to the root page of the current site collection.

Here’s how to fix Microsoft’s mistake in SharePoint 2013.

Locate the Master Page

You’ll need to edit the Master Page in order to make this change (and the relevant permissions to access it). If you find you don’t have access, talk to your site administrator.

To get to your Master Pages via the SharePoint ribbon, click the Settings gear, and select Site settings from the dropdown menu. You’ll find yourself at the Site Settings page.

If you have the permissions you need you’ll see a Web Designer Galleries section. Click on Master pages and page layouts to access all of your Master Pages.

If you’d prefer to navigate directly to your Master Page Gallery, you can enter the following URI in your browser’s address bar (replace changecase.net with your SharePoint install’s root address):

1
http://changecase.net/_catalogs/masterpage/Forms/AllItems.aspx

Download the HTML Master Page that you’ve applied to your SharePoint site and open it up in your favorite text editor (A short list of my favorite text editors include vim, Sublime Text 2, and Notpad++… Yeah, I’m not a gmacs guy). If you work in SharePoint Designer or Visual Studio, I’ll assume you know how to navigate to your Master Page already.

In this example we’ll use the master page from the default SharePoint 2013 theme, Oslo: oslo.html. There are two things to note here:

1. Edit the HTML Master Page

There are very likely three files with similar names in the Master Page Gallery, oslo.html, oslo.master, and oslo.preview. You want oslo.html.

The file oslo.master will be regenerated by SharePoint when you upload your changes.

The file oslo.preview is related to theming. It is a file neccessary for selecting your from the theme preview. It is of no concern to us here.

2. Don’t Make Changes to Default Files

Since we are going to be working on making changes to one of the default Master Pages, we risk breaking things terribly. Instead of making your changes in oslo.html, save your changes with a new filename. This way, you can always revert back to oslo.html if neccessary.

This is a rule to hold to when working on anything with SharePoint. If you are making changes built off a default file, call your changed file something different. Sure, you may have to go back and re-connect a few links when you do this, but that’s better than bringing your whole site down when you update.

We’ll call our new Master Page copenhagen.html. When we upload our changes, SharePoint will generate copenhagen.master.

Edit the Master Page

Locate the SiteLogoImage control. It will look something like this:

1
2
3
4
5
<!--<MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic">-->
  <!--<MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="ontidHeadbnnr2" LogoImageURL="/_layouts/15/images/siteIcon.png?rev=23" runat="server">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ct100_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="http://changecase.net/_layouts/15/images/siteIcon.png?rev=23" alt="Content site" /><!--PE: End of READ-ONLY PREVIEW-->
  <!--ME:</SharePoint:SPLinkButton>-->
<!--ME:</SharePoint:SPSimpleSiteLink>-->

Now, all you need to do is replace the SPSimpleSiteLink with something better. According to MSDN, this control is pretty useless. It merely “provides a link to the current site.” In other words, it does irrational shit.

So, to fix it, you need to replace the SPSimpleSiteLink control with something more useful. In this case, it is pretty easy: just replace it with the SPLinkButton control:

1
2
3
4
5
<!--MS:<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" id="onetidProjectPropertyTitleGraphic">-->
  <!--MS:<SharePoint:SiteLogoImage name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="images/logo.png" runat="server">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ct100_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="http://changecase.net/_layouts/15/images/siteIcon.png?rev=23" alt="Content site" /><!--PE: End of READ-ONLY PREVIEW-->
  <!--ME:</SharePoint:SiteLogoImage>-->
<!--ME:</SharePoint:SPLinkButton<-->

Commit to Your Changes

Now, upload (or save) copenhagen.html back into the Master Page Gallery. When uploading the file, make sure to mark the file’s Type as HTML Master Page and mark the checkbox for compatability with 15. SharePoint will generate copenhagen.master for you.

If versioning has been turned on in your environment (and it should be!), you’ll have to Publish a Major Version of copenhagen.html in order to apply your changes. After doing so, you’ll be able to select the master page from the Design Manager.

comments powered by Disqus