developing branding solutions
DESCRIPTION
TRANSCRIPT
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.
Topics we’ll cover Master Pages Themes Deployment Considerations Advanced Themes Additional Page Head Methods Auto-Brand New Sites Feature Based Application of Branding
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
What does branding involve? Master Pages Page Layouts Themes Cascading Style Sheets (CSS) Images JavaScript
What to be aware of Plan your approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
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
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 Toolhttp://connect.microsoft.com/themebuilder
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
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.
Consideration for CSS & Images
SharePoint:CSSRegistration vs <Link>
Deploy to Style Library or Layouts Conditional CSS for Browsers Targeting
Feature Based Branding
Pros Easy to apply across
Site Collections, Sites and Sub-Sites
Repeatable Branding Powerful, can
accomplish many tasks – fast!
Easily rolled out across environments
Cons Difficult to make
quick style changes (there’s a trick)
You’ll need to know how to use Visual Studio 2010
Feature Based Branding – cont.
Feature
Feature Receiver
Theme
Site Icon
Master Page
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
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
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.
Technique #2 – continued
Element
User Control
Feature
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
Questions or Comments?
Contact information Thomas M Daly Email - [email protected] Blog - http://thomasdaly.net Twitter - _TomDaly_ LinkedIn Company Site –
http://www.bandrsolutions.com
References & Additional Resources
Conditional CSS Traditional method CSSRegistration
Deploying Branding for Sandbox Packaging & Deploying Branding