2. 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.
3. Topics we’ll cover
Master Pages
Themes
Deployment Considerations
Advanced Themes
Additional Page Head Methods
Auto-Brand New Sites
Feature Based Application of Branding
4. What is SharePoint Branding?
Creating a visual identity in SharePoint
Why brand SharePoint? – Top 4 Reasons
Create a unique look and feel
Maintain company visual identity
Create distinct web areas
Make it not look like SharePoint
6. What to be aware of
Planyour approach
Consider the end users
Have the right tools
Browsers, Browsers, & Browsers
7. Tools
Visual Studio 2010
SharePoint Designer 2010
Browser Developer Toolbars
IE (F12) Dev Toolbar
Firebug (for FireFox)
Visual Studio CSS Plugins
Web Essentials
Theme Builder
CKS: Development Tools
Color Pickers
ColorPic
ColorCop
8. Themes
3 Approaches to creating/updating the
theme
Existing theme can be modified in UI
(Publishing Features on SC level)
New theme can be created in PowerPoint
and imported
Microsoft Theme Builder Tool
http://connect.microsoft.com/themebuilder
9. Master Pages
Creates a consistent look & layout for pages in your site.
If your going custom, Start Clean!
Clean v4 – Tom Daly
My Master Page – basically V4.master, subtracting the V3 content
areas, highly document, all controls, & maintain all SharePoint
functionality
Starter Master Pages – Randy Drisgill
Codeplex project, nicely documented
Problem with Treeview Nav & Vertical Grip
Others, haven’t used yet
Just the Essentials – Heather Solomon
HTML 5 – Kyler Schaeffer
10. Master Pages (key points)
Search – uses Minimal.Master
If you plan to have it look like your custom SharePoint
master page follow this blog to convert it. Link
Important things to remember when working in your
Master Page
Special Classes
noindex – prevent content from being indexed
s4-notdlg – prevent contents from appearing in dialogs
s4-notsetwidth – used to set a fixed width
Be careful working with the s4-workspace, test the master
page at various times to ensure that the scrollbars still
work
Use a DEV toolbar to inspect elements & test CSS
Do not cut out ASP controls, Hide them.
11. Consideration for CSS &
Images
SharePoint:CSSRegistration vs <Link>
Deploy to Style Library or Layouts
Conditional CSS for Browsers Targeting
12. Feature Based Branding
Pros Cons
Easy to apply across Difficult to make
Site Collections, Sites quick style changes
and Sub-Sites
(there’s a trick)
Repeatable Branding
You’ll need to know
Powerful, can
accomplish many how to use Visual
tasks – fast! Studio 2010
Easily rolled out across
environments
14. Pseudo Theme
When regular theming is just not enough!
No touching the Master Page
Both feature based – samples provided
Technique #1
Apply Theme
Apply Alternative CSS
Technique #2
Apply CSS File via AddtionalPageHead
15. Technique #1
Take advantage of
the power of the
feature receiver to
apply an alternate
CSS & apply a theme
Use the theme as a
base CSS layer
16. Technique #2
Additional Page Head – a delegate control located in the
<HEAD> of SharePoint master pages. Can be used to load
multiple controls via code without touching the master page
directly.
18. Auto Brand New Sites
By default, SharePoint does not trickle down
applied themes, master page, alternate css
By creating Web Provisioned Event Handler we
can make the new children sites have the same
branding as their parent.
Common things to set are:
Master Page Url
Custom Master Page Url
Site Logo
Parent Navigation
Theme
Use Synchronous Property
19. Questions or Comments?
Contact information
Thomas M Daly
Email - tdaly@bandrsolutions.com
Blog - http://thomasdaly.net
Twitter - _TomDaly_
LinkedIn
Company Site –
http://www.bandrsolutions.com
