Intro to SharePoint 2010 Branding

Presented by Thomas Dalytdaly@bandrsolutions.com

Who am I?A SharePoint developer who specializes in

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

OutlineWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingMaster PagesThemesDemo

What’s New – ChangesTable < DivDialog BoxesBetter & More cross browser supportOffice Theme EngineTie custom CSS into theme engine

Tools & Supported BrowsersTools

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

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

Approaches to BrandingTheme – covers the overall color scheme of

the siteMaster Page & Custom CSS – complete

control over look and feel.

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

Classess4-notdlg - prevent from showing in dialog window

Team Site Home Page Elements and CSS Classes - http://msdn.microsoft.com/en-us/library/ms438349.aspx

RibbonCustomizing the Ribbon Position - http

://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx

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

Upgrading BrandingMaster Page

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

DemoTheme

Create through PowerPoint, ImportUpdate through UITheme Tool

Show V3 Master Page SupportOOTB v3.masterHeather base master page

Show Starter MasterApply Blank Master PageApply Customized Master Page

Tie into theme engine w/ custom css (/theme site)

Questions? Questions / Comments

Contact informationThomas Dalytdaly@bandrsolutions.com

Things to addMobile Page Layouts