SharePoint 2010 branding

SharePoint 2010 Branding Phil Wicklund

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:

Agenda • New Branding Features • Themes Born Again • CSS Registration • Master pages • Upgrade

New Branding Features • Ribbon UI

New Branding Features • Keeping the user “in context” with modal dialogs and Ajax throughout:

New Branding Features • Rich text and web parts intermingle:

New Branding Features • Easy toggle between zone orientations:

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.

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…]

Themes Born Again

Demo 1 Working with the out-of-the-box themes

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

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…

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]>

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"/>

CSS Registration 3. EnableCSSTheming: Theme colors overriding your CSS • Set to True by default: .philsclass { /* [ReplaceColor(themeColor:”Accent1”)] */ background-color:Red; }

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

Demo 2 Deploy custom CSS via feature activation

Master pages • When CSS can’t quite do it (which is less often in 2010)…

Master pages Courtesy of MSDN…

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

Demo 3 Deploy a master page and custom theme via a feature

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…

Upgrade

Questions?

http://www.slideshare.net	147
http://balaonweb.blogspot.com	20
http://paper.li	3

SharePoint 2010 branding

by Phil Wicklund on Apr 30, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 170

Statistics

SharePoint 2010 branding — Presentation Transcript