1.
Thomas Daly, tdaly@bandrsolutions.com
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
http://connect.microsoft.com/themebuilder

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
 http://startermasterpages.codeplex.com/
 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
http://msdn.microsoft.com/en-us/library/ee539981.aspx

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 - tdaly@bandrsolutions.com
 Blog - http://thomasdaly.net
 Twitter - _TomDaly_
 Company Site – http://www.bandrsolutions.com