The SharePoint Designer

Brand. Design. Amaze.

Jun 16

Tutorial – Working with Master Pages Part One

No Gravatar

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:
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
  • 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)

 

Tags: , ,

2 Comments

  1. Khyran HerklotsNo Gravatar

    February 11, 2013

    Reply

    Hello,

    Nice blog; I have to put a logo on a corporate website;
    Q1: is this the easiest way to do this?? Other blogs talk about editing CSS files and the masterpages with SPD
    Q2: has the logo a fixed size?? (can I move it?)
    Q3: why should this be edited:
    SharePoint:CssRegistration name=”/Style Library/sitename/style.css” After=”corev4.css” runat=”server” ??
    (by this code:SharePoint:CssRegistration name=”” After=”corev4.css” runat=”server”)

    Thx in advance

    Rgds,

    Khyran Herklots

    • Louise van der BijlNo Gravatar

      April 2, 2013

      Reply

      HI Khyran
      A1: There is no “easy” way to manipulate the master page. I use SPD for everything, css, master page, page layouts etc – and where needed I then port across to a wsp in vistual studio. If you just want something different you can always apply a theme – which just controls the colours and fonts.
      A2: the logo is not fixed in any way – the size (if you use site settings > look and feel) will be determined by the image you upload – and you can place the SPlogo tags anywhere you like on the master page
      A3: you edit this to point to your css where ever it may be located.

      hope this helps! grab me on twitter if you need more help

Leave a comment

The SharePoint Designer is using WP-Gravatar