Customizing a SharePoint Banner

Modifying the header or banner portion of a SharePoint page is not as easy as you would hope. In this post I’ll walk you through one possible approach to adding a custom look while maintaining the functionality and positioning of out of the box components. I’m going to be using SharePoint designer to modify the master page to customize the banner. This is what I’m starting with.

Open the site you’re working on with SharePoint designer File > Edit with Microsoft Office SharePoint Designer. COPY the default.master page found in this directory _catalogs/masterpage/. Open the copied master page, find the tag below, it’s the starting point for the header portion of the page.

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%">

Add this line directly underneath the table tag. You can also add an image as the background here as long as it grows and shrinks gracefully.

<tr><td><div style="background-color:fuchsia"><table width="100%">

Find <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server"> close the tags you’ve just added by adding this line above the content placeholder </table></div></td></tr>.

Find and remove class="ms-globalTitleArea".

Find and remove class="ms-bannerContainer".

Ok, we’ve changed the background color. Let’s change the title of the site. Find the content place holder tag below and remove it.

<td class="ms-sitetitle" width=100%>

    <asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
          <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle">
         <SharePoint:ProjectProperty Property="Title" runat="server" /> </SharePoint:SPLinkButton>
    </asp:ContentPlaceHolder>
</td>

Once you have removed the content place holder tag and its contents you, will not be able to change the title via the admin settings in the browser. Add whatever markup here you would like.
 <h2 style="color:white">This has been way harder than it should be</h2>

You can use this area to include an image as well, replace the <h2> tag with something like this:
<div style="background-image:url('images/header.gif');background-repeat:no-repeat; height:150px"></div>

To Get rid of the icon to the left find the SharePoint:SiteLogoImage tag and replace LogoImageUrl="/_layouts/images/titlegraphic.gif" with LogoImageUrl="/_layouts/images/blank.gif"

 If you would like to change the color of the links in the header area you will need to override the following CSS classes, ms-SPLink, ms-globallinks and ms-sitemapdirectional.