sharepoint saturday philly - intro to sharepoint 2010 branding

19
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 : [email protected] TWITTER : @tristateSP Meeting Format 5:30-6:30 Power User Session 6: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

Upload: thomas-daly

Post on 15-Nov-2014

552 views

Category:

Technology


2 download

DESCRIPTION

Presented at SharePoint Saturday Philly Feb, 2011

TRANSCRIPT

Page 1: 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: [email protected]

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

Page 2: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Platinum

Gold

SWAG

Event Organizers

Thanks to our Sponsors!

Page 3: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Intro to SharePoint 2010 Branding

Presented by Thomas [email protected]

Page 4: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Who am I?A SharePoint Developer who specializes in

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

Page 5: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 6: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 7: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 8: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Other Browsers & ToolsFirebug Lite - Compatible

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

ChromeBuilt in developer tool bar

OperaDragonfly

Page 9: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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.

Page 10: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 11: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 12: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 13: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

ThemesSet of graphics and

cascading style sheets that control the look of your site.

Uses Office themes (.THMX)

12 colors, 2 fonts

Page 14: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 15: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 16: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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

Page 17: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Deployment OptionsTheme

Upload & Activate through UI

Alternate CSSUpload & Set through UI

Master Page / CSS Upload & Apply through UIFeature Deployment

Page 18: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

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)

Page 19: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding

Questions? Questions / Comments

Contact informationThomas [email protected]