developing branding solutions
DESCRIPTION
TRANSCRIPT
![Page 2: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/2.jpg)
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.
![Page 3: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/3.jpg)
Topics we’ll cover Master Pages Themes Deployment Considerations Advanced Themes Additional Page Head Methods Auto-Brand New Sites Feature Based Application of Branding
![Page 4: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/4.jpg)
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
![Page 5: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/5.jpg)
What does branding involve? Master Pages Page Layouts Themes Cascading Style Sheets (CSS) Images JavaScript
![Page 6: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/6.jpg)
What to be aware of Plan your approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
![Page 7: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/7.jpg)
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
![Page 8: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/8.jpg)
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
![Page 9: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/9.jpg)
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
![Page 10: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/10.jpg)
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.
![Page 11: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/11.jpg)
Consideration for CSS & Images
SharePoint:CSSRegistration vs <Link>
Deploy to Style Library or Layouts Conditional CSS for Browsers Targeting
![Page 12: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/12.jpg)
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
![Page 13: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/13.jpg)
Feature Based Branding – cont.
Feature
Feature Receiver
Theme
Site Icon
Master Page
![Page 14: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/14.jpg)
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
![Page 15: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/15.jpg)
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
![Page 16: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/16.jpg)
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.
![Page 17: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/17.jpg)
Technique #2 – continued
Element
User Control
Feature
![Page 18: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/18.jpg)
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
![Page 19: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/19.jpg)
Questions or Comments?
Contact information Thomas M Daly Email - [email protected] Blog - http://thomasdaly.net Twitter - _TomDaly_ LinkedIn Company Site –
http://www.bandrsolutions.com
![Page 20: Developing branding solutions](https://reader035.vdocument.in/reader035/viewer/2022070304/54d2d9fb4a7959fc708b4572/html5/thumbnails/20.jpg)
References & Additional Resources
Conditional CSS Traditional method CSSRegistration
Deploying Branding for Sandbox Packaging & Deploying Branding