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, Parts

Change Colors, Backgrounds, Fonts Edit CSS files

Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others Build Themes and Site Definitions

easyBrowser

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, Parts

Change Colors, Backgrounds, Fonts Edit CSS files

Change Page Layout and ContentEdit Master PagesEdit Page Templates (MOSS only)

Share Your Customization with Others Build Themes and Site Definitions

complexityBrowser

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” (default.master)

Content Page (default.aspx)

Master page tokens• Two dynamic tokens

– ~masterurl/default.master• spweb.MasterUrl• “System Master Page” in MOSS

(For System 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.aspx

Pages\

viewpage.aspx

Global\

default.master

Application Pages

/_layouts/application.mas

ter.master

/_layouts/create.aspx

.aspxGHOSTING

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 CustomizationTwo 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.aspx gets “chrome” fromtasks/forms/allitems.aspx

pages/gearsofwar.aspx

pages/lostplanet.aspx

gets “layout” from

_catalogs/masterpage/game.aspx

_catalogs/masterpage/default.master

gets “chrome” from

_catalogs/masterpage/default.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