• Like
  • Save


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Opening slide please include
  • <SharePoint:CSSRegistration name="<%$SPrl:~SiteCollection/Style Library/~language/Core Stypes/Band.css%>" runat="server" After="corev4.css"/>


  • 1. Platinum Sponsor
    Gold Sponsors
  • 2. Please use the opening and closing slides of this template.
    Where practical please migrate over or use this template format for your presentation.
    Template Notes
  • 3. Things I’ve Learnt When Skinning And Customizing a SharePoint 2010 Site
    Justin Lee
  • 4. WARNING
    Skinning and Customizing SharePoint may cause severe headaches, frustration and loss of sleep.
  • 5. Can I do <insert web design feature> on SharePoint?
    Everything you can design for the web, you can design for SharePoint
  • 6.
  • 7. Do you have server access?
    If you do not have server access, there are some limitations to reusability and deployment
  • 8. Migrate to v4 masterpages,
    Do not use v3 anymore
  • 9. It is important to plan your SharePoint Site
  • 10. http://go.microsoft.com/fwlink/?LinkID=187505&clcid=0x409
  • 11. Think about your site map too,
    Identify the subsites and pages
  • 12. http://www.mockflow.com/
  • 13. Leave space for the new Ribbon control in your design
  • 14. Do not attempt to customize the ribbon, however if you have to, read http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx
  • 15. http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/
  • 16. Override CSS,
    do not modify / remove directly
  • 17. The New Improved CSSRegistration
    Conditional Expression
    <SharePoint:CSSRegistration Name="a.css" runat="server" ConditionalExpression="lt IE 8"/>
    <![if lt IE 8]>
    <link rel="stylesheet" type="text/csshref="a.css" />
  • 18. The New Improved CSSRegistration
    <SharePoint:CSSRegistration Name="a.css" After="b.css" runat="server“ />
    <SharePoint:CSSRegistration Name=“b.css“ runat="server“ />
    Translates as…
    <link rel="stylesheet" type="text/csshref="b.css" />
    <link rel="stylesheet" type="text/csshref="a.css" />
  • 19. Use CSS files as much as possible, do not embed CSS or inline CSS
  • 20. Start using min-height, min-width, max-height, max-width in your CSS
  • 21. v3 themes do not work anymore,
    Use THMX theme format
  • 22. Divs are IN
    Tables are OUT
  • 23. Use Relative URLs with
    <% $SPUrl:~site/… %> and
    <% $SPUrl:~sitecollection/… %>
  • 24. 2 ways to skin:
    SharePoint Designer
    Visual Studio
  • 25. Steps to skinning your SharePoint
  • 26. Step 1
    Design your skin in your favorite graphic designer
  • 27. http://erikswenson.blogspot.com/2010/02/sharepoint-2010-layered-photoshop-file.html
  • 28. Step 2
    Convert your design to HTML
  • 29. Step 3
    Identify the common regions for the masterpages
  • 30. MasterPages Contains…
    Branding elements, such as corporate logos and colorschemes
    Shared navigation elements
    Shared features, such as search commands and Help commands
    Links to cascading style sheets. (Cascading style sheets control the page appearance, colors, and fonts.)
  • 31. Step 4
    Identify the various editable regions of your design
  • 32. Step 5
    Identify the main menu / sub menu with
    Subsites, Folders to pages, and pages
  • 33. Step 6
    Create a new masterpage
  • 34. http://code.msdn.microsoft.com/odcSP14StarterMaster
  • 35. Step 7
    Create new page layouts
  • 36. Basic Skinning of SharePoint
  • 37. Resources
  • 38. Contact Details
    Justin Lee
    Software Development Consultant
    Q & A