About Me SharePoint Consultant @ B&R Business Solutions, based out of NJ A SharePoint Developer – specializing in UI objects (webparts, user controls) both ASP.NET & jQuery components. A SharePoint Brander – transform designs into CSS & images to skin SharePoint.
Topics we’ll cover Master Pages Themes Deployment Considerations Advanced Themes Additional Page Head Methods Auto-Brand New Sites Feature Based Application of Branding
What is SharePoint Branding? Creating a visual identity in SharePoint Why brand SharePoint? – Top 4 Reasons Create a unique look and feel Maintain company visual identity Create distinct web areas Make it not look like SharePoint
What to be aware of Planyour approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
Tools Visual Studio 2010 SharePoint Designer 2010 Browser Developer Toolbars IE (F12) Dev Toolbar Firebug (for FireFox) Visual Studio CSS Plugins Web Essentials Theme Builder CKS: Development Tools Color Pickers ColorPic ColorCop
Themes3 Approaches to creating/updating the theme Existing theme can be modified in UI (Publishing Features on SC level) New theme can be created in PowerPoint and imported Microsoft Theme Builder Tool http://connect.microsoft.com/themebuilder
Master Pages Creates a consistent look & layout for pages in your site. If your going custom, Start Clean! Clean v4 – Tom Daly My Master Page – basically V4.master, subtracting the V3 content areas, highly document, all controls, & maintain all SharePoint functionality Starter Master Pages – Randy Drisgill Codeplex project, nicely documented Problem with Treeview Nav & Vertical Grip Others, haven’t used yet Just the Essentials – Heather Solomon HTML 5 – Kyler Schaeffer
Master Pages (key points) Search – uses Minimal.Master If you plan to have it look like your custom SharePoint master page follow this blog to convert it. Link Important things to remember when working in your Master Page Special Classes noindex – prevent content from being indexed s4-notdlg – prevent contents from appearing in dialogs s4-notsetwidth – used to set a fixed width Be careful working with the s4-workspace, test the master page at various times to ensure that the scrollbars still work Use a DEV toolbar to inspect elements & test CSS Do not cut out ASP controls, Hide them.
Consideration for CSS &Images SharePoint:CSSRegistration vs <Link> Deploy to Style Library or Layouts Conditional CSS for Browsers Targeting
Feature Based Branding Pros Cons Easy to apply across Difficult to make Site Collections, Sites quick style changes and Sub-Sites (there’s a trick) Repeatable Branding You’ll need to know Powerful, can accomplish many how to use Visual tasks – fast! Studio 2010 Easily rolled out across environments
Feature Based Branding – cont. FeatureFeature Receiver Site Icon Master Page Theme
Pseudo Theme When regular theming is just not enough! No touching the Master Page Both feature based – samples provided Technique #1 Apply Theme Apply Alternative CSS Technique #2 Apply CSS File via AddtionalPageHead
Technique #1 Take advantage of the power of the feature receiver to apply an alternate CSS & apply a theme Use the theme as a base CSS layer
Technique #2 Additional Page Head – a delegate control located in the <HEAD> of SharePoint master pages. Can be used to load multiple controls via code without touching the master page directly.
Technique #2 – continued Feature ElementUser Control
Auto Brand New Sites By default, SharePoint does not trickle down applied themes, master page, alternate css By creating Web Provisioned Event Handler we can make the new children sites have the same branding as their parent. Common things to set are: Master Page Url Custom Master Page Url Site Logo Parent Navigation Theme Use Synchronous Property
Questions or Comments? Contact information Thomas M Daly Email - email@example.com Blog - http://thomasdaly.net Twitter - _TomDaly_ LinkedIn Company Site – http://www.bandrsolutions.com
References & AdditionalResources Conditional CSS Traditional method CSSRegistration DeployingBranding for Sandbox Packaging & Deploying Branding