developing and deploying custom branding solutions in sharepoint 2010
DESCRIPTION
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 Files\Common Files\Microsoft
Shared\14\Template\Global 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 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
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
Photoshop Image creation/manipulation, color selection
GIMP Image creation/manipulation, color selection
Notepad
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
OR
WSP solution deployment to the Site or Farm solution store Followed by an automated application via a
Feature
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
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
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="masterpage\MyCustomPageLayout.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 ScriptManager SPPageManager ScriptLink
http://msdn.microsoft.com/en-us/library/ee539981.aspx
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server">
The top of the Quick Launch menu.
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">
The bottom of the Quick Launch menu.
Example #1- treasury.gov
Example #2 - cognifide.com
Example #3 – recovery.gov
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
Demo…