Create a dynamic, linked logo that goes to your root site

In just about every SharePoint site I customize and every CSS demo I do for people, I always use CSS to convert the SharePoint site title to a clickable logo, much like how we see all across the web.  Having your company logo in the upper left corner of your web site that when clicked takes you back to the home page is a very established usability pattern. People just expect it!

One of the challenges with this is the automatically generated link for the site title changes in SharePoint based on which site you are on.  So for example if you have a nested team site, blog or publishing site, when you click on the site title link, you only go back to the home page of the site you are currently on, not the parent site.  So this flies in the face of reason for a clickable logo in your header.

With one quick change to your master page, you can have your new clickable logo go back to the root of your site collection, thus acting as expected. So let’s get started:

  1. Open your custom CSS file in your editor of choice.
  2. Paste in the following style statement and make modifications as needed. There is more detail about this under the statement.
    /* Convert Site Title to clickable logo image */
    .s4-titletext h1 a,
    .s4-titletext h1 a:link,
    .s4-titletext h1 a:visited {
      background: #222 url('http://yourdomain.com/images/logo.png') no-repeat; /* Logo image */
      display: block; /* Required to effectively set image height and width to show full logo image */
      width: 200px; /* Width of logo image */
      height: 100px; /* Height of logo image */
      text-indent: -9999px; /* Hides anchor text */
    }
  3. Code modifications:
    • .s4-titletext h1 a – This selector is based on the out-of-the-box SharePoint master pages. Yours may need to be different based on your custom master page. For example: form > header h1 a. You are targeting the anchor in the H1 that SharePoint generates when the web page is rendered. You will not see the anchor and H1 in the master page!
    • background: #222 url(‘http://yourdomain.com/images/logo.png’) no-repeat; – Update the background color (#222) to your color of choice or to transparent. Update the path to the image. The image can be on your web server, in the content database, on a site that has nothing to do with SharePoint, etc. just as long as the site can successfully resolve the path.
    • width: 200px; / height: 100px; – here is where you set the width and height of your logo file.
    • As a side note, I HIGHLY recommend this method for inserting your logo in your SharePoint site header.  It is a CSS only solution and does not require you to add an image in the master page.  You always want to avoid image tags (<img>) in your master page HTML.
  4. Save your CSS file and check out your changes in the browser.

If you want your new logo to always go back to the root site when clicked, then also do the following:

  1. Open your master page and search for id=”onetidProjectPropertyTitle”. You should now be looking at the SharePoint:SPLinkButton control that is wrapped around the SharePoint:ProjectProperty control for Title.
  2. Update the value for NavigateURL to ~sitecollection/. Your code should look like this:
    <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" id="onetidProjectPropertyTitle">
  3. Save your master page file and check out your changes in the browser.

That’s it! You can take this one step further and add a tool tip effect if you like. To learn how, check out Add a tool tip for an image you create in CSS.

UPDATE May 23, 2012:  My awesome alumni student Joe figured out an additional tidbit of code to add to this control if you need to control the tooltip. By default a tooltip will show in IE7 and only IE7 and it won’t reflect the site collection name, it will still use the current site name.  Add the following properties to the SharePoint:SPLinkButton control to specify your tooltip text:

<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" id="onetidProjectPropertyTitle" AlternateText="Tool Tip Text" ToolTip="Tool Tip Text">