Your SlideShare is downloading. ×
SPSVB 1 7-2012 - getting started with share point branding
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SPSVB 1 7-2012 - getting started with share point branding


Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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