Creating a Custom Master Page in SharePoint 2010 !

This post is going to cover the first steps for branding a site in SharePoint 2010. This post is actually the most important part, creating the Custom Master Page. Prior to this I created a PSD of what I imagined the site would look like. After I received approval to move ahead, I then made a mini HTML version of the site. So I have on hand my html version of the site, which I am going to move over into my master page.

The best way to start creating your custom master page is with something that already works. Either by using the master page that came with SharePoint or use one that has been trimmed down just a bit, in this case I start with Randy Drisgill’s Starter Master page.

The first step is to copy the html from my page into my SharePoint master page – the parts I am copying are anything that would fall within the body tag. I place the code above the DIV tag that has the ID=”s4-workspace”. It’s a good idea to go ahead and remove any of the filler content you may have placed in your page. Also, it is good practice to comment your page layout, it really helps to keep things in order.

Using a master page will help give the site consistency. What do we want to look consistent? What do would think needs to stay consistent on the site?

Items that need to stay consistent on the site would be:

• the header (logo and top navigation)
• the footer (the copyright area)
• any look and feel that will go around your page layout (background image for the body).
  

The other part that would stay consistent is the left or right navigation area, depending on your layout.

The areas for content, web parts, etc is located in the middle of those pieces. This area is the part that is going to change from page to page; it holds your content, your web parts, etc. This is where the ContentPlaceHolderMain is placed in your master page.

For the site that I am customizing, there is a section that I want to update via a list or HTML content area and will not fall in the same space as the Main Content Place Holder. For areas such as this you need to create a custom ContentPlaceHolder. The code is straightforward and all you need to do is copy the text below and add your own unique ID.

For example: <asp:ContentPlaceHolder id=”YourConentPlaceHolderName” runat=”server” />

Now when any page is created using my custom master page, web part zones or content areas can be added within this custom place holder.

When adding custom ContentPlaceHolders I prefer to add formatting around the code, this way the person adding in the web part or someone updating the page will not be able to remove the branding I have around my place holder. I also make sure that I have some of the other CSS classes created for the <p> or H2 tags that may be placed in this area already created in my style sheet.

<div class="rtext">
<asp:ContentPlaceHolder id="tagText" runat="server">
<!—Web part or content can be added here –>

</asp:ContentPlaceHolder>
</div>

Here is the trimmed down html section that is placed in the custom master page. Present are the header, tag text area, main content area, left navigation and copyright area. You can see that the Custom ContentPlaceHolder has already been added to this code. Next I will move each section into the proper areas of the master page.

The easiest thing to move first is the copyright. When you have a nested DIV structure, one tip is to hit CTRL-Shift ; to make sure you select the entire block of code.

I use the name Copyright vs Footer, the last version of SharePoint the class Footer was use in one of the publishing sites page layouts and created havoc on a few of my sites. Using different or unique names helps to avoid the accidental overlap of classes or ID’s.

I add the class s4-notdlg so my footer does not show on the modal window. (Example: a modal window will open when you add a document to a library or an item to a list.) See this post Dealing with Background Images in your dialog boxes and this post SP2010 Branding Tip #2.

The next section that I move and merge is #bodywrapper which is the main chunk of the page. The Custom ContentPlaceHolders are there under #toparea. The #bodyinner section holds the left navigation and the content area.

Now I have everything in place for my main content area. The next section to move is the top navigation area.

The SharePoint link button control has been placed in the H1 tag that renders my Logo Image. I use a nifty CSS trick so the text that is rendered in the area is moved completely off the page; in other words it is not visible to the visitor but it is readable by Search Engines and Screen Readers.

#logo h1 {
text-indent: -99999px;
}

I’ve decided not to use the search feature at this time, so I have moved it to my hidden panel at the bottom of the page.

I am ready to view my site now in a browser to see how it looks.

So the site works, meaning I don’t have an Unexpected Error screen. For look and feel I need to make a few more adjustments so my custom master page looks like my test HTML version. My next step is to adjust my style sheet to correct some of these issues.

One thing that should be changed is to move the #Copyright section so that it expands the full width of the site. It has to be moved to set inside the #s4-workspace and #s4-bodyContainer DIV which wraps around the bulk of the master page.

I also moved #container inside the #s4-workspace and #s4-bodyContainer DIV. This corrected the shifting of the page in the last browser preview screenshot.

Now it looks a bit better.

The next thing was to make a change in my CSS file. I removed the background image and added to the ID #s4-bodyContainer.

The bulk of moving my HTML layout into the master page is complete. I now move on to making sure my items are positioned and look proper. Those items will be in future posts.

Have a great day, and thanks for reading.

Starter Master Pages for SharePoint 2010