Branding the Employee Training Fab 40 on SharePoint 2010–Part 3

So we now have the HTML and CSS set for how we want the SharePoint site to look, the next step is to get it as close as is possible to the template in SharePoint, but first of all let’s make sure we have the necessary features in SharePoint enabled to support the Publishing feature.

Browse to the Site collection hosting the site, and ensure that you have the following feature enabled:

SharePoint Server Publishing Infrastructure

When you open your site in SharePoint Designer, click on the Link for Master Pages, and you should now see the following:

9_SPDMasterPage

Starter Master Page

We are going to use a Starter Master Page to begin with.  The best one out there has been produced by Randy Drisgoll and can be downloaded from here:

http://startermasterpages.codeplex.com/releases/view/41533

Download the Starter 2010 Master Pages by RandyDrisgill.zip and save locally to your desktop then extract the files.

Back in SharePoint Designer select the option to create a Blank Master page and call it gym.master.  Right-click and select the option to Edit in Advanced Mode.

Open the recently downloaded _starter_publishing.master file in Notepad, and copy all of the contents to your clipboard.

Go back to SharePoint Designer and CTRL A then CTRL V the contents of your clipboard to overwrite the default contents in the Blank Master Page.

This gives us an excellent starting point to start getting our content across from the HTML pages over to SharePoint.

The next thing we need to do is copy all of our assets over to SharePoint, but before I do that a little bit of clean up is in order so that I only bring into SharePoint what I actually need.

I am not using any of the blog or news images so I have removed them from the images folder.  Nor am I making use of the Gallery folder so these can be deleted from the HTML site template content.  The original logo, menu bar and twitter logos can also go.

Once you have cleaned up then go back to SharePoint designer, then click on the All Files pushpin to display all the contents of the site in a folder view.  Expand Style Library, then Right-Click on Style Library and create a new folder.  I’ve called mine Gym.  Once you have done that copy the css, images and js folders over into this newly created Gym folder in SharePoint.  This is what mine looks like now:

10_SPDFiles

All of those green ticks means that these files are currently checked out, so before we can make them visible to the viewing public we need to check all of these files in.  Select all the files (not folders) and choose the option to ‘Check in’ and publish a major version.  As there is no approval needed for files in the Style library once they are checked in they are then published.  You will need to go into all the folders and check in all the individual files.

Now that our supporting assets are in place we can go ahead and start getting our content across.  Here is what we are aiming to put in the master page

12_MastPageLayout

So as far as the Master page goes all we really need is the Header part with the logo, the footer and the background.  The rest of the layout will be contained in the Page Layouts.

Configuring Source control for the Master Page and Page Layout galleries

One thing I like to do which makes this process a little easier is to turn off publishing approval for the Master Page and Page Layout galleries.  It can become a little tiring whilst building the initial pages to check out/ check in and then approve the changes every single time.

To turn off source control browse to the site in IE, then go to Site Collection settings.  Under the gallery section there is a link to the Master Page gallery.  Select this then go to the library settings, then versioning settings.

Turn off Content approval and the requirement for documents to be checked out before they can be edited as per the following screenshot:

13_mastGallerySettings

We will keep the versioning turned on… just in case we need to go back a few steps.

Adding the HTML and CSS to the Master Page

So now it’s time to work with the Master Page.  It’s been a long time coming, but the prior preparation is definitely worth it.

If you are using the Starter Master Page suggested earlier there are 4 places where sitename is used that you need to replace with the name of your site.

Beware of doing a find and replace all as you may end up changing one of the required SharePoint placeholders here.  Use CTRL F to locate and change them manually.

Following this we need to tell SharePoint where to find our CSS files.

On line 74 of the Master page change the link to the Custom css files to the following:

Note that the css location I have used starts with “/Sites/Gym/Style Library/gym…” This is because the gym site is not at the root site collection, so my Style library for this site collection lives in a different location.  If yours is at the root then you can modify accordingly and take out the “/Sites/Gym’” part.

Remove the following Styles from the Master page (line 44 to 72).  As we are using our own custom style sheet we will put the styles in there later.

Next we need to copy the HTML from the template into our Master Page.  Copy everything between the <body> tags from the index.html file (do not include the body tags) and paste it right after the  <div id=”MSO_ContentDiv” runat=”server”> tag on line 378 in the Master Page.

Now we need to start replacing the various HTML elements with SharePoint specific code so that we get the functionality of SharePoint in with our look and feel of the template.

Just underneath the footer cut the following code for the logo image:

Place it just after the Header above the <div id=”site title”> tag.  We need to keep the site title tag, so ensure that you end up with the following in the  <div id=”templatemo_header”> tags:

I am not using Search in this example, but anywhere there is a SharePoint Content Placeholder it has to remain on the Master Page otherwise SharePoint will throw one of those lovely ‘unexpected errors’ that we all enjoy.

CTRL X the following from the Master Page:

Then paste it in the ‘Hidden Placeholders’ area with the other hidden placeholders.  We only need to put the following line in there so remove everything else that you cut from above (ensure you include the “/” to close the tag as below otherwise you will get an error when you load the page):

Next up is Navigation.  Cut the entire navigation piece starting with <!—top navigation area—>  down to the closing </SharePoint:AspMenu> and closing </div> as follows:

Paste this within the <div id=”templatemo menu”> area.  Overwrite the <ul> tags and everything inbetween so you end up with this:

Next cut the area starting with <!—page editing status bar—> next as follows:

Then paste just below the navigation area (just below the <!—end of tempatemo_menu—> comment.  It should look something like this:

Next cut and paste the Quick Launch bar code just below the Status bar code:

I have no intention to use the Quick launch area in any part of this site,  so I am going to hide it with some CSS style.  To do this we can remove all of the code within the PlaceHolderLeftNavBar Content Place holder and replace it with CSS to hide it as follows:

Ok almost there.  Now we need to take the main body <div> from the Starter Master page.  This is the <div class=”s4-ca”> section and place it just after the opening <div id=”templatemo_main”> tag.  Then remove the <div id=”templatemo_main”> tag, we will not be using this in the Master page, but we will use it in the Page Layouts.  You will end up with this just after the closing </asp:ContentPlaceHolder> for the PlaceHolderLeftNavBar:

Next we need to remove all the content that we brought across with our template.  Remove all the contents in the <div id=”slider wrapper”> tag.  We will put this in our Page layout later:

 

Then remove everything starting from <div class-“col_w900> through to it’s closing div tag.  Basically all of this: