sharepoint saturday philly - intro to sharepoint 2010 branding

SharePoint Community in Philadelphia

• Sessions for:

• End Users

• Administrators

• Developers

• IT Pros

• Meetings: Second Tuesday of the month, 5:30 to 8:30 PM, Microsoft Malvern office

• Hands-On Labs: Administrators and Power Users, see website for details

WEB: www.TriStateSharePoint.org (under construction)

CONTACT: info@tristatesharepoint.org

TWITTER: @tristateSP

Meeting Format5:30-6:30 Power User Session6:30-7:00 – News/Q&A/Networking/Food/Sponsors 7:00-7:30 – Open Design – “Problem of the Month” 7:30-8:30 - Developer or Administrator Session

Platinum

Gold

SWAG

Event Organizers

Thanks to our Sponsors!

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 PagesThemesDemoDeployment Options

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

Tools & Supported BrowsersTools

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

IE Firefox

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 site.Custom CSS – can change change, fonts,

colors and some structure.Master 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

Security Trim Ribbon http://blogs.msdn.com/b/zwsong/archive/2010/04/29/how-to-hide-ribbon-from-users-without-edit-page-

privilege.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

Deployment OptionsTheme

Upload & Activate through UI

Alternate CSSUpload & Set through UI

Master Page / CSS Upload & Apply through UIFeature Deployment

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