Tutorial – Working with Master Pages Part One

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

  1. Open up SharePoint 2010 Central Administration
  2. Click “Application Management”
  3. Click “Create Site Collections” under Site Collections

2. Create the Site

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

3. Set the administrators

  1. Add your admin users – usually your Site Administrator
  2. Quota should be on the default option: No Quota
  3. 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:

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

  • Then replace it with this code:

[box]SharePoint:CssRegistration name=”” After=”corev4.css” runat=”server”[/box]

  • 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
  • Now we are going to add in the Logo using Site Settings
    • Currently your site logo looks like this

  • In Designer, go to your MPTutorial images folder
  • Right click on MPLogo.png and click properties
  • Copy the url shown for Location

  • Now go to your site
  • Click Site Actions > Site Settings
  • Under Look and Feel
    • Click “Title, description and icon”
  • Under the Logo URL and Description Section
    • Paste your MPTLogo.png location url in the URL text box
    • Click OK

  • You  will already see the logo showing in the Site Settings page, but click the Logo to go to your home page for good measure

On Monday – in Part 2 – We will work with the Header bar (Site Logo, Search and the Top Navigation)

 

Leave a Reply

Scroll to top