Platinum Sponsor
Gold Sponsors
THINGS I’VE LEARNT WHEN
SKINNING AND CUSTOMIZING A
SHAREPOINT 2010 SITE
Justin Lee
Skinning and Customizing
SharePoint may cause severe
headaches, frustration and loss of
sleep.
WARNING
Everything you can design for the
web, you can design for SharePoint
Can I do <insert web design feature> on SharePoint?
If you do not have server access,
there are some limitations to
reusability and deployment
Do you have server access?
Migrate to v4 masterpages,
Do not use v3 anymore
It is important to plan your
SharePoint Site
http://go.microsoft.com/fwlink/?LinkID=187505&clcid=0x409
Think about your site map too,
Identify the subsites and pages
http://www.mockflow.com/
Leave space for the new Ribbon
control in your design
Do not attempt to customize the
ribbon, however if you have to, read
http://blogs.msdn.com/b/sharepoint/archive/2010/04/06...
http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/
Override CSS,
do not modify / remove directly
THE NEW IMPROVED CSSREGISTRATION
• Conditional Expression
<SharePoint:CSSRegistration Name="a.css"
runat="server" Conditio...
THE NEW IMPROVED CSSREGISTRATION
• After
<SharePoint:CSSRegistration Name="a.css"
After="b.css" runat="server“ />
<SharePo...
Use CSS files as much as possible,
do not embed CSS or inline CSS
Start using min-height, min-width,
max-height, max-width in your CSS
v3 themes do not work anymore,
Use THMX theme format
Divs are IN
Tables are OUT
Use Relative URLs with
<% $SPUrl:~site/… %> and
<% $SPUrl:~sitecollection/… %>
2 ways to skin:
SharePoint Designer
Visual Studio
Steps to skinning your SharePoint
Design your skin in your favorite
graphic designer
Step 1
http://erikswenson.blogspot.com/2010/02/sharepoint-2010-layered-photoshop-file.html
Convert your design to HTML
Step 2
Identify the common regions for the
masterpages
Step 3
MASTERPAGES CONTAINS…
• Branding elements, such as corporate logos and color
schemes
• Shared navigation elements
• Shared...
Identify the various editable regions
of your design
Step 4
Identify the main menu / sub menu with
Subsites, Folders to pages, and pages
Step 5
Create a new masterpage
Step 6
http://code.msdn.microsoft.com/odcSP14StarterMaster
Create new page layouts
Step 7
BASIC SKINNING OF SHAREPOINT
DEMO
RESOURCES
• http://startermasterpages.codeplex.com/
• http://erikswenson.blogspot.com/2010/01/sharepoint-2010-
base-css-cl...
Contact Details
Justin Lee
Software Development
Consultant
triplez@justinlee.sg
Q & A
Things I've learnt when skinning and customizing a SharePoint 2010 Site
Things I've learnt when skinning and customizing a SharePoint 2010 Site
Upcoming SlideShare
Loading in...5
×

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

7,155

Published on

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

No Downloads
Views
Total Views
7,155
On Slideshare
0
From Embeds
0
Number of Embeds
1
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"/>
  • Transcript of "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

    ×