Creating a Page Layout

• Part 1: Introduction to SharePoint 2010 Branding and WCM
• Part 2: Branding a Master Page.html
• Part 3: Refining the Branding of a Master Page
• Part 4: Adding Anonymous Support to Master Page
• Part 5: Branding SharePoint 2010 Search
• Part 6: Creating a Page Layout
• Part 7: Customizing Content Query Web Parts
• Part 8: Deploy Branding Solution

Page Layouts

The next thing you will need to do as part of any major web content management project is create Page Layouts. Again, I am not going to provide a robust definition on what a Page Layout is because it is pretty well defined in books and on MSDN. What I am going to do in this example is create a simple content type and then create a page layout for the content type.

In this example I am going to create a Technology Article Page which will inherit from the out of the box Article Page. I will am going to add a couple custom fields to this content type like Confidentiality and Technology. I will later use these to do some fun stuff with content query web parts.

1 – Create a Content Type

Like I said the first thing I am going to do is create a content type based on the Article Page content type and add some of my own fields. For both Confidentiality and Technology, I am going to use the managed metadata service and term storm.

So first I created some terms:

Then I created my new Technology Article content type which inherits from Article Page. Below is a screenshot of the new content type.

Then you I created Confidentiality and Technology columns using the managed metadata. I also added the Enterprise Keywords column which allows for folksonomy tagging to be applied to my article. As well I have added Rating (0-5). Here is a screenshot of all the columns.

2 – Create Page Layout

To create a new Page Layout:

• Open SharePoint Designer 2010 and go to Page Layouts.
• In the ribbon select new Page Layout.
• Select the Technology Article content type. I will subsequently be taken to a page where I will be editing the page in advanced mode.

Now all I need to do is start adding in controls and HTML to build up the page layout. As you can see below, I have turned on the split view and the branding from the master page is being applied. Towards the bottom of the split view you notice the PlaceHolderMain outlined in light purple. That is where all the modifications will be made. You may not recall but this corresponds back to the Master Page. So when a page is rendered in SharePoint, both the Master Page and Page Layout are merged together to create the web page that is ultimately rendered.

Within this screen I was able to compose a web page using the fields I have available to me from my content type. Here is the resulting screen that I created. Looks pretty basic but I have pulled in some core data fields, I am displaying managed metadata, and I am displaying the rating for the article.

Here is a view of that same article in edit mode.

Now to achieve this I did have to do several things in SharePoint Designer 2010.

The process for creating the page was simple. First I created a HTML layout with some CSS embedded page layout to control the presentation. I put in a HTML table and then started dragging and dropping fields into the table. Now there are a couple little things you should know.

Metadata fields will not work when you drop them in. You need to add the following to the top of the page which will then allow the managed metadata fields to render on the page layout.

<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

The Rating (0-5) control will not work either unless the following is registered at the very of the page layout.

<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

To display the created and modified date you will need to again add the following registration to the top of the page layout.

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Lastly you may have noticed that the big wave logo is missing from this page layout. This is because I made a decision that the wave branding was taking up too much real-estate for an article. A little trick I did was adding some CSS to the page layout to hide it. I like this approach because I really want this logo to be part of the master page but just for this particular page layout I do not want to display it.

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <style type="text/css">
        #logo { display: none; }
    </style>
</asp:Content>

Page Layout Code

The following is the resulting code I created for the page layout.

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <style type="text/css">
        #logo {
            display: none;
        }
        .TechArticleTitle {
            font-weight:bold;
            vertical-align:top;
            width: 10%;
            padding-right: 10px;
            padding-left: 10px;
        }
        .TechArticleValue {
            vertical-align:top;
        }
    </style>
</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    Technology Article - 
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

    <table>
        <tr>
            <td class="TechArticleTitle">Title:</td>
            <td class="TechArticleValue">
                <SharePointWebControls:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server"></SharePointWebControls:TextField>
            </td>
            <td class="TechArticleTitle">Modified:</td>
            <td class="TechArticleValue" nowrap>
                <SharePoint:FieldValue FieldName="Modified" runat="server" id="modified" ControlMode="display"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="TechArticleValue" nowrap>
                <SharePointPortalControls:AverageRatingFieldControl FieldName="5a14d1ab-1513-48c7-97b3-657a5ba6c742" runat="server"></SharePointPortalControls:AverageRatingFieldControl>
            </td>
            <td class="TechArticleTitle">Created:</td>
            <td class="TechArticleValue" nowrap>
                <SharePoint:FieldValue FieldName="Created" runat="server" id="created" ControlMode="display"/>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Confidentiality:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="a472e313-fd5f-4423-89b3-bdd721461eac" runat="server"></Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Technology:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="9129feba-3b4a-4dd7-82cc-0822730d16c8" runat="server"></Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Keywords:</td>
            <td class="TechArticleValue" colspan="3">
                <Taxonomy:TaxonomyFieldControl FieldName="23f27201-bee3-471e-b2e7-b64fd8b7ca38" runat="server"></Taxonomy:TaxonomyFieldControl>
            </td>
        </tr>
        <tr>
            <td class="TechArticleTitle">Article:</td>
            <td class="TechArticleValue" colspan="4">
                <PublishingWebControls:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"></PublishingWebControls:RichHtmlField>
            </td>
        </tr>
    </table>    
</asp:Content>

Conclusions

With that I hope that I have demonstrated how quick and easy it is to create some page layouts with data coming off my content types. I really think this is just such an awesome way and easy way to do web content management.

In the next part of this series I am going to further extend this page layout with content query web parts.

Next

We are going to explore content query web parts and how to integrate them with the page layout we just created.

Branding SharePoint 2010 Search

• Part 1: Introduction to SharePoint 2010 Branding and WCM
• Part 2: Branding a Master Page.html
• Part 3: Refining the Branding of a Master Page
• Part 4: Adding Anonymous Support to Master Page
• Part 5: Branding SharePoint 2010 Search
• Part 6: Creating a Page Layout
• Part 7: Customizing Content Query Web Parts
• Part 8: Deploy Branding Solution

Search Template

Another thing you will quickly run into is when doing your custom branding is the Search Centers will not show your branding. In this case, I have FAST installed on my development machine. So I went ahead and created a FAST Search center and I had the following.

First thing you may try is go to the Site Actions >> Site Settings >> Site Features and turn on Publishing just like you did for other sub sites. But doing this will not make the FAST site show your custom branding.

Then when you go look at the Site Settings >> Master Pages you will notice that Site Master Page is set to minimal.master. You can try to try to set it to use your custom master page by selecting “Inherit site master page from the parent site”.

However you will get is a screen that looks like the following. Yes your branding came through but where is the search box?

You can do a lot more reading on the topic on why the search text box did not appear. At the end of the day the Search Center templates were coded to work best with the minimal.master template. Recently I took the approach of trying to make a copy of minimal.master and then apply my HTML template to it. It was a lot of work and I could not get it perfect. However this brilliant guy wrote a blog about this - http://blog.drisgill.com/2010/09/converting-custom-sharepoint-2010.html

I followed his steps exactly. I made a copy of my master page, applied all the changes specified in the blog and I got the following results in five minutes. With that I now have a perfectly branded FAST search center site.

Next

Next we are going to work on creating some custom page layouts to be deployed with this master page.

Adding Anonymous Support to Master Page

• Part 1: Introduction to SharePoint 2010 Branding and WCM
• Part 2: Branding a Master Page.html
• Part 3: Refining the Branding of a Master Page
• Part 4: Adding Anonymous Support to Master Page
• Part 5: Branding SharePoint 2010 Search
• Part 6: Creating a Page Layout
• Part 7: Customizing Content Query Web Parts
• Part 8: Deploy Branding Solution

Create Anonymous Site

One of the next things I wanted to do is play with having an anonymous site because I know there is a little extra work I need to do master page to handle this correctly. To quickly do this on my dev machine:

• I extended my web application to have a new internet zone; making sure to allow anonymous access.
• Then I went to the site via the new url for the zone I just created. I was prompted for a password even though I had anonymous set up. So I needed to do a few other things.
• I then went to Site Actions >> Site Permissions >> in the ribbon I selected the Anonymous Access button >> and selected Entire Site for anonymous access.
• I then closed the browser. Then I went Start >> Run As >> typed in the url for the new zone I created.
• NOTE – make sure you check in your Master Page! Otherwise you will see an unbranded website. I did this by mistake because I was logged in as an Administrator on my development machine but going to the SharePoint site as an anonymous user. Anonymous users cannot see anything that has not been checked in and published.

Below is the result. It still looks the same other than the ribbon at the top has a lot less stuff. At this point the ribbon really does not do much good for an anonymous user and the first request is can this be hidden for anonymous users?

There have been several approaches written about this on the internet. The most simple and clean solution is to add some CSS to the master page to handle this. So I will add the asp:LoginView control into the master page. Any code that I added within the <AnonymousTemplate> will only appear when the user is logged in anonymously. So what I did was add the link to the login page within the <AnonymousTemplate> tags. This way a user will see a link to login when they are anonymous and then not see the link anymore after that.

Below I have added it into the master page with my top navigation. You can put it where ever you want to.

<!-- header -->
<div id="header" class="s4-notdlg">
    <div id="menu">
        <div id="menu_list">          
     
            <asp:LoginView id="LoginView" runat="server">
                <AnonymousTemplate>
                    <a href="/_layouts/authenticate.aspx" title="User Login">Sign In</a>
                    <style type="text/css">
                        #s4-ribbonrow {display: none;}
                    </style>
                </AnonymousTemplate>     
            </asp:LoginView>

     
            <!-- top navigation area -->
            <div class="s4-notdlg">
                <!-- top navigation publishing data source -->
                <PublishingNavigation:PortalSiteMapDataSource
                    ID="topSiteMap"
                    runat="server"
                    EnableViewState="false"
                    SiteMapProvider="GlobalNavigation"
                    StartFromCurrentNode="true"
                    StartingNodeOffset="0"
                    ShowStartingNode="false"
                    TrimNonCurrentTypes="Heading"/>
     
                <!-- top navigation menu (set to use the new Simple Rendering) -->
                <SharePoint:AspMenu
                  ID="TopNavigationMenuV4"
                  EncodeTitle="false"
                  Runat="server"
                  EnableViewState="false"
                  DataSourceID="topSiteMap"
                  AccessKey="<%$Resources:wss,navigation_accesskey%>"
                  UseSimpleRendering="true"
                  UseSeparateCss="false"
                  Orientation="Horizontal"
                  StaticDisplayLevels="1"
                  MaximumDynamicDisplayLevels="1"
                  SkipLinkText=""
                  CssClass="s4-tn">
                </SharePoint:AspMenu> 
            </div>
        </div>
    </div>
</div>

Then when I went back to the site, this is what I now see. I now see a link called Sign In.

Then after I press the Sign In link and log in, the ribbon is displayed again and that Sign In link is hidden from view. Pretty cool.

Next

In the next article we are going to look at adding the master page template to search.

Refining the Branding on the Master Page

• Part 1: Introduction to SharePoint 2010 Branding and WCM


• Part 2: Branding a Master Page.html


• Part 3: Refining the Branding of a Master Page


• Part 4: Adding Anonymous Support to Master Page


• Part 5: Branding SharePoint 2010 Search


• Part 6: Creating a Page Layout


• Part 7: Customizing Content Query Web Parts


• Part 8: Deploy Branding Solution

In the previous blog we created the master page. Now we need to refine it with the CSS.

5 – Refine CSS

What I found out as part of my learning process is that is pretty much impossible to get it perfect on the first try because you will need to get the CSS of the HTML Template working with the SharePoint CSS. It is a very iterative process. In this section I will document several of the sort of things I found out that will help you get the CSS working.

So if you followed along in the last section, you will know we have a screen like this. There are several things you will immediately see an issue – like:

• Where is the scroll bar?


• The right border is gone?


• Etc.
  

Before we go off trying to fix things, I found the best way to investigate issues with CSS is to us Internet Explorer. Just go to Tools >> Developer Tools. What I do a lot is:

• Press the “Select Element by Click” button. This freezes the screen and then allows me to mouse over areas of the screen. It will highlight CSS with a blue box around it.


• I think click on an area of interest, and the DOM tree goes directly to the place.


• I then even have the ability to tweak the CSS style on the right to see if making a change will give me the intended result.

For what I need to do, I find this to be the perfect tool.

It is going to be hard for me to document each and every little change I made to the CSS and Master Page to show you how I got it to work. As well, I mentioned this is not production ready so I bet there are other potential things that would have to be worked out. What I will cover is some major ones I had to do and will hopefully help you when you need to do this for your web site.

Here is the original CSS I have for my HTML template. We will be making several changes to it. I am providing this for comparison purposes.

body { margin:40px; font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:11px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #0A8FDE; }
a { color:#10639a; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; }

#header { background:url(images/header_bckg.jpg) no-repeat top right #0EA5FE;}
#logo { padding:50px 60px 0 40px; height:130px; background:url(images/head_bckg.jpg) no-repeat #0EA5FE; }
#logo a{ font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo_text { float:right; width:200px; font-size:10px; color:#fff; line-height:12px; padding-top:5px;  }
#menu { background: url(images/menu_bckg.gif) repeat-x #fff; height:40px; padding-top:10px;}
#menu_list {width:600px; margin:0 auto;}
#menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;}
#menu a:hover{ color:#078DE2;}
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;}

#text { margin: 0 292px 0 0; background:url(images/content.gif); padding:10px;}
#text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}
#sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
#sidebar a{ font-weight:bold; }
#sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}

#main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top right #fff; }
#footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}

Now I will document my notes on what I had to do to get this template completely working.

• Moved the CSS that was in the master page to my HTML template CSS file to consolidate things.


• Removed <div id="main"> from the master page and from the CSS file. It was basically loading in an image that I did not need.


• Removed the #text li from the CSS because it was interfering with application pages and is not needed for what I am doing.


• In the HTML template CSS, I removed the margin 40px from the body attribute. Now I have back the scroll bar and now the page is taking up the screen. However I do not have the nice borders on the left and right. Still more work to be done.

• Next I created a new CSS style that controls the width of the page (masterPageWidth) and then placed the div tag in the master page so it covers all the content place holders. Now we have our nice left and right hand side borders.

• Next you may be wondering what the heck is that big blue area on the right all about in the screenshot above? Using the IE >> Tools >> Developers tools I quickly found out that the CSS for my HTML template had a #text tag with a margin setting that was causing that. I removed it and this starting to look a lot better – see below.

• Next I need to make some modifications to show the search box and the tagging controls better. It is much easier now to place them given I have the CSS worked. I simply went back to the master page and added a HTML table to right justify it and make it appear on the same line.


• I also added a breadcrumb control which is was part of the SP 2007 by added <asp:SiteMapPath runat="server"/> to the master page. I also added some CSS to make it present well.

• Next issue I ran into was with the dialog boxes as you can see in the screenshot below. As you can see it is way too large. I had a good idea this had to do with the new CSS style I called (masterPageWidth). Well the SharePoint 2010 Branding Wrox book pointed me in right direction here. I added some CSS to override some of changes I was making. Specifically I added styles for ms-dialog which solved my problem pretty quickly.

• Another interesting thing I ran into when clicking around I found the following issue in the below screenshot. When I went to manage the Approvers user group; look at this. Apparently the entire background is not being pushed down. The reason why is I added some CSS into the master page (way back in the beginning of this blog) that will show the left hand navigation when it is needed. It is needed for user administration. I was able to resolve the problem by again using the handy dandy IE Developer tool. First, I overrode s4-leftpanel and set the background to white. Second, I modified the masterPageWidth attribute that I added to have a white background as well.

• Another thing you may have noticed is in the top I have created sub site. However if you were to click into them, none of them would have the branding. All you need to do in the sub site is go to Site Setting >> Manage Site Features >> activate SharePoint Server Publishing and the branding will be pulled through. Now you can see that the sub site branding is coming through nice and clean.

• Then I decided to click around some more in my basic site with almost no content. Most everything was working.


• Then I decided to add a blog site template. I turned on publishing and found this issue. I used the IE Developer tool and found ms-blogRightZone was the problem. I overrode in my CSS file to have a white background but again it was not perfect. A longer term solution would be that I am going to have to make the blog text area thinner so the ms-blogRightZone does not float off too far to the right.

Final Code

Here is the final master page code that I created.

<!-- =====  Start Scrolling Body Area ============================================================ -->

<!-- these two div id's are used to setup the main scrolling page area, they should stay if you are sticking the ribbon to the top -->
<div ID="s4-workspace" class="s4-nosetwidth">  <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% -->
    <div ID="s4-bodyContainer">

        <!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed -->
        <div id="MSO_ContentDiv" runat="server">
    
            <!-- control width -->
            <div class="masterPageWidth">
        
                <!-- header -->
                <div id="header" class="s4-notdlg">
                    <div id="menu">
                        <div id="menu_list">
                            <!-- top navigation area -->
                            <div class="s4-notdlg">
                                <!-- top navigation publishing data source -->
                                <PublishingNavigation:PortalSiteMapDataSource
                                    ID="topSiteMap"
                                    runat="server"
                                    EnableViewState="false"
                                    SiteMapProvider="GlobalNavigation"
                                    StartFromCurrentNode="true"
                                    StartingNodeOffset="0"
                                    ShowStartingNode="false"
                                    TrimNonCurrentTypes="Heading"/>
                    
                                <!-- top navigation menu (set to use the new Simple Rendering) -->
                                <SharePoint:AspMenu
                                  ID="TopNavigationMenuV4"
                                  EncodeTitle="false"
                                  Runat="server"
                                  EnableViewState="false"
                                  DataSourceID="topSiteMap"
                                  AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                  UseSimpleRendering="true"
                                  UseSeparateCss="false"
                                  Orientation="Horizontal"
                                  StaticDisplayLevels="1"
                                  MaximumDynamicDisplayLevels="1"
                                  SkipLinkText=""
                                  CssClass="s4-tn">
                                </SharePoint:AspMenu>
                            </div>
                        </div>
                    </div>
                </div>
        
                <div id="logo" class="s4-notdlg">
                    <div id="logo_text">
                        <a href="/SitePages/Home.aspx">Branding Blog</a>
                        <br/><br/>
                        Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Pellentesque lobortis nibh
                        eu mauris. Morbi arcu tortor, auctor et,
                        facilisis nec, egestas sit amet, enim.
                    </div>
                </div>
    
                <!-- page editing status bar -->
                <div class="s4-notdlg">
                    <div id="s4-statusbarcontainer" class="s4-notdlg">
                        <div id="pageStatusBar" class="s4-status-s1"></div>
                    </div>
                </div>

                <!-- styles needed to have left nav to the left of the main area -->
                <div id="s4-leftpanel" class="s4-notdlg">
                    <!-- The quick launch bar / left navigation -->
                    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
                        <style type="text/css">
                            /* hide the left nav and titles for pages that don't override the left nav bar */        
                            #s4-leftpanel {
                                display: none;
                            }
                            .s4-ca {
                                margin-left:0px;
                            }
                        </style>
                    </asp:ContentPlaceHolder>
                
                    <!-- The small menu attached Quick Launch bar. Used only on very specific pages -->
                    <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
                </div>
                <!--end header -->
        
                <!-- main -->
                <div id="text" >
                    <!-- s4-ca is the main body div -->
                    <div class="s4-ca">
                
                        <table width="100%"  class="s4-notdlg">
                            <tr>
                                <td width="90%">
                                    <div id="breadcrumb">
                                        <asp:SiteMapPath runat="server"/>
                                    </div>
                                </td>
                                <td align="right">
                                    <!-- search box loads from delegate, style with CSS -->
                                    <div class="s4-notdlg">
                                        <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
                                            <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
                                        </asp:ContentPlaceHolder>
                                    </div>
                                </td>
                                <td nowrap>
                                    <div class="s4-notdlg">
                                        <!-- links for I like it and Tags and Notes -->
                                        <!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons -->
                                        <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <div class="s4-notdlg">
                            <!-- page title -->
                            <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />        
                        </div>
                    
                        <!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) -->
                        <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
                    
                        <div>
                            <!-- page content loads from the pages and pages layout -->
                            <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
                        </div>
                    </div>
                </div>
                <!-- end main -->
            
                <!-- footer -->
                <div id="footer" class="s4-notdlg">
                    <div id="left_footer">&copy; Copyright 2008 <b>Russo</b></div>
                    <div id="right_footer">
                        <!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
                        Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a>
                    </div>
                </div>
                <!-- end footer -->
      
                <!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page -->
                <div id="DeveloperDashboard" class="ms-developerdashboard">
                    <SharePoint:DeveloperDashboard runat="server"/>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- =====  End scrolling body area with these two previous div's ================================================ -->

Here is the final CSS that I modified through the process:

body { font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:11px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #0A8FDE; }
a { color:#10639a; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; }

#header { background:url(images/header_bckg.jpg) no-repeat top right #0EA5FE;}
#logo { padding:50px 60px 0 40px; height:130px; background:url(images/head_bckg.jpg) no-repeat #0EA5FE; }
#logo a{ font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo_text { float:right; width:200px; font-size:10px; color:#fff; line-height:12px; padding-top:5px;  }
#menu { background: url(images/menu_bckg.gif) repeat-x #fff; height:40px; padding-top:10px;}
#menu_list {width:600px; margin:0 auto;}
#menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;}
#menu a:hover{ color:#078DE2;}
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;}

#text { margin: 0 0 0 0; background:url(images/content.gif); padding:10px; }
#sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
#sidebar a{ font-weight:bold; }
#sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}

#footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}

/* Control Page Width */
.masterPageWidth { width: 960px; margin: auto; background-color:white; }
#breadcrumb { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; text-transform:uppercase; font-size:18px; color:#10639a; }
/* fix scrolling on list pages */
#s4-bodyContainer { position: relative; }
/* hide body scrolling (SharePoint will handle) */
body { height:100%; overflow:hidden; width:100%; }
/* popout breadcrumb menu needs background color for firefox */
.s4-breadcrumb-menu { background:#F2F2F2; }
/* if you want to change the left nav width, change this and the margin-left in .s4-ca */
body #s4-leftpanel { /* width:155px; */ }    
/* body area normally has a white background */
.s4-ca { background:transparent none repeat scroll 0 0; /* margin-left:155px; */ }
/*Fix some issues with the dialog boxes*/
.ms-dialog .masterPageWidth { width:auto !important; }
.ms-dialog body { background-color: white; background-image: none; }
/* make the background white*/
#s4-leftpanel { background-color:white; }
/* right zone override for the blog*/
.ms-blogRightZone { background-color:white; }

Conclusions

You can probably click around in a bunch more places and find more issues with my template. All of them should be easy to fix with some CSS changes. This is why I said I am not building a production ready branding implementation but this will show you how to start one.

Interesting Note

This is the second time I have done this template; and the third time I have done some real branding into SharePoint. One interesting thing that I did not encounter this time around was the double vertical scrollbar appearing. I cannot replicate the scenario right now but it is worth noting. Below is a somewhat related thing I ran into earlier. You may recall I lost the vertical scroll bar completely (screenshot below). Notice how the scroll bar is directly tied to the ribbon. In this case I had some CSS in the HTML template that was pushing the ribbon off the screen which subsequently pushed the scrollbar off to the right making it inaccessible.

One interesting thing to take note of is the screenshot below. This is a screen shot after I fixed my custom CSS to show the ribbon correctly. You may not have ever noticed but in SharePoint 2010 the scrollbar does not go all the way up; it stops at the ribbon. SharePoint 2010 takes over the way the scrollbar is displayed to ensure that top ribbon is always displayable to the user. When implementing your custom templates and CSS you will have to make modifications to accommodate this.

Next

We are going to explore making anonymous pages work with the master page.

Branding a Master Page

• Part 1: Introduction to SharePoint 2010 Branding and WCM
• Part 2: Branding a Master Page.html
• Part 3: Refining the Branding of a Master Page
• Part 4: Adding Anonymous Support to Master Page
• Part 5: Branding SharePoint 2010 Search
• Part 6: Creating a Page Layout
• Part 7: Customizing Content Query Web Parts
• Part 8: Deploy Branding Solution

Master Pages

1 – Identify the Template

Like I mentioned, I downloaded a HTML template for free from the web with the plan to bring the template completely into SharePoint. Here the template I picked – it has a cool ocean theme. One thing I knew right off the bat was that I would remove the stuff on the far right – not needed for my purposes.

There are some things you are should be aware of when picking a template. One thing I ran into is if you plan to create a SharePoint site where users will be doing lots of work with document libraries the template I selected will not work well. The reason is that you need to have a HTML template that will extend infinitely to the right.

2 – Create the Site

When I got started I created a new web application and site collection. I selected a Team Site template as my site collection. I could have picked an Enterprise Wiki (which I have done and this approach works just fine with). Really at the end the day, we just need to turn on some Features to make sure SharePoint has what we need. Since I picked a team site I decided to activate some Features that will help with publishing. I activated:

• Site Collection Features >> SharePoint Server Publishing Infrastructure and Publishing Approval Workflow
• Site Features >> SharePoint Server Publishing

Net result is I have a site that looks like this:

3 – Create a Starter Master Page

What is a Master Page? The simplest definition is that the Master Page is the chrome of SharePoint. All it is all the elements that surround the page. For instance the top banner, left hand navigation and the footer would be part of the Master Page. If it is on the master page, it will be rendered on every page. So it is a good place to apply logos, theme colors, core navigation, search boxes, etc. If you want a full definition the book I referenced will provide you all the details.

Next download the start master page from this codeplex project – http://startermasterpages.codeplex.com/. This is the best place to start from.

• Open up SharePoint Designer on a site that you want to brand.
• Go to Masters Pages and create a blank Master Page.
• Then right click on it and select Edit in Advanced mode.
• The copy and paste all the in stuff in the _starter_publishing.master in the new master page.
• Then I checked in the master page a major version and then published it.
• Then go to Site Settings >> Look and Feel >> Master page. Set decided to set both the Site Master Page and System Master Page to the new master page I created.

The following is the result. As you can see pretty much all the SharePoint branding has been pulled out.

4 – Merge in HTML Template

Now we need to take the HTML template above and merge it into the Master Page. There several steps we need to take care of.

• Open up SharePoint designer >> select the Master Page >> right click and select Edit in Advanced mode.
• Search for the word “SiteName” and replace it with appropriate text. There should only be four places. Make sure you take note of what you do here because this will dictate where you load various files. In my case, I am calling it “BrandingBlog”.
• Next we need to start taking the core HTML out of the template and move it into master page. I will be honest, this can be a complex process for me to type up (and I am doing this on my spare time too). I highly recommend you read the SharePoint 2010 Branding book. Basically what we need to do is take the HTML template and merge it with the content place holders as defined in the starter master page. In the starter master page you will see a tag called <div id="MSO_ContentDiv" runat="server">. We will be doing all of our work within this.
• IMPORTANT note there is an attribute called s4-notdlg that needs to be utilized. This attribute must be added to the HTML elements you are adding to the master page so they do not show up on pop-up windows.

Below is what the starter master page looks like before I made any modifications. There is really not much too it. PLUS there are great comments to explain exactly what each content place holder is.

<div ID="s4-workspace" class="s4-nosetwidth">  <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% -->
  <div ID="s4-bodyContainer">

  <!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed -->
  <div id="MSO_ContentDiv" runat="server">

    <!-- link back to homepage, SiteLogoImage gets replaced by the Site Icon, you can hard code this so that its not overridden by the Site Icon or even remove -->
    <div class="s4-notdlg"><!-- NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows  -->
        <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
            <SharePoint:SiteLogoImage  LogoImageUrl="/Style Library/BrandingBlog/logo.png" runat="server"/>
        </SharePoint:SPLinkButton>  
    </div>
      
    <!-- search box loads from delegate, style with CSS -->
    <div class="s4-notdlg">
        <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
            <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
        </asp:ContentPlaceHolder>
    </div>

    <!-- top navigation area -->
    <div class="s4-notdlg">
        <!-- top navigation publishing data source -->
        <PublishingNavigation:PortalSiteMapDataSource
            ID="topSiteMap"
            runat="server"
            EnableViewState="false"
            SiteMapProvider="GlobalNavigation"
            StartFromCurrentNode="true"
            StartingNodeOffset="0"
            ShowStartingNode="false"
            TrimNonCurrentTypes="Heading"/>

        <!-- top navigation menu (set to use the new Simple Rendering) -->
        <SharePoint:AspMenu
          ID="TopNavigationMenuV4"
          EncodeTitle="false"
          Runat="server"
          EnableViewState="false"
          DataSourceID="topSiteMap"
          AccessKey="<%$Resources:wss,navigation_accesskey%>"
          UseSimpleRendering="true"
          UseSeparateCss="false"
          Orientation="Horizontal"
          StaticDisplayLevels="1"
          MaximumDynamicDisplayLevels="1"
          SkipLinkText=""
          CssClass="s4-tn">
        </SharePoint:AspMenu>  
    </div>

    <!-- page editing status bar -->
    <div class="s4-notdlg">
        <div id="s4-statusbarcontainer" class="s4-notdlg">
            <div id="pageStatusBar" class="s4-status-s1"></div>
        </div>
    </div>

    <!-- styles needed to have left nav to the left of the main area -->
    <div id="s4-leftpanel" class="s4-notdlg">
        <!-- The quick launch bar / left navigation -->
        <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
            <PublishingNavigation:PortalSiteMapDataSource
                ID="SiteMapDS"
                runat="server"
                EnableViewState="false"
                SiteMapProvider="CurrentNavigation"
                StartFromCurrentNode="true"
                StartingNodeOffset="0"
                ShowStartingNode="false"
                TrimNonCurrentTypes="Heading"/>          
            <SharePoint:AspMenu
                ID="CurrentNav"
                EncodeTitle="false"
                runat="server"
                EnableViewState="false"
                DataSourceID="SiteMapDS"
                UseSeparateCSS="false"
                UseSimpleRendering="true"
                Orientation="Vertical"
                StaticDisplayLevels="2"
                MaximumDynamicDisplayLevels="0"
                CssClass="s4-ql"
                SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/>          
        </asp:ContentPlaceHolder>
      
        <!-- The small menu attached Quick Launch bar. Used only on very specific pages -->
        <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
    </div>
  
    <!-- s4-ca is the main body div -->
    <div class="s4-ca">

        <div class="s4-notdlg">
            <!-- links for I like it and Tags and Notes -->
            <!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons -->
            <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
        </div>
      
        <div class="s4-notdlg">
            <!-- page title -->
            <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />          
        </div>
      
        <!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) -->
        <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
      
        <div>
            <!-- page content loads from the pages and pages layout -->
            <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
        </div>
    </div>

    <!-- footer - this is purely optional -->
    <div class="s4-notdlg" style="clear: both;">
        &copy; Copyright 2010 SiteName
    </div>

    <!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page -->
    <div id="DeveloperDashboard" class="ms-developerdashboard">
        <SharePoint:DeveloperDashboard runat="server"/>
    </div>

  </div>
  </div>
</div>

Here is the HTML from the template. What need need to do next is start merging this HTML into the master page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- header -->
    <div id="header">
    <div id="menu">
       <div id="menu_list">
        <a href="#">Home</a>
        <img src="images/splitter.gif" class="splitter" alt="" />
        <a href="#">About Us</a>
        <img src="images/splitter.gif" class="splitter" alt="" />
        <a href="#">Services</a>
        <img src="images/splitter.gif" class="splitter" alt="" />
        <a href="#">Pricing</a>
        <img src="images/splitter.gif" class="splitter" alt="" />
        <a href="#">Contacts</a>
        </div>
    </div>
</div>
      <div id="logo">
      <div id="logo_text">
      <a href="#">Website name</a>
      <br/><br/>
      Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Pellentesque lobortis nibh
      eu mauris. Morbi arcu tortor, auctor et,
      facilisis nec, egestas sit amet, enim.
    </div>
    </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
          <div id="sidebar">
              <h1>Lorem Ipsum</h1>
            <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
            <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum.</span>            </div>
            <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
               <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum.</span>            </div>
         
          </div>
          <div id="text" >
                <h1>Welcome</h1>
                <p><strong>Russo</strong> is a free template released by <a href="http://www.realitysoftware.ca">Reality Software</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep the link to the author intact.</p>
                <ul>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Consectetuer adipiscing elit.</li>
                  <li>Maecenas ac lacus. Etiam quis ante.</li>
                  <li>Nullam accumsan metus sit amet est.</li>
                  <li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li>
                </ul>
                <h1>Lorem ipsum dolor</h1>
                <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.</p>
                <p><strong>Pellentesque eu massa.</strong> Praesent sed enim sed ante tempus mollis. Vestibulum est. Aenean pellentesque fringilla orci. Vestibulum tellus velit, tristique at, malesuada in, tempus sed, urna. Fusce pharetra. In elit libero, eleifend blandit, egestas nec, lacinia sit amet, mauris. Sed nec tortor nec metus interdum tempor. Aliquam convallis faucibus turpis. Sed lacinia nibh. Etiam blandit odio in metus. Sed quis nibh eu velit ullamcorper vulputate. Nulla facilisi. Aenean eget massa dignissim orci aliquet laoreet. Nulla nisi nisl, blandit vel, pharetra ac, interdum quis, tellus. Nam tincidunt porta mauris. In aliquet turpis sit amet erat. Aenean volutpat felis eu odio.</p>
                <p>&nbsp;</p>
<p class="additional">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, nulla neque nisl, luctus sit amet, varius ac, tincidunt utproin dignissim sapien et urna. Morbi orci nisi, feugiat rutrum, tempus a, Curabitur eu nisl. Vivamus venenatis venenatis pede. Curabitur nibh mauris, pharetra quis, mattis sed, malesuada vitae, sem. Mauris pede iaculis eget, dapibus ac, neque. Sed libero lectus, bibendum ac, volutpat at, convallis nec, mi.</p>
          </div>
    </div>
    <!-- end main -->
    <!-- footer -->
    <div id="footer">
    <div id="left_footer">&copy; Copyright 2008 <b>Russo</b></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a>

    </div>
</div>
    <!-- end footer -->
</body>
</html>

The first trick I learned after doing this a few times is do not bite off more than you can chew. This is an iterative process. First I flat out copy and paste all the HTML from within the <Body> template directly blow <div id="MSO_ContentDiv" runat="server">.

If you are interested you can go back to SharePoint and refresh the page and you will see all you HTML has now been added to the master page. When you scroll down you will see all the SharePoint elements and controls. Now we have a bunch of work.

The following are the steps I went through to get the page to set up:

• Took the Top Navigation Are tags from the starter page and replaced it into the <div id="menu_list"> list of the template. I also added class="s4-notdlg" to <div id="header">



• Next I made some modifications to the logo section and again added class="s4-notdlg" to <div id="Logo">.



• Next I moved the “page editing status bar” from the starter master page to be right after the Logo section. This just shows messages to the user about the state of the web page.



• Next I move the left hand navigation section from the from the starter master page to be next. One thing is my website will not need the left hand navigation however there are times when it must be displayed to the user. So there is an approach where you can take the left hand navigation section from the starter page and then use some CSS to show it when required. Review the code below for details.



• Next in the HTML template there is a second called sidebar. Since I am not using it, I removed it completely.



• Next I move the <div class="s4-ca"> section from the starter master page into the <div id="text"> tag of HTML template. I remove all the test content that was part of the template.



• Next I remove the footer section in the starter master page because my HTML template has a nice footer section which I can use.



• I subsequently moved the Developer Dashboard section from the starter master page to be right under the footer.



• There are sections from the starter page that I need to deal with. First there is a tag with SPLinkButton which has <SharePoint:SiteLogoImage />. This would be used in situations where I have a site logo and when the user clicks on the site logo they are taken back to the home page. I am going to remove this because I do not need it right now. The second is the PlaceHolderSearchArea. I will just quickly move this up within the <div class="s4-ca"> tag.

The end result is I have something that looks like this.

Well you may say that is nice, but where is all the CSS and images from the template? Well I have not put them up yet. Before I continue I am just going to modify this page so it only has one display column; so now my page looks like below. This is an option step.

Next we need to do some work to get the css and images up for the template.

• I go to View All Site Content >> Style Library >> and created a new folder called BrandingBlog.



• Next I put the custom css file into BrandingBlog folder.



• Finally I created a folder called “images” underneath BrandingBlog and uploaded all image files that are part of the template.

This is the page that was rendered. As you can see I not out of the woods yet and have a bunch of css work we need to do. In the next section, I am going to walk through the CSS work I had to do, to get the site to look like the screenshot I provided in the introduction. Some of the tricks I will teach you will hopefully save you some time for other HTML templates you may pull into SharePoint 2010.

Also, here is the master page if you were following along with all the previous steps. As you can see the HTML template has been merged with the started template. We are not done yet. We still need to get this working correctly and changes to the master page will have to be made.

<!-- =====  Start Scrolling Body Area ============================================================ -->

<!-- these two div id's are used to setup the main scrolling page area, they should stay if you are sticking the ribbon to the top -->
<div ID="s4-workspace" class="s4-nosetwidth">  <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% -->
  <div ID="s4-bodyContainer">

  <!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed -->
  <div id="MSO_ContentDiv" runat="server">

    <!-- header -->
    <div id="header" class="s4-notdlg">
        <div id="menu">
            <div id="menu_list">
                <!-- top navigation area -->
                <div class="s4-notdlg">
                    <!-- top navigation publishing data source -->
                    <PublishingNavigation:PortalSiteMapDataSource
                        ID="topSiteMap"
                        runat="server"
                        EnableViewState="false"
                        SiteMapProvider="GlobalNavigation"
                        StartFromCurrentNode="true"
                        StartingNodeOffset="0"
                        ShowStartingNode="false"
                        TrimNonCurrentTypes="Heading"/>
          
                    <!-- top navigation menu (set to use the new Simple Rendering) -->
                    <SharePoint:AspMenu
                      ID="TopNavigationMenuV4"
                      EncodeTitle="false"
                      Runat="server"
                      EnableViewState="false"
                      DataSourceID="topSiteMap"
                      AccessKey="<%$Resources:wss,navigation_accesskey%>"
                      UseSimpleRendering="true"
                      UseSeparateCss="false"
                      Orientation="Horizontal"
                      StaticDisplayLevels="1"
                      MaximumDynamicDisplayLevels="1"
                      SkipLinkText=""
                      CssClass="s4-tn">
                    </SharePoint:AspMenu>  
                </div>
            </div>
        </div>
    </div>
    <div id="logo" class="s4-notdlg">
        <div id="logo_text">
            <a href="/SitePages/Home.aspx">Branding Blog</a>
            <br/><br/>
            Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit. Pellentesque lobortis nibh
            eu mauris. Morbi arcu tortor, auctor et,
            facilisis nec, egestas sit amet, enim.
        </div>
    </div>
  
    <!-- page editing status bar -->
    <div class="s4-notdlg">
        <div id="s4-statusbarcontainer" class="s4-notdlg">
            <div id="pageStatusBar" class="s4-status-s1"></div>
        </div>
    </div>

    <!-- styles needed to have left nav to the left of the main area -->
    <div id="s4-leftpanel" class="s4-notdlg">
        <!-- The quick launch bar / left navigation -->
        <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
            <style type="text/css">  
                /* hide the left nav and titles for pages that don't override the left nav bar */          
                #s4-leftpanel {
                    display: none;
                }
                .s4-ca {
                    margin-left:0px;
                }
            </style>
        </asp:ContentPlaceHolder>
      
        <!-- The small menu attached Quick Launch bar. Used only on very specific pages -->
        <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
    </div>

  
    <!--end header -->
    <!-- main -->
    <div id="main">
        <div id="text" >
            <!-- s4-ca is the main body div -->
            <div class="s4-ca">

                <!-- search box loads from delegate, style with CSS -->
                <div class="s4-notdlg">
                <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
                    <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
                </asp:ContentPlaceHolder>
                </div>
      
                <div class="s4-notdlg">
                    <!-- links for I like it and Tags and Notes -->
                    <!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons -->
                    <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
                </div>
              
                <div class="s4-notdlg">
                    <!-- page title -->
                    <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />          
                </div>
              
                <!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) -->
                <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
              
                <div>
                    <!-- page content loads from the pages and pages layout -->
                    <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
                </div>
            </div>
        </div>
    </div>
    <!-- end main -->
    <!-- footer -->
    <div id="footer" class="s4-notdlg">
        <div id="left_footer">&copy; Copyright 2008 <b>Russo</b></div>
        <div id="right_footer">
            <!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
            Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a>
        </div>
    </div>
    <!-- end footer -->

    <!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page -->
    <div id="DeveloperDashboard" class="ms-developerdashboard">
        <SharePoint:DeveloperDashboard runat="server"/>
    </div>

  </div>
  </div>
</div>

<!-- =====  End scrolling body area with these two previous div's ============================================================ -->

Next

In the next blog we will refine the master page css.