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
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
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
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
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
Demo
• Customizing SharePoint in the browser
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
SharePoint Style sheets WSS vs MOSS
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/>
Demo
• Customizing SharePoint CSS in SharePoint Designer
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
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
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)
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:
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
Default.masterPlaceholders
Default.master contains ~30 placeholders, ~22 of them in the page body
All of them must be defined in a replacement master
Demo
• Working with Master pages in SharePoint Designer
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
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
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
<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
<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
<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
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
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
Last Demo
• Page Layouts
Summary
• Saw how to customize SharePoint using the browser
• CSS based customizations
• Master page customizations
• Page layout build
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
Thank you and Q & A
• Don’t forget your evaluation form