1. Thomas Daly, tdaly@bandrsolutions.com
Presented @ NYC SharePoint Users Group
4/6/2011

2. Who am I?
 A SharePoint developer who specializes in
implementing designs and creating web components
to enhance the user interface and user experience.

3. Outline
 What is Branding
 Planning
 What’s New in 2010
 Tools & Supported Browsers
 Approaches to Branding
 Themes
 Master Pages
 Upgrading
 Demo

4. 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

5. 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

6. What’s New – Changes
 Less Table, mainly DIV based
 New objects – Ribbon, Dialog Boxes
 Increased Browser Support
 Utilizing Office Theme Engine
 Increase Standards Compliance

7. Tools & Supported Browsers
 Tools
 IE Dev Toolbar (embedded in IE8)
 Firebug / Firebug Lite
 SharePoint Designer 2010
 ColorPic
 Multiple Versions
 IE
 Firefox
 vmware, virtual pc, or virtual box
 Supported Browsers
 Internet Explorer 7 & 8
 Mozilla Firefox 3.6
 Safari 4.04

8. Other Browsers & Tools
 Firebug Lite - Compatible
with all major browsers: IE6+,
Firefox, Opera, Safari and
Chrome;
 Chrome
 Built in developer tool bar
 Opera
 Dragonfly

9. No IE 6 Support
 7 ways to tell your site visitors to upgrade

10. 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.

11. Themes
 Set of graphics and cascading
style sheets that control the
look of your site.
 Uses Office themes (.THMX)
 12 colors, 2 fonts

12. 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

13. 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

14. Custom Style Sheets
 Link to your custom CSS in the MasterPage
 Upload the CSS to the site, via Alternate CSS
(Publishing Only)

15. 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

16. 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

17. 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

18. 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

19. 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
 Deployment
 Feature driven deployment

20. Questions?
 Questions / Comments
 Contact information
 Thomas M Daly
 Email: tdaly@bandrsolutions.com
 Blog – http://thomasdaly.net
 Twitter - _TomDaly_