Things I've learnt when skinning and customizing a SharePoint 2010 Site

7,781 views
7,497 views

Published on

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,781
On SlideShare
0
From Embeds
0
Number of Embeds
133
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

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"/>
  • Things I've learnt when skinning and customizing a SharePoint 2010 Site

    1. 1. Platinum Sponsor Gold Sponsors
    2. 2. THINGS I’VE LEARNT WHEN SKINNING AND CUSTOMIZING A SHAREPOINT 2010 SITE Justin Lee
    3. 3. Skinning and Customizing SharePoint may cause severe headaches, frustration and loss of sleep. WARNING
    4. 4. Everything you can design for the web, you can design for SharePoint Can I do <insert web design feature> on SharePoint?
    5. 5. If you do not have server access, there are some limitations to reusability and deployment Do you have server access?
    6. 6. Migrate to v4 masterpages, Do not use v3 anymore
    7. 7. It is important to plan your SharePoint Site
    8. 8. http://go.microsoft.com/fwlink/?LinkID=187505&clcid=0x409
    9. 9. Think about your site map too, Identify the subsites and pages
    10. 10. http://www.mockflow.com/
    11. 11. Leave space for the new Ribbon control in your design
    12. 12. 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
    13. 13. http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/
    14. 14. Override CSS, do not modify / remove directly
    15. 15. THE NEW IMPROVED CSSREGISTRATION • Conditional Expression <SharePoint:CSSRegistration Name="a.css" runat="server" ConditionalExpression="lt IE 8"/> Emits <![if lt IE 8]> <link rel="stylesheet" type="text/css href="a.css" /> <![endif]>
    16. 16. THE NEW IMPROVED CSSREGISTRATION • After <SharePoint:CSSRegistration Name="a.css" After="b.css" runat="server“ /> <SharePoint:CSSRegistration Name=“b.css“ runat="server“ /> Translates as… <link rel="stylesheet" type="text/css href="b.css" /> <link rel="stylesheet" type="text/css href="a.css" />
    17. 17. Use CSS files as much as possible, do not embed CSS or inline CSS
    18. 18. Start using min-height, min-width, max-height, max-width in your CSS
    19. 19. v3 themes do not work anymore, Use THMX theme format
    20. 20. Divs are IN Tables are OUT
    21. 21. Use Relative URLs with <% $SPUrl:~site/… %> and <% $SPUrl:~sitecollection/… %>
    22. 22. 2 ways to skin: SharePoint Designer Visual Studio
    23. 23. Steps to skinning your SharePoint
    24. 24. Design your skin in your favorite graphic designer Step 1
    25. 25. http://erikswenson.blogspot.com/2010/02/sharepoint-2010-layered-photoshop-file.html
    26. 26. Convert your design to HTML Step 2
    27. 27. Identify the common regions for the masterpages Step 3
    28. 28. MASTERPAGES CONTAINS… • Branding elements, such as corporate logos and color schemes • 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.)
    29. 29. Identify the various editable regions of your design Step 4
    30. 30. Identify the main menu / sub menu with Subsites, Folders to pages, and pages Step 5
    31. 31. Create a new masterpage Step 6
    32. 32. http://code.msdn.microsoft.com/odcSP14StarterMaster
    33. 33. Create new page layouts Step 7
    34. 34. BASIC SKINNING OF SHAREPOINT DEMO
    35. 35. RESOURCES • http://startermasterpages.codeplex.com/ • http://erikswenson.blogspot.com/2010/01/sharepoint-2010- base-css-classes.html • http://blog.drisgill.com/ • http://styledpoint.com/blog/ribbon-customization-changing- placement-look-and-behavior/ • http://msdn.microsoft.com/en- us/library/ee539981(office.14).aspx • http://www.thesharepointmuse.com/2010/05/sharepoint- 2010-customization-resources/
    36. 36. Contact Details Justin Lee Software Development Consultant triplez@justinlee.sg Q & A

    ×