Developing and Deploying Custom Branding Solutions in SharePoint 2010


Published on

Published in: Technology
1 Comment
1 Like
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Developing and Deploying Custom Branding Solutions in SharePoint 2010

  1. 1. Developing and Deploying Custom Branding Solutions in SharePoint 2010<br />By: Ajay Nayak<br />Cap Area .NET SharePoint Special Interest Group<br />
  2. 2. About Me<br />SharePoint jack of all trades (Developer, Admin, Architect)<br />4 years of SharePoint experience<br />Booz Allen Hamilton<br />Twitter: @ajaynayak<br />
  3. 3. Anatomy of a SP2010 Master Page<br />Header and Ribbon<br />Left navigation (Quick Launch)<br />Content Placeholders<br />
  4. 4. Where are they stored?<br />Global directory in the 12 or 14 hive<br />Located on the web front end (WFE) server<br />C:Program FilesCommon FilesMicrosoft Shared14TemplateGlobal<br />Pointer to 12/14 hive is stored in the Master Page Gallery<br />Master Page Gallery in a Site Collection<br />Located in the content database (database server)<br />
  5. 5. UI Changes in SharePoint 2010<br />Server Ribbon<br />Rich AJAX interactions<br />Dubbed “Fluent UI”<br />Placement of controls<br />Site Actions, Edit Page, Search, etc.<br />
  6. 6. Out-of-the-box Master Pages<br />V4.master<br />SP2010 Team Site master page<br />User content pages<br />Minimal.master<br />Search and Office Web Applications<br />No site navigation or ribbon<br />Simple.master<br />For error and login pages<br />Not customizable<br />Default.master<br />Included for backwards compatibility (SP2007)<br />No ribbon or AJAX interactions<br />
  7. 7. Compatibility Improvements<br />Improved HTML markup<br />DIVs for content instead of TABLEs (for the most part)<br />More W3c XHTML compliant<br />Better browser support<br />Doc Types and CSS standards<br />IE 7-9, Firefox 3.6+, Safari 4.04+<br />IE 6 NOT supported<br />
  8. 8. Development Tools<br />SharePoint Designer 2010<br />WYSIWYG, ASP/HTML/CSS code, deployment<br />Visual Studio 2010<br />ASP/HTML/CSS code, solution development, deployment<br />IE Developer Toolbar<br />Debugging, identifying CSS elements<br />Photoshop<br />Image creation/manipulation, color selection<br />GIMP<br />Image creation/manipulation, color selection<br />Notepad<br />
  9. 9. SharePoint Development in VS2010<br />SharePoint 2010 item templates<br />Web Part, Workflow, Module, Content Type, List Definition, etc<br />Automated build and deployment<br />File references and Modules (sets of files)<br />Once files are added to the solution, references automatically appear in the element files<br />Modules are automatically added to Feature elements<br />Sandboxed solutions<br />Live in the site collection<br />Can be run by site administrators<br />Can only manipulate a subset of objects in the SP object model<br />Performance an be throttled<br />
  10. 10. Master Page Deployment Options<br />Manual deployment to the Master Page Gallery<br />Followed by a manual application of the master page<br />Does not require Visual Studio<br />OR<br />WSP solution deployment to the Site or Farm solution store<br />Followed by an automated application via a Feature<br />
  11. 11. Elements in a Master Page Solution<br />Module<br />Group of files to be provisioned<br />.master files, CSS files, images<br />Elements.xml file specifies where file will be provisioned to<br />Feature<br />Facilitate the provisioning/de-provisioning of master pages<br />Event Receiver<br />Piece of code that runs when feature is activated<br />Can be used to apply the master page to sites<br />
  12. 12. Where to start<br />Start with a copy of V4.master (or minimal.master if you do not need the ribbon or top nav)<br />Create a new CSS file, and copy/paste the elements that you wish to modify from COREV4.css <br />Create a module for the CSS files and master page file<br />CSS files should be provisioned to the Style Library or to the 14 hive<br />Master pages should be provisioned to the Master Page Gallery or to the 14 hive<br /><br />
  13. 13. Custom Page Layouts<br />You can make copies of default page layouts (Welcome page, Blank web part page, etc), and customize them<br />Layout files should be provisioned to the Master Page Gallery (_catalogs/masterpage)<br />Example Module declaration in Elements.xml file:<br /><Module Name="masterpage" Url="_catalogs/masterpage"><File Path="masterpageMyCustomPageLayout.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><br />
  14. 14. Images and Styles<br />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)<br />Provisioning to a library<br />Advantages: Site admins can easily modify files<br />Disadvantages: Each page load will require calls to the DB for the images and styles<br />Provisioning to the 14 hive<br />Advantages: WFE server can cache file for faster loading<br />Disadvantages: Modification of files will require another deployment, or access to the 14 hive in the WFE<br />Personal recommendation<br />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<br />
  15. 15. CSS Registration<br /><SharePoint:CSSRegistration Name=“a.css“ After=“b.css” runat="server" /><br />Element used to specify CSS files<br />Available in SP2007, but rendering (as “<link rel”) was not consistent<br />Revamped in SP2010<br />Supports ordering CSS files using “After=“<br />Supports conditional expressions (“IF IE 8”)<br />
  16. 16. Upgrading SP2007 Master Pages<br />Add SP2010 Content Placeholders<br />Add the Server Ribbon<br />Cut and paste HTML code<br />Add controls<br />ScriptManager<br />SPPageManager<br />ScriptLink<br /><br />
  17. 17. Example #1-<br />
  18. 18. Example #2 -<br />
  19. 19. Example #3 –<br />
  20. 20. Resources<br />Links<br />Real World Branding with SP2010 Publishing Sites<br />SP2010 Base CSS Classes<br />Themes and Resources for Upgrading a Custom Master Page<br />Blogs<br />Marcy Kellar-<br />Andrew Connell-<br />Randy Drisgill-<br />Heather Waterman-<br />Heather Soloman-<br />Books<br /><br />
  21. 21. Demo…<br />