Getting Started with SharePoint Branding

Thomas Daly, tdaly@bandrsolutions.comPresented @ SPSVB 1/7/2012

Thanks to the Sponsors!

About MeSharePoint Consultant @

B&R Business Solutions, based out of NJA 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.

What are we going to cover?What 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 workstation, 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

Search Master PageContains Minimal Components

Converting Custom Master Page into Search Center Master Page

Ribbon

Security Trim RibbonCustomize Ribbon PositionRibbon placement, look, behavior

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

Demo Theme

Create through PowerPoint, Import Update through UI Theme Tool

Alternate CSS method Show V3 Master Page Support

OOTB v3.master Heather base master page

Show Starter Master Apply Blank Master Page Apply Customized Master Page

Jquery Conditional CSS Enhance OOTB elements DOM Changes

Deployment Feature driven deploymentweb

Questions or Comments? Contact information

Thomas M DalyEmail - tdaly@bandrsolutions.comBlog - http://thomasdaly.netTwitter - _TomDaly_Company Site – http://www.bandrsolutions.com