Developing and Deploying Custom Branding Solutions in SharePoint 2010

  • 3,481 views
Uploaded on

 

More in: Technology
  • 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
No Downloads

Views

Total Views
3,481
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
61
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?
    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)
  • 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="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>
  • 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…