Intro to SharePoint 2010 Branding<br />Thomas Daly, tdaly@bandrsolutions.com<br />Presented @ SPSNYC 7/30/2011<br />
Who am I?<br />A SharePoint Developer – specializing in UI objects (webparts, user controls) both ASP.NET & jQuery compone...
Outline<br />What is Branding<br />Planning<br />What’s New in 2010<br />Tools & Supported Browsers<br />Approaches to Bra...
What is SharePoint Branding?<br />Creating a visual identity in SharePoint<br />Covers everything, from editing pages, web...
Planning<br />Intranet or Internet scenario<br />Collaborational or Informational<br />Determine Audience - target browser...
What’s New – Changes	<br />Less Table, mainly DIV based<br />New objects – Ribbon, Dialog Boxes<br />Increased Browser Sup...
Tools & Supported Browsers<br />Tools<br />IE Dev Toolbar (embedded in IE8)<br />Firebug / Firebug Lite<br />SharePoint De...
Other Browsers & Tools	<br />Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;<b...
No IE 6 Support<br />7 ways to tell your site visitors to upgrade<br />
Approaches to Branding<br />Basic<br />End User situation – none or limited knowledge of html or CSS<br />Updating theme, ...
Themes<br />Set of graphics and cascading style sheets that control the look of your site. <br />Uses Office themes (.THMX...
Themes<br />3Approaches to creating/updating the theme<br />Existing theme can be modified in UI (Publishing Features)<br ...
Theme Engine<br />Attach Custom CSS – EnableCssTheming<br />Enable custom CSS to see themes - /Style Library/en-us/Themabl...
Custom Style Sheets<br />Link to your custom CSS in the MasterPage<br />Upload the CSS to the site, via Alternate CSS (Pub...
Master Pages<br />Starter Master Pages – new term for Minimal Master Pages<br />http://startermasterpages.codeplex.com/<br...
Search Master Page<br />Contains Minimal Components<br />Converting Custom Master Page into Search Center Master Page<br />
Ribbon	<br />Security Trim Ribbon<br />Customize Ribbon Position<br />Ribbon placement, look, behavior<br />
jQuery’s Role in Branding	<br />Creating interactive web components<br />Manipulating the DOM after the fact<br />Add / Re...
Upgrading Branding<br />Theme<br />No direct method<br />Master Page<br />MSDN Article - Upgrading an Existing Master Page...
Deployment Options<br />Varies depending on your branding effort<br />SharePoint Designer Based<br />Upload master pages, ...
Demo<br />Theme<br />Create through PowerPoint, Import<br />Update through UI<br />Theme Tool<br />Alternate CSS method<br...
Questions? 	<br />Questions / Comments<br />Contact information<br />Thomas M Daly<br />Email: tdaly@bandrsolutions.com<br...
Upcoming SlideShare
Loading in …5
×

Spsnyc 2011 getting started with share point branding

588 views

Published on

SharePoint Saturday NYC slide deck for Intro to SharePoint Branding

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
588
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Spsnyc 2011 getting started with share point branding

  1. 1. Intro to SharePoint 2010 Branding<br />Thomas Daly, tdaly@bandrsolutions.com<br />Presented @ SPSNYC 7/30/2011<br />
  2. 2. Who am I?<br />A SharePoint Developer – specializing in UI objects (webparts, user controls) both ASP.NET & jQuery components.<br />A SharePoint Brander – transform designs into css/images to skin SharePoint.<br />
  3. 3. Outline<br />What is Branding<br />Planning<br />What’s New in 2010<br />Tools & Supported Browsers<br />Approaches to Branding<br />Themes<br />Master Pages<br />Upgrading<br />Demo<br />
  4. 4. What is SharePoint Branding?<br />Creating a visual identity in SharePoint<br />Covers everything, from editing pages, webparts, css, master pages, themes, page layouts, jquery/javascript, xslt, CAML, SharePoint Designer . . . <br />Why brand SharePoint?<br />Create a unique look<br />Maintain company visual identity<br />Create distinct web areas<br />Make it not look like SharePoint<br />
  5. 5. Planning<br />Intranet or Internet scenario<br />Collaborational or Informational<br />Determine Audience - target browsers, users, & screen resolution<br />Existing company style or guidelines<br />Custom Page Layouts<br />Custom or 3rd Part Components<br />Timeframe<br />Approval<br />Deployment<br />
  6. 6. What’s New – Changes <br />Less Table, mainly DIV based<br />New objects – Ribbon, Dialog Boxes<br />Increased Browser Support<br />Utilizing Office Theme Engine<br />Increase Standards Compliance<br />
  7. 7. Tools & Supported Browsers<br />Tools<br />IE Dev Toolbar (embedded in IE8)<br />Firebug / Firebug Lite<br />SharePoint Designer 2010<br />ColorPic<br />Multiple Versions <br />IE<br />Firefox<br />vmware workstation, virtual pc, or virtual box<br />Supported Browsers<br />Internet Explorer 7 & 8<br />Mozilla Firefox 3.6<br />Safari 4.04<br />
  8. 8. Other Browsers & Tools <br />Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;<br />Chrome<br />Built in developer tool bar<br />Opera<br />Dragonfly<br />
  9. 9. No IE 6 Support<br />7 ways to tell your site visitors to upgrade<br />
  10. 10. Approaches to Branding<br />Basic<br />End User situation – none or limited knowledge of html or CSS<br />Updating theme, adding logo, selecting new master page.<br />Intermediate<br />Requires – some ability to understand, write CSS, html<br />Modifying current MasterPage, adding some custom CSS<br />Advanced<br />Create Custom Master Page, custom CSS. <br />
  11. 11. Themes<br />Set of graphics and cascading style sheets that control the look of your site. <br />Uses Office themes (.THMX)<br />12 colors, 2 fonts<br />
  12. 12. Themes<br />3Approaches to creating/updating the theme<br />Existing theme can be modified in UI (Publishing Features)<br />New theme can be created in PowerPoint and imported<br />Microsoft Theme Builder Tool<br />http://connect.microsoft.com/themebuilder<br />
  13. 13. Theme Engine<br />Attach Custom CSS – EnableCssTheming<br />Enable custom CSS to see themes - /Style Library/en-us/Themable<br />Capabilities – ref<br />Replace colors, Replace fonts<br />Recolor images - Blending, Tinting, Fill<br />
  14. 14. Custom Style Sheets<br />Link to your custom CSS in the MasterPage<br />Upload the CSS to the site, via Alternate CSS (Publishing Only)<br />
  15. 15. Master Pages<br />Starter Master Pages – new term for Minimal Master Pages<br />http://startermasterpages.codeplex.com/<br />Includes 3 master pages: regular, foundations, meeting workspaces<br />Provides clean starting point for branding<br />Well documented for easy understanding<br />V3 Master Page Support<br />
  16. 16. Search Master Page<br />Contains Minimal Components<br />Converting Custom Master Page into Search Center Master Page<br />
  17. 17. Ribbon <br />Security Trim Ribbon<br />Customize Ribbon Position<br />Ribbon placement, look, behavior<br />
  18. 18. jQuery’s Role in Branding <br />Creating interactive web components<br />Manipulating the DOM after the fact<br />Add / Remove classes<br />Adjust CSS styles<br />Perform adjustments to page base on other criteria<br />Add flare<br />
  19. 19. Upgrading Branding<br />Theme<br />No direct method<br />Master Page<br />MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx<br />
  20. 20. Deployment Options<br />Varies depending on your branding effort<br />SharePoint Designer Based<br />Upload master pages, images, CSS, & scripts<br />Manual process per site<br />Solution Based Deployment<br />Upload master pages, images, CSS, & scripts<br />Automatically activate theme, apply master pages, build out site components.<br />Repeatable branding application, programmatically across sites<br />
  21. 21. Demo<br />Theme<br />Create through PowerPoint, Import<br />Update through UI<br />Theme Tool<br />Alternate CSS method<br />Show V3 Master Page Support<br />OOTB v3.master<br />Heather base master page<br />Show Starter Master<br />Apply Blank Master Page<br />Apply Customized Master Page<br />Jquery<br />Conditional CSS<br />Enhance OOTB elements<br />DOM Changes<br />Deployment<br />Feature driven deployment<br />
  22. 22. Questions? <br />Questions / Comments<br />Contact information<br />Thomas M Daly<br />Email: tdaly@bandrsolutions.com<br />Blog – http://thomasdaly.net<br />Twitter - _TomDaly_<br />

×