Things I've learnt when skinning and customizing a SharePoint 2010 Site
4 likes3,567 views
The document provides guidance on skinning and customizing a SharePoint 2010 site. It recommends starting by designing the skin in a graphic designer, then converting it to HTML. Key steps include identifying common regions for master pages, editable regions, and menus/submenus. The document warns that skinning SharePoint can cause headaches and lists resources for skinning techniques using SharePoint Designer or Visual Studio, including creating new master pages and page layouts. It also provides tips on using CSS, themes, URLs and the new ribbon control in customizations.
![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]>](https://image.slidesharecdn.com/seaspc2010thingsivelearntwhenskinningandcustomizingasharepoint2010site-101027020326-phpapp01/85/Things-I-ve-learnt-when-skinning-and-customizing-a-SharePoint-2010-Site-16-320.jpg)
Things I've learnt when skinning and customizing a SharePoint 2010 Site
- 2. THINGS I’VE LEARNT WHEN SKINNING AND CUSTOMIZING A SHAREPOINT 2010 SITE Justin Lee
- 3. Skinning and Customizing SharePoint may cause severe headaches, frustration and loss of sleep. WARNING
- 4. Everything you can design for the web, you can design for SharePoint Can I do <insert web design feature> on SharePoint?
- 6. If you do not have server access, there are some limitations to reusability and deployment Do you have server access?
- 7. Migrate to v4 masterpages, Do not use v3 anymore
- 8. It is important to plan your SharePoint Site
- 10. Think about your site map too, Identify the subsites and pages
- 12. Leave space for the new Ribbon control in your design
- 13. 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. Override CSS, do not modify / remove directly
- 16. 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]>
- 17. 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" />
- 18. Use CSS files as much as possible, do not embed CSS or inline CSS
- 19. Start using min-height, min-width, max-height, max-width in your CSS
- 20. v3 themes do not work anymore, Use THMX theme format
- 21. Divs are IN Tables are OUT
- 22. Use Relative URLs with <% $SPUrl:~site/… %> and <% $SPUrl:~sitecollection/… %>
- 23. 2 ways to skin: SharePoint Designer Visual Studio
- 24. Steps to skinning your SharePoint
- 25. Design your skin in your favorite graphic designer Step 1
- 27. Convert your design to HTML Step 2
- 28. Identify the common regions for the masterpages Step 3
- 29. 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.)
- 30. Identify the various editable regions of your design Step 4
- 31. Identify the main menu / sub menu with Subsites, Folders to pages, and pages Step 5
- 32. Create a new masterpage Step 6
- 33. http://code.msdn.microsoft.com/odcSP14StarterMaster
- 34. Create new page layouts Step 7
- 35. BASIC SKINNING OF SHAREPOINT DEMO
- 36. 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/
- 37. Contact Details Justin Lee Software Development Consultant [email protected] Q & A