Over the past few weeks, I have had many requests to “de-code” the starter master page, and also stop SharePoint Designer putting the fear of Geek into every one. So I have put together this step by step guide and added the links to other Branding Blog posts by other people all together in one spot. I know the content of this post overlaps my content area – it has to do with my code links – will fix asap.

So in Part One – we are going to get our site ready, by creating the site, adding the folders and files we need, setting up the custom style sheet and setting that page logo.

Index:

1. Links
2. Creating Our Team Site
3. Getting Ready – Getting All Our Ducks In A Folder
4. Setting up the Master Page: CSS and Logo

Links:

Branding for Beginners : Written by Matthew Hughes
For me this is the be all and end all of Branding posts (series). Matthew has covered everything, and if you work your way through this series, by the end of it – you will have a good feel for SharePoint Designer 2010 and branding SharePoint in general.

Starter Master Pages – by Randy Drisgill
If you are branding Sp2010, you always start with on of these pages. This, in my opinion, one of the greatest contributions to the SharePoint 2010 community. In Matthews series, and this post – you will be asked to go get this pack, so download it now.

Create Our Team Site

1. Go to Application Management

Open up SharePoint 2010 Central Administration
Click “Application Management”
Click “Create Site Collections” under Site Collections

2. Create the Site

Choose your local Web Application
Add in a Title – Lets call it MPTutorial
Under URL – make sure the first drop down is set to the “/sites/” option
Then add “MPTutorial” in the text box next to the above drop down.
Choose the Collaboration Tab, and then select Team Site.

3. Set the administrators

Add your admin users – usually your Site Administrator
Quota should be on the default option: No Quota
Click OK

And we are ready to go. Click the site link in the “Top Level Site Successfully Created” window to go to your new site (it opens in a new tab), and then click OK. My sites URL is http://louise-pc/sites/MPTutorial, yours should be similar.

And your new site should be the stock standard vanilla Team Site (as below)

Getting All Our Ducks In A Folder

Please make sure you have SharePoint Designer 2010 Installed, and you have downloaded and extracted Randy Drisgill’s Starter Page Pack. We are going to add in the different files and folders that we will be working with now via Designer.

So lets begin:

I want you to click Site Actions > Edit in SharePoint Designer

SharePoint Designer will open, and open up our site. You will settle on the MPTutorial Properties page. From here, I want us to get our starter page in.

So click on Master Pages (on the left navigation), and this will open the file list of the Master Page folder.
Click Import Files
Click Add File
Browse to your Starter Master Pages folder, and select the _starter_foundation.master file and click Open.
Click OK on the Import pop up window

Find the newly added file, and right click on it
Rename it to MPTutorial.master

Once renamed – Right click again on the file and click “Set to Default Master Page”

Now onto our Style Library Folder.On the Left Navigation, click on All Files.
This will open up the full file and folder structure of our site.
Double click on the Style Library folder.
The Style Library will open, and be quite empty.
So create a folder called “MPTutorial” -

You can use the New Folder button on the ribbon, or right click in the window go to New > Folder

Open up the new folder and create 2 more folders:

- Images

- Styles

Then open the Styles folder
Right click in the window
Go New > CSS
And name the empty style sheet ‘MPT.css’

Download this little image pack, then extract it onto your machine
Import the images into Your Images folder (Style Library > MPTutorial > Images)

We will be using these through out the tutorial

Setting up the Master Page: CSS and Logo

In Designer, open your MPTutorial.master

Go to Master Pages (Left Navigation)
Click on MPTutorial.master
It will open up the master pages property screen
Click “Edit File”
the master page will open up in Editor mode > Code View

Find this code:

SharePoint:CssRegistration name=”/Style Library/sitename/style.css” After=”corev4.css” runat=”server”

Then replace it with this code:

SharePoint:CssRegistration name=”" After=”corev4.css” runat=”server”

Lets breakdown the above link

$SPUrl:~SiteCollection/Style Library/Custom/MPT.css

$SPUrl - Finds the full path of the SharePoint Service so in my case it is Http://Louise-pc/Sites

SiteCollection – you replace with your site collection name (eg. MPTutorial)
Style Library – referencing the folder
Custom – your custom folder (if you have one) – in this case it is the folder we created – MPTutorial
Styles.css – the name of your style sheet – in this case – MPT.css