SharePoint 2010 branding
9 likes1,745 views
SharePoint 2010 introduces new branding features including the ribbon UI, modal dialogs, rich text editing, and responsive zone orientations. Themes are now defined in the THMX format rather than SPThemes.xml. The CSSRegistration control allows custom CSS to be registered and ordered, including conditional expressions and placement after core stylesheets. Master pages can be customized through SharePoint Designer, Visual Studio, or by deploying features. The "Visual Upgrade" helps transition 2007 master pages but a long term solution is migrating branding to the V4.master.
![Themes Born Again
• V3 Themes are dead…
• … and born again in the Office THMX xml
format
– Colors and font definition
– Upload into _themes catalog
• No More SPThemes.xml
• [Preview: upgrade issues…]](https://image.slidesharecdn.com/sp2010branding-100430094043-phpapp02/85/SharePoint-2010-branding-9-320.jpg)
![CSS Registration
• The new and Improved CSSRegistration!
– 3 interesting new properties:
1. ConditionalExpression
<SharePoint:CSSRegistration Name=“a.css"
ConditionalExpression="lt IE 8" runat="server" />
– Emmits:
<![if lt IE 8]>
<link rel="stylesheet" type="text/css"
href=“NonIE8.css"/>
<![endif]>](https://image.slidesharecdn.com/sp2010branding-100430094043-phpapp02/85/SharePoint-2010-branding-14-320.jpg)
![CSS Registration
3. EnableCSSTheming: Theme colors
overriding your CSS
• Set to True by default:
.philsclass {
/* [ReplaceColor(themeColor:”Accent1”)] */
background-color:Red;
}](https://image.slidesharecdn.com/sp2010branding-100430094043-phpapp02/85/SharePoint-2010-branding-16-320.jpg)
SharePoint 2010 branding
- 1. SharePoint 2010 Branding Phil Wicklund
- 2. About Me… • Working with SP since 2004 • Started as a trainer for Mindsharp • Now consulting through RBA in MN • Blog: philwicklund.com • Writing a 2010 book:
- 3. Agenda • New Branding Features • Themes Born Again • CSS Registration • Master pages • Upgrade
- 4. New Branding Features • Ribbon UI
- 5. New Branding Features • Keeping the user “in context” with modal dialogs and Ajax throughout:
- 6. New Branding Features • Rich text and web parts intermingle:
- 7. New Branding Features • Easy toggle between zone orientations:
- 8. New Branding Features • More W3C/XHTML compliant, eg, supports more browsers including IE 7-8, Firefox 3.6, and Safari 4.04 – Some known limitations: http://technet.microsoft.com/en-us/library/cc263526(office.14).aspx • IE 6 NOT supported • Much fewer tables in the default master page: 5 versus 18 in 2007 (CSS!!!) • Master pages changes apply to ALL pages including Layouts/settings pages.
- 9. Themes Born Again • V3 Themes are dead… • … and born again in the Office THMX xml format – Colors and font definition – Upload into _themes catalog • No More SPThemes.xml • [Preview: upgrade issues…]
- 11. Demo 1 Working with the out-of-the-box themes
- 12. CSS Registration • CSSRegistration control – Available in 2007 – Used to register custom CSS in page Head – Common uses: • Web Parts • Layout and content pages • Master pages
- 13. CSS Registration • A history lesson: Umm…. Why did SP re- – CSSRegistration control order my CSS? <SharePoint:CSSRegistration Name=“b.css" runat="server" /> <SharePoint:CSSRegistration Name=“a.css" runat="server" /> • Translates as: <link rel="stylesheet" type="text/css" href=“a.css"/> <link rel="stylesheet" type="text/css" href=“b.css"/> <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=..."/> Umm…. – Workaround: DefaultUrl of Core AFTER my CSSLink control custom CSS? – Which makes CSSRegistration kinda pointless…
- 14. CSS Registration • The new and Improved CSSRegistration! – 3 interesting new properties: 1. ConditionalExpression <SharePoint:CSSRegistration Name=“a.css" ConditionalExpression="lt IE 8" runat="server" /> – Emmits: <![if lt IE 8]> <link rel="stylesheet" type="text/css" href=“NonIE8.css"/> <![endif]>
- 15. CSS Registration 2. After (whoo hoo!) <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"/> Ummm… <link rel="stylesheet" type="text/css" href=“a.css"/> <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themeable/corev4.css..."/> – But… <SharePoint:CSSRegistration Name=“a.css“ After=“corev4.css” runat="server" /> <SharePoint:CSSRegistration Name=“b.css“ After=“corev4.css” runat="server" /> <SharePoint:CSSRegistration Name=“c.css“ After=“corev4.css” runat="server" /> – Translates as: <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themeable/corev4.css..."/> <link rel="stylesheet" type="text/css" href=“c.css"/> <link rel="stylesheet" type="text/css" href=“b.css"/> <link rel="stylesheet" type="text/css" href=“a.css"/>
- 16. CSS Registration 3. EnableCSSTheming: Theme colors overriding your CSS • Set to True by default: .philsclass { /* [ReplaceColor(themeColor:”Accent1”)] */ background-color:Red; }
- 17. CSS Registration • For a farm wide brand, how do we get the CSSRegistration control on the master page? Option 1: Place control in a web part? Option 2: Place control in page layout or content page? Option 3: Edit master page directly? Option 4: create a feature • Pros: Supports Farm-Wide brand • Cons: Visual Studio knowledge recommended
- 18. Demo 2 Deploy custom CSS via feature activation
- 19. Master pages • When CSS can’t quite do it (which is less often in 2010)…
- 20. Master pages Courtesy of MSDN…
- 21. Master pages • Heavy changes: copy minimal.master • Light changes: copy v4.master • Tools: – SharePoint Designer • Site or Site Collection only • But easier interface for non-devs – Visual Studio • Supports farm wide deployments via feature activation
- 22. Demo 3 Deploy a master page and custom theme via a feature
- 23. Upgrade • “Visual Upgrade” for master pages – preserve user experience from 2007 – won't get ribbon, etc – Can toggle back and forth between V3 and V4 master pages – short term solution. Long term solution: • Migrate branding into copy of V4.master – Not available for My Sites • V3 themes are dead…
- 24. Upgrade
- 25. Questions?