| July 7, 2011
2 comments

SharePoint 2010 Branding Options: Master Pages vs. Themes: Part 2

How to attach a custom style sheet by pasting code into the master page with SharePoint Designer 2010…

This post assumes that you already have a custom style sheet, and that it is already in the Style Library – see Part 1. This post focuses on how to attach a custom, or alternate, cascading style sheet (CSS) to a master page by adding a line of code in SharePoint Designer 2010 (SPD 2010).

For those of you that just need the short answer, rather than the long answer below, this is the line of code to add in SPD 2010:

"<SharePoint:CssRegistration name="/Style Library/CoreOverride-Demo.css" After="corev4.css" runat="server" />"

Why would I ever want to attach CSS using SPD 2010 instead of the browser UI?

  • If you are customizing your master page anyway, i.e., layout changes, you may as well add the custom CSS in the code and save yourself the steps of adding it through the browser later, and you are also thereby ensuring that the custom style sheet and master page are always applied together.
  • If you have tried attaching the style sheet through the browser UI and you are seeing some evidence that your custom style sheet is being overridden by the main style sheet (corev4.css)… or you are just paranoid that this may happen to you 😉
  • If you have more than one custom style sheet and you need to specify which sheet comes ‘after’ the other

Here are the steps, the long answer, with screenshots to add the code to the master page via SPD 2010:

  1. Open the site (screenshot 1) in SharePoint Designer 2010 (screenshot 2)
  2. Expand the ‘Navigation’ panel in the left column, and click on Master Pages (screenshot 3)
  3. Click on v4.master to open the master page properties page (screenshot 4)
  4. Click ‘edit file’ to open file for editing, click ‘Yes’ when prompted to check-out file, and finally the master page is open (screenshot 5)
  5. Click ‘Code’ button on the bottom menu to show code view (screenshot 6)
  6. Paste the code between the <head></head> tags (screenshot 7)
  7. Save file (click ‘Yes’ when prompted about customizing the file) (screenshot eight)
  8. Right-click on master page file to Check-in the file (screenshot 9), Publish a Major Version (screenshot 10), then click ‘Yes’ when prompted to  approve the content (screenshot 11)
  9. Approve the content (screenshot 12)
  10. Refresh browser to confirm style changes (screenshot 13)
Note: If you now  decide that you need the original v4.master you can rename the customized version to something like custom.master. To fix this:
  1. Right-click on v4.master and select ‘Reset to site definition’ and the original v4.master will be restored, and SPD 2010 will automatically create a v4_copy(1).master page (screenshot 14).
  2. Rename v4_copy(1).master to something like custom.master
  3. Check-in custom.master, publish a major version, and approve the file
  4. Go to Site Actions > Site Settings > Master Pages and select the new master page, custom.master, for both Site Master Page and System Master Page, and select the checkbox for ‘Reset all subsites to inherit this alternative CSS URL’ (screenshot 15)
  5. Now if you have forgotten to activate the publishing feature for you new subsite with the Team Site template, it will not inherit the custom.master page yet, so go to Site Actions > Site Settings > Manage site features and activate the publishing feature (screenshot 16)
  6. As soon as the feature is activated you should see the new master page and its styles (screenshot 17)

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , , , ,

2 comments

  1. David Andrew Smith says:
    January 2, 2012 at 3:30 pm

    Sorry for the late reply Daniel, i was out of the country for a few weeks. How did it go?

  2. Daniel says:
    December 8, 2011 at 7:53 am

    David

    I really excellent post and timely as I working on branding a set of templates for a client.
    2)I have followed your instructions re the sticky footer.
    3) I have replaced your generic footer with a table, a (blue) header row providing a clear delimiting line line for the footer.
    3)I am finding the page has too many web parts the footer is effectively overlayed by the lower web part.

    I am guessing removal of scroll bars is part of the issue. Just wanted your thoughts before I start tweaking the .css

Leave a Reply