1. Developing and Deploying Custom Branding Solutions in SharePoint 2010 By: Ajay Nayak Cap Area .NET SharePoint Special Interest Group

2. About Me SharePoint jack of all trades (Developer, Admin, Architect) 4 years of SharePoint experience Booz Allen Hamilton Twitter: @ajaynayak

3. Anatomy of a SP2010 Master Page Header and Ribbon Left navigation (Quick Launch) Content Placeholders

4. Where are they stored? lobal directory in the 12 or 14 hive Located on the web front end (WFE) server C:rogram Filesommon Filesicrosoft Shared4emplatelobal Pointer to 12/14 hive is stored in the Master Page Gallery Master Page Gallery in a Site Collection Located in the content database (database server)

5. UI Changes in SharePoint 2010 Server Ribbon Rich AJAX interactions Dubbed “Fluent UI” Placement of controls Site Actions, Edit Page, Search, etc.

6. Out-of-the-box Master Pages V4.master SP2010 Team Site master page User content pages Minimal.master Search and Office Web Applications No site navigation or ribbon Simple.master For error and login pages Not customizable Default.master Included for backwards compatibility (SP2007) No ribbon or AJAX interactions

7. Compatibility Improvements Improved HTML markup DIVs for content instead of TABLEs (for the most part) More W3c XHTML compliant Better browser support Doc Types and CSS standards IE 7-9, Firefox 3.6+, Safari 4.04+ IE 6 NOT supported

8. Development Tools SharePoint Designer 2010 WYSIWYG, ASP/HTML/CSS code, deployment Visual Studio 2010 ASP/HTML/CSS code, solution development, deployment IE Developer Toolbar Debugging, identifying CSS elements Photoshop Image creation/manipulation, color selection GIMP Image creation/manipulation, color selection Notepad

9. SharePoint Development in VS2010 SharePoint 2010 item templates Web Part, Workflow, Module, Content Type, List Definition, etc Automated build and deployment File references and Modules (sets of files) Once files are added to the solution, references automatically appear in the element files Modules are automatically added to Feature elements Sandboxed solutions Live in the site collection Can be run by site administrators Can only manipulate a subset of objects in the SP object model Performance an be throttled

10. Master Page Deployment Options Manual deployment to the Master Page Gallery Followed by a manual application of the master page Does not require Visual Studio OR WSP solution deployment to the Site or Farm solution store Followed by an automated application via a Feature

11. Elements in a Master Page Solution Module Group of files to be provisioned .master files, CSS files, images Elements.xml file specifies where file will be provisioned to Feature Facilitate the provisioning/de-provisioning of master pages Event Receiver Piece of code that runs when feature is activated Can be used to apply the master page to sites

12. Where to start Start with a copy of V4.master (or minimal.master if you do not need the ribbon or top nav) Create a new CSS file, and copy/paste the elements that you wish to modify from COREV4.css Create a module for the CSS files and master page file CSS files should be provisioned to the Style Library or to the 14 hive Master pages should be provisioned to the Master Page Gallery or to the 14 hive http://msdn.microsoft.com/en-us/library/gg447066.aspx

13. Custom Page Layouts You can make copies of default page layouts (Welcome page, Blank web part page, etc), and customize them Layout files should be provisioned to the Master Page Gallery (_catalogs/masterpage) Example Module declaration in Elements.xml file: <Module Name="masterpage" Url="_catalogs/masterpage"><File Path="masterpageyCustomPageLayout.aspx" Url="MyCustomPageLayout.aspx" Type="GhostableInLibrary"> <Property Name="Title" Value="My Custom Page Layout" /> <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" /> <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png" /> <Property Name="PublishingAssociatedContentType" Value=";#$Resources:cmscore,contenttype_articlepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#"/></File></Module>

14. Images and Styles Images and CSS files can be provisioned to a library within the site collection (ie. Style Library), or to the 14 hive (.ie IMAGES folder) Provisioning to a library Advantages: Site admins can easily modify files Disadvantages: Each page load will require calls to the DB for the images and styles Provisioning to the 14 hive Advantages: WFE server can cache file for faster loading Disadvantages: Modification of files will require another deployment, or access to the 14 hive in the WFE Personal recommendation Deploy images to the IMAGES folder in the 14 hive, and CSS files to the Style Library in the root site of the site collection

15. CSS Registration <SharePoint:CSSRegistration Name=“a.css“ After=“b.css” runat="server" /> Element used to specify CSS files Available in SP2007, but rendering (as “<link rel”) was not consistent Revamped in SP2010 Supports ordering CSS files using “After=“ Supports conditional expressions (“IF IE 8”)

16. Upgrading SP2007 Master Pages Add SP2010 Content Placeholders Add the Server Ribbon Cut and paste HTML code Add controls ScriptManager SPPageManager ScriptLink http://msdn.microsoft.com/en-us/library/ee539981.aspx

17. Example #1- treasury.gov

18. Example #2 - cognifide.com

19. Example #3 – recovery.gov

20. Resources Links Real World Branding with SP2010 Publishing Sites SP2010 Base CSS Classes Themes and Resources for Upgrading a Custom Master Page Blogs Marcy Kellar- http://www.thesharepointmuse.com/sharepoint-2010-branding/ Andrew Connell- http://www.andrewconnell.com Randy Drisgill- http://blog.drisgill.com/ Heather Waterman- http://www.heatherwaterman.com Heather Soloman- http://www.heathersolomon.com/blog Books http://www.amazon.com/Professional-SharePoint-Branding-Interface-Programmer/dp/0470584645

21. Demo…