UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
-
Upload
chandima-kulathilake -
Category
Technology
-
view
1.622 -
download
2
description
Transcript of UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
![Page 1: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/1.jpg)
![Page 2: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/2.jpg)
UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server)
http://www.chandima.net/Blog/
Provoke Solutions, New Zealand
![Page 3: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/3.jpg)
Session Objectives
• Learn about options available to you for customising SharePoint
• Learn about the CSS elements in SharePoint and how to change these to customise sites
• Learn how to create and modify existing master pages
• Learn about page layouts
![Page 4: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/4.jpg)
Customization Options and Their Tools
Change Site Logo, Format, PartsChange Site Logo, Format, Parts
Change Colors, Backgrounds, Fonts Edit CSS filesChange Colors, Backgrounds, Fonts Edit CSS files
Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)
Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)
Share Your Customization with Others Build Themes and Site DefinitionsShare Your Customization with Others Build Themes and Site Definitions
easy
Browser
SharePoint Designer
SPD + Visual Studio
complex
![Page 5: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/5.jpg)
Customization Options and Their ToolsBrowser based customizations
• Change the site logo
• Change the site web part layouts or add some new web parts
• Change the “Quick Launch” navigation
• Change or add a new tab navigation element
• Apply a new “theme”
• And if the site is based on MOSS you can apply new “chrome” from the existing master page gallery
![Page 6: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/6.jpg)
Demo
• Customizing SharePoint in the browser
![Page 7: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/7.jpg)
Customization Options and Their ToolsSharePoint Designer based customizations
• Modify default style sheets and create new style sheets
• Create and Edit master pages
• Create Publishing Page Layouts
![Page 8: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/8.jpg)
SharePoint Style sheets WSS vs MOSS
![Page 9: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/9.jpg)
Customizing SharePoint CSS
core.css
_layouts (on disk)
default.master
Normal
<CssLink/>
core.css
_layouts (on disk)
default.master
core.css
_styles (in web)
Customized
<CssLink/>
![Page 10: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/10.jpg)
Demo
• Customizing SharePoint CSS in SharePoint Designer
![Page 11: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/11.jpg)
CSS Tips and Tricks
• Modify any style from a SharePoint style sheet to trigger customization
– Custom CSS file (core.css) stored in _styles folder in web– Delete to turn off customization
• In SharePoint Designer:– Use filters in Apply Styles task pane to see just the styles
used by the current page or selection– Use CSS Property Grid to analyze overrides– Use the Summary mode in CSS Property Grid to view only
the set properties– Use IE Developer Toolbar or Mozilla
![Page 12: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/12.jpg)
Customization Options and Their Tools
Change Site Logo, Format, PartsChange Site Logo, Format, Parts
Change Colors, Backgrounds, Fonts Edit CSS filesChange Colors, Backgrounds, Fonts Edit CSS files
Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)
Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)
Share Your Customization with Others Build Themes and Site DefinitionsShare Your Customization with Others Build Themes and Site Definitions
complexity
Browser
SharePoint Designer
SPD + Visual Studio
![Page 13: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/13.jpg)
Master page concepts• One page (master)
holds the “chrome”
• Many pages point at the Master
• Master Page defines “Placeholders” which can be overridden in child page
Master Page “Chrome” Master Page “Chrome” (default.master)(default.master)
Content Page Content Page (default.aspx)(default.aspx)
![Page 14: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/14.jpg)
Master page tokens• Two dynamic tokens
– ~masterurl/default.master
•spweb.MasterUrl•“System Master Page” in MOSS
(For App Pages)– ~masterurl/custom.master
•spweb.CustomMasterUrl•“Site Master Page” in MOSS
(For Sites)
• Two static tokens– ~sitecollection/default.master– ~site/default.master
MOSS User Interface:
![Page 15: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/15.jpg)
SharePoint Page Layout
Spweb.masterurl
default.aspx
/shared documents/
allitems.aspx/_catalogs/masterpage/
default.master
.aspx .aspx .master
Content Pageshttp://myserver
File System Templates\..\Common Files\Microsoft Shared\web server extensions\12\
TEMPLATE\SiteTemplates
SiteTemplates\STS\
default.aspxPages\
viewpage.aspxGlobal\
default.master
Application Pages
/_layouts/
application.master
.master
/_layouts/
create.aspx
.aspx
![Page 16: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/16.jpg)
Default.masterPlaceholders
Default.master contains ~30 placeholders, ~22 of them in the page body
All of them must be defined in a replacement master
![Page 17: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/17.jpg)
Demo
• Working with Master pages in SharePoint Designer
![Page 18: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/18.jpg)
Master Page Customization
Two techniques for customizing layout:1. Start with a copy of default.master
• Remove markup around placeholder• Rebuild in place
2. Start with a blank or minimal master page
• Build from ground up• Copy placeholders from default.master or• Minimal.master page available to download from MSDN• http://msdn2.microsoft.com/en-us/library/aa660698.aspx
![Page 19: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/19.jpg)
MOSS Layout Architecture
default.aspxdefault.aspxdefault.aspxdefault.aspx gets “chrome” fromtasks/forms/tasks/forms/allitems.aspxallitems.aspxtasks/forms/tasks/forms/allitems.aspxallitems.aspx
pages/pages/gearsofwar.aspxgearsofwar.aspxpages/pages/gearsofwar.aspxgearsofwar.aspx
pages/pages/lostplanet.aspxlostplanet.aspxpages/pages/lostplanet.aspxlostplanet.aspx
gets “layout” from_catalogs/masterpage/_catalogs/masterpage/game.aspxgame.aspx_catalogs/masterpage/_catalogs/masterpage/game.aspxgame.aspx
_catalogs/masterpage/_catalogs/masterpage/default.masterdefault.master_catalogs/masterpage/_catalogs/masterpage/default.masterdefault.master
gets “chrome” from
_catalogs/masterpage/_catalogs/masterpage/default.masterdefault.master_catalogs/masterpage/_catalogs/masterpage/default.masterdefault.master
spweb.MasterUrl
spweb.CustomMasterUrl
WSS Layout Architecture
![Page 20: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/20.jpg)
Master Page Cast of Control Characters(in order of appearance)<SharePoint:CssLink>
Renders path to default CSS file for site, plus spweb.AlternateCssUrl, if specified
<SharePoint:Theme>
Renders theme CSS files, if a theme is specified for the site<SharePoint:ScriptLink>Renders a link to a script file with a date time hash
<head>control
<head>control
<head>control
<SharePoint:CustomJSUrl>Renders a link Custom JavaScript URL defined in onet.xml (if present)
<head>control
<SharePoint:SoapDiscoveryLink>
Renders path to .disco file, which lets clients like VS2005 discover web services on the sever
<head>control
![Page 21: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/21.jpg)
<SharePoint:DelegateControl>Allows for feature-driven, declarative determination of a Child control to render in a page
<head>control
Master Page Cast of Control Characters
• Allows swapping of controls via feature– Example:
search is basic in WSS, advanced in MOSS– Lower sequence number in feature.xml determines winner
• Delegate Controls:• AdditionalPageHead – Free for all• GlobalSiteLink0, 1, 2 – Area at top right of page• SmallSearchInputBox – Search area• TopNavigationDataSource• PublishingConsole• QuickLaunchDataSource
![Page 22: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/22.jpg)
<WebPartPages:SPWebPartManager>Enables web part framework on MasterPages. WebPartManagers should generally always be defined in master pages.
<asp:SiteMapPath id="GlobalNavigationSiteMap" >Provides top navigation breadcrumb. Connects to SPSiteMapProvider (also used for page breadcrumb)
nonvisual control
<wssuc:Welcome >Provides Welcome <user> dropdown with per-user options.
<SharePoint:SPLinkButton>/<SharePoint:ProjectProperty Property="Title“>
Renders Title of the Site with a link back to the home page.
<SharePoint:SiteLogoImage>Renders logo of the site if defined on the web, or the value of the LogoImageUrl property
Master Page Cast of Control Characters
![Page 23: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/23.jpg)
<SharePoint:AspMenu ID="TopNavigationMenu"Displays top navigation “tabs”.
<SharePoint:SiteActions>Renders the SiteActions dropdown. Note that the SiteActions dropdown
can be extended via ‘features’ or directly in page.
<wssuc:DesignModeConsole >In edit mode, shows the editing status of the page and provides an Exit Edit Mode button.
<SharePoint:FormDigest>Renders a security hash into the page; needed for performing some updates.
<SharePoint:SPNavigationManager>Manages a left hand navigation control (either the Quick Launch list, or the tree view)
nonvisual control
Master Page Cast of Control Characters
![Page 24: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/24.jpg)
Master Pages Tips and Tricks
• Toggle Visual Aids off for WYSIWYG view– Collapses empty placeholders
• Split view is your friend– Select in Design view, see source in Code view
• Use Master Page toolbar to select placeholders by name
• Use Tag Toolbar to diagnose hierarchy and make tricky selections
• Safety net:– Use Version History command to roll back– Use Revert command to get back to original master
from site def
![Page 25: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/25.jpg)
Customizing Page LayoutsOffice SharePoint Server
• Design for Publishing Pages is simple:– Browser UI for entering content (authors)– SharePoint Designer for creating/editing new Page Layouts
(designers)
• Like ghosting, but inside the content DB• Special entry point in SharePoint Content section of
File : New dialog when Publishing feature is activated• Special Toolbox categories appear when editing a Page
Layout
![Page 26: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/26.jpg)
Last Demo
• Page Layouts
![Page 27: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/27.jpg)
Summary
• Saw how to customize SharePoint using the browser
• CSS based customizations
• Master page customizations
• Page layout build
![Page 28: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/28.jpg)
Resources• My blog – presentation deck files and samples will be
available for download– http://www.chandima.net/Blog/– http://blogs.provoke.co.nz/Ari– http://blogs.provoke.co.nz/Zac
• SharePoint Designer Team Blog– http://blogs.msdn.com/sharepointdesigner/
• SharePoint Team Blog– http://blogs.msdn.com/sharepoint
• SharePoint Developer Portal on MSDN– http://msdn2.microsoft.com/en-us/office/aa905503.aspx
• SharePoint Community Portal– http://sharepoint.microsoft.com/sharepoint/default.aspx
![Page 29: UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007](https://reader034.fdocuments.in/reader034/viewer/2022042814/554bec8bb4c90556328b5105/html5/thumbnails/29.jpg)
Thank you and Q & A
• Don’t forget your evaluation form