Intro to SharePoint 2010 Branding

Thomas Daly, tdaly@bandrsolutions.comPresented @ NYC SharePoint Users Group

4/6/2011

Who am I?A SharePoint developer who specializes in

implementing designs and creating web components to enhance the user interface and user experience.

OutlineWhat is BrandingPlanningWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingThemesMaster PagesUpgradingDemo

What is SharePoint Branding?Creating a visual identity in SharePointCovers everything, from editing pages,

webparts, css, master pages, themes, page layouts, jquery/javascript, xslt, CAML, SharePoint Designer . . .

Why brand SharePoint?Create a unique lookMaintain company visual identityCreate distinct web areasMake it not look like SharePoint

PlanningIntranet or Internet scenarioCollaborational or InformationalDetermine Audience - target browsers, users,

& screen resolutionExisting company style or guidelinesCustom Page LayoutsCustom or 3rd Part ComponentsTimeframeApprovalDeployment

What’s New – ChangesLess Table, mainly DIV basedNew objects – Ribbon, Dialog BoxesIncreased Browser SupportUtilizing Office Theme EngineIncrease Standards Compliance

Tools & Supported BrowsersTools

IE Dev Toolbar (embedded in IE8)Firebug / Firebug LiteSharePoint Designer 2010ColorPicMultiple Versions

IE Firefox

vmware, virtual pc, or virtual box

Supported BrowsersInternet Explorer 7 & 8Mozilla Firefox 3.6Safari 4.04

Other Browsers & ToolsFirebug Lite - Compatible

with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;

ChromeBuilt in developer tool bar

OperaDragonfly

No IE 6 Support7 ways to tell your site visitors to upgrade

Approaches to BrandingBasic

End User situation – none or limited knowledge of html or CSS

Updating theme, adding logo, selecting new master page.

IntermediateRequires – some ability to understand, write CSS,

htmlModifying current MasterPage, adding some custom

CSSAdvanced

Create Custom Master Page, custom CSS.

ThemesSet of graphics and

cascading style sheets that control the look of your site.

Uses Office themes (.THMX)

12 colors, 2 fonts

Themes3 Approaches to

creating/updating the themeExisting theme can be

modified in UI (Publishing Features)

New theme can be created in PowerPoint and imported

Microsoft Theme Builder Tool

http://connect.microsoft.com/themebuilder

Theme EngineAttach Custom CSS – EnableCssTheming

Enable custom CSS to see themes - /Style Library/en-us/Themable

Capabilities – refReplace colors, Replace fontsRecolor images - Blending, Tinting, Fill

Custom Style SheetsLink to your custom CSS in the MasterPage

Upload the CSS to the site, via Alternate CSS (Publishing Only)

Master PagesStarter Master Pages – new term for Minimal

Master Pageshttp://startermasterpages.codeplex.com/

Includes 3 master pages: regular, foundations, meeting workspaces

Provides clean starting point for brandingWell documented for easy understanding

V3 Master Page Support

jQuery’s Role in BrandingCreating interactive web componentsManipulating the DOM after the factAdd / Remove classesAdjust CSS stylesPerform adjustments to page base on other

criteriaAdd flare

Upgrading BrandingTheme

No direct methodMaster Page

MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx

Deployment OptionsVaries depending on your branding effortSharePoint Designer Based

Upload master pages, images, CSS, & scriptsManual process per site

Solution Based DeploymentUpload master pages, images, CSS, & scriptsAutomatically activate theme, apply master

pages, build out site components.Repeatable branding application,

programmatically across sites

DemoTheme

Create through PowerPoint, ImportUpdate through UITheme Tool

Alternate CSS methodShow V3 Master Page Support

OOTB v3.masterHeather base master page

Show Starter MasterApply Blank Master PageApply Customized Master Page

DeploymentFeature driven deployment

Questions? Questions / Comments

Contact informationThomas M DalyEmail: tdaly@bandrsolutions.comBlog – http://thomasdaly.netTwitter - _TomDaly_