SharePoint 2010 Branding – Part Three

Let’s get busy

Now we have everything we need and we have created our mockup the next step would be to create some kind of design comp for the actual site, well we have this in a fashion as the site has already been created (yes that means I have cheated) and if nothing else, at least I have informed you that this is the way things “should” be done in the real world.

Once you have the design comp you would then create the site using HTML and CSS and then port that design over to SharePoint using SharePoint Designer.

So let’s pretend that is the position we are now in and we are ready to take this

and turn it into this

I know, you’re probably bored of seeing those two images now but we are going to fire up SharePoint Designer soon, I promise.

Starter Master Page

In the first post I talked about the starter master page and this is the point where we need to upload this to SharePoint.

We could copy the masterpage into the masterpages section in SharePoint Designer (see video) although in my experience this seems to cause a few problems so the best and most effective way to get this into SharePoint is by going to Site Actions > Site Settings > Galleries

and clicking on “Master Pages and Page Layouts” once you are in this library you can upload the Starter Master Page like you would a document in a standard document library

Once the document has been uploaded you will be asked to select the correct Content Type from either Page Layout or Publishing Master Page, it’s the latter we are after

Once the Master Page is uploaded it would be a good idea at this point to publish and approve it so that it appears as “Approved”

Now the Master Page has been uploaded and is available to us we can then go into Site Actions > Site Settings > Look and Feel > Master Page and select the newly uploaded Master Page as our default

Excellent! Now if we go to the homepage it should look like the image below, this may not seem right but it is excactly as we would expect as the Starter Master Page doesn’t have any custom styling associated with it just yet.

Now the last thing we are going to do in this part of the series is fire up SharePoint Designer and connect it to our site ready for editing tomorrow in Part Four.

SharePoint Designer

SharePoint Designer is usually located in the Start Menu in All Programs inside the SharePoint folder, starting it up will present you with the following window and if you haven’t opened a SharePoint site before you will need to click open site and enter the domain name for the site including http:// as without it, SPD will complain.

Once the site is open you can click on the Master Pages object on the left hand Site Objects pane and this will show you all the current Master Pages available.

In the next part of the series we will create our custom CSS file, link it to our MasterPage and make a few minor changes that have major effects.

Stay tuned!

Matthew Hughes

About Matthew Hughes

Matthew Hughes has written 56 post in this blog.

I am a SharePoint Developer for UK based Intelligent Decisioning Ltd. Check us out id-live.com I setup SharePoint 365 as I saw that there was a need for introductory blog posts and knew there were some fantastic authors out there who might not have time to run their own blogs and keep them updated reguarly.

• View all posts by Matthew Hughes →
• Blog
• Twitter
• Facebook
• Google+