sharepoint saturday philly - intro to sharepoint 2010 branding
DESCRIPTION
Presented at SharePoint Saturday Philly Feb, 2011TRANSCRIPT
![Page 1: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/2.jpg)
Platinum
Gold
SWAG
Event Organizers
Thanks to our Sponsors!
![Page 4: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/5.jpg)
OutlineWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingMaster PagesThemesDemoDeployment Options
![Page 6: SharePoint Saturday Philly - Intro to SharePoint 2010 Branding](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061117/54671711af795968038b5c0e/html5/thumbnails/18.jpg)
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)