Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sessions
Developing and Deploying Custom Branding Solutions in SharePoint 2010
-
Upload
jhendrix88 -
Category
Technology
-
view
4.161 -
download
4
description
Transcript of Developing and Deploying Custom Branding Solutions in SharePoint 2010
![Page 1: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/1.jpg)
DEVELOPING AND DEPLOYING CUSTOM BRANDING SOLUTIONS IN SHAREPOINT 2010
By: Ajay Nayak
Cap Area .NET SharePoint Special Interest Group
![Page 2: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/2.jpg)
About Me
SharePoint jack of all trades (Developer, Admin, Architect)
4 years of SharePoint experience Booz Allen Hamilton Twitter: @ajaynayak
![Page 3: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/3.jpg)
Anatomy of a SP2010 Master Page
Header and Ribbon Left navigation (Quick Launch) Content Placeholders
![Page 4: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/4.jpg)
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)
![Page 5: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/5.jpg)
UI Changes in SharePoint 2010 Server Ribbon
Rich AJAX interactions Dubbed “Fluent UI”
Placement of controls Site Actions, Edit Page, Search, etc.
![Page 6: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/6.jpg)
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
![Page 7: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/7.jpg)
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
![Page 8: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/8.jpg)
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
![Page 9: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/9.jpg)
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
![Page 10: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/10.jpg)
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
![Page 11: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/11.jpg)
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
![Page 12: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/12.jpg)
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
![Page 13: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/13.jpg)
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>
![Page 14: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/14.jpg)
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
![Page 15: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/15.jpg)
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”)
![Page 16: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/16.jpg)
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.
![Page 17: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/17.jpg)
Example #1- treasury.gov
![Page 18: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/18.jpg)
Example #2 - cognifide.com
![Page 19: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/19.jpg)
Example #3 – recovery.gov
![Page 20: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/20.jpg)
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
![Page 21: Developing and Deploying Custom Branding Solutions in SharePoint 2010](https://reader034.fdocuments.net/reader034/viewer/2022051609/5479da31b379597b2b8b4883/html5/thumbnails/21.jpg)
Demo…