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