• Like
  • Save
Developing and Deploying Custom Branding Solutions in SharePoint 2010
Upcoming SlideShare
Loading in...5

Developing and Deploying Custom Branding Solutions in SharePoint 2010






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Nice presentation. Let me introduce you Bind Tuning http://bindtuning.com 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
    Your message goes here
Post Comment
Edit your comment

    Developing and Deploying Custom Branding Solutions in SharePoint 2010 Developing and Deploying Custom Branding Solutions in SharePoint 2010 Presentation Transcript

    • Developing and Deploying Custom Branding Solutions in SharePoint 2010
      By: Ajay Nayak
      Cap Area .NET SharePoint Special Interest Group
    • About Me
      SharePoint jack of all trades (Developer, Admin, Architect)
      4 years of SharePoint experience
      Booz Allen Hamilton
      Twitter: @ajaynayak
    • Anatomy of a SP2010 Master Page
      Header and Ribbon
      Left navigation (Quick Launch)
      Content Placeholders
    • Where are they stored?
      Global directory in the 12 or 14 hive
      Located on the web front end (WFE) server
      C:Program FilesCommon FilesMicrosoft Shared14TemplateGlobal
      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)
    • UI Changes in SharePoint 2010
      Server Ribbon
      Rich AJAX interactions
      Dubbed “Fluent UI”
      Placement of controls
      Site Actions, Edit Page, Search, etc.
    • Out-of-the-box Master Pages
      SP2010 Team Site master page
      User content pages
      Search and Office Web Applications
      No site navigation or ribbon
      For error and login pages
      Not customizable
      Included for backwards compatibility (SP2007)
      No ribbon or AJAX interactions
    • 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
    • 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
      Image creation/manipulation, color selection
      Image creation/manipulation, color selection
    • 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
    • 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
      WSP solution deployment to the Site or Farm solution store
      Followed by an automated application via a Feature
    • Elements in a Master Page Solution
      Group of files to be provisioned
      .master files, CSS files, images
      Elements.xml file specifies where file will be provisioned to
      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
    • 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
    • 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="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>
    • 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
    • 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”)
    • Upgrading SP2007 Master Pages
      Add SP2010 Content Placeholders
      Add the Server Ribbon
      Cut and paste HTML code
      Add controls
    • Example #1- treasury.gov
    • Example #2 - cognifide.com
    • Example #3 – recovery.gov
    • Resources
      Real World Branding with SP2010 Publishing Sites
      SP2010 Base CSS Classes
      Themes and Resources for Upgrading a Custom Master Page
      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
    • Demo…