Customizing The Look And Feel Of SharePoint Sites

1. Microsoft Office SharePoint Server 2007 Customizing The Look And Feel Of SharePoint Sites

2. Customization Levels Change Site Logo, Format, Parts Browser complexity Change Colors, Backgrounds, Fonts Edit CSS files SharePoint Designer • Change Page Layout and Content • Edit Master PagesEdit Page Templates (MOSS only) Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio

3. Tools Overview • Browser for simple edits • Navigation tweaks • Apply a theme • Change a master page (MOSS only) • SharePoint Designer for Page and CSS editing • An evolution from FP2003 • Great page and CSS tools • + IE Developer ToolBar • Visual Studio for XML editing to pull it together • Site definitions • Features • Pages… not so much

4. Customization Levels Change Site Logo, Format, Parts Browser complexity Change Colors, Backgrounds, Fonts Edit CSS files SharePoint Designer • Change Page Layout and Content • Edit Master PagesEdit Page Templates (MOSS only) Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio

5. Browser Customization After • Title and icon Before

6. Browser Customization After • Navigation Before

7. Browser Customization After • Theme Before

8. Browser Customization After • Top Links Before

9. Browser Customization After • Quick Launch Before

10. Browser Customization After • Master Page and CSS Before

11. Customization Options and Their Tools Change Site Logo, Format, Parts Browser complexity Change Colors, Backgrounds, Fonts Edit CSS files SharePoint Designer • Change Page Layout and Content • Edit Master PagesEdit Page Templates (MOSS only) Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio

12. Customizing SharePoint CSS • Modifying a SharePoint stylesheet (in SPD) creates a local copy in the current site • Similar to “unghosting” of template pages • Local copy is used until deleted • Typical SharePoint Master Pages • Either /_layouts/{LocaleId}/styles/core.css or /_styles/core.css • + an additional MOSS “portal.css” • + an additional “AlternateCssUrl” MOSS User Interface

13. Customizing SharePoint CSS Customized Normal _layouts (on disk) _styles (in web) _layouts (on disk) core.css core.css core.css <CssLink/> <CssLink/> default.master default.master

14. CSS Classes in SharePoint

15. Top Navigation Areas ms-globalbreadcrumb ms-globalright ms-globalleft ms-globallinks ms-sitetitle ms-siteaction ms-globalTitleArea ms-siteactionsmenu ms-topNavContainer ms-banner ms-topnav +ms-topNavSelected ms-bannerframe ms-topnav ms-bannerContainer

16. Body Structure ms-titlearealeft ms-pagetitleareaframe ms-titlearearight ms-titleareaframe ms-pagetitle ms-titleareaframe ms-leftareacell ms-navframe ms-pagemargin ms-pagebottommarginright ms-pagebottommargin ms-pagemargin ms-pagebottommarginleft ms-rightareacell ms-bodyareapagemargin

17. Quick Launch ms-quicklaunchouter ms-quickLaunch ms-standardheader ms-navSubMenu1 ms-quicklaunchheader ms-navheader ms-navSubMenu2 ms-navitem ms-recyclebin

18. Page Body ms-bodyareacell ms-pagebreadcrumb ms-propertysheet ms-sitemapdirectional ms-bodyareaframe

19. Web Parts used in edit mode only ms-HoverCellInActive ms-SPZone ms-SPZoneLabel ms-SPButtonms-WPAddButton ms-WPEditText ms-WPHeader ms-standardheaderms-WPTitle ms-HoverCellInActive list view web part only ms-addnew ms-summarycustombody ms-vb

20. List Views ms-listdescription ms-viewselectorhover ms-menutoolbar ms-listheaderlabel ms-toolbar ms-splitbuttonhover ms-vh-icon ms-separator ms-vh2 ms-unselectedtitle ms-vb ms-alternating ms-vb-title ms-unselectedtitle ms-vb2 ms-vb ms-globalTitleArea

21. Forms ms-areaseparatorleft ms-areaseparatorright ms-areaseparator ms-pagetitle ms-titlearea ms-sitemapdirectional ms-formtoolbar ms-toolbar ms-ButtonHeightWidth ms-formtable ms-formlabel ms-formbody ms-formtoolbar ms-toolbar ms-descriptiontext

22. _layouts Landing Pages ms-settingsframe ms-createpageinformation ms-informationtablestatic ms-pageinformation ms-linksectionheader ms-standardheader ms-propertysheet ms-descriptiontext

23. _layouts Form Pages ms-formareaframe ms-propertysheet ms-descriptiontext ms-sectionheader ms-standardheader ms-descriptiontextms-inputformdescription ms-authoringcntrolsms-inputformcontrols

24. CSS FeaturesTips and tricks • Modify any style from a SharePoint stylesheet to trigger customization • Custom CSS file stored in _styles folder in web • Delete to turn off customization • In SPD: • Use filters in Apply Styles taskpane 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, as well!(or Mozilla…)

25. Customization Options and Their Tools Change Site Logo, Format, Parts Browser complexity Change Colors, Backgrounds, Fonts Edit CSS files SharePoint Designer • Change Page Layout and Content • Edit Master PagesEdit Page Templates (MOSS only) Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio

26. Master Page Concepts Master Page “Chrome” (default.master) • One page (master) holds the “chrome” • Many pages point at the Master • Master Page defines “Placeholders” which can be overridden in child page Content Page (default.aspx)

27. Master Page Tokens • Two dynamic tokens • ~masterurl/default.master • spweb.MasterUrl • “System Master Page” in MOSS • ~masterurl/custom.master • spweb.CustomMasterUrl • “Site Master Page” in MOSS • Two static tokens • ~sitecollection/default.master • ~site/default.master MOSS User Interface:

28. SharePoint Page Layout Application Pages Content Pages - http://myserver/ spweb.MasterUrl /_layouts/ application.master /shared documents/ / /_catalogs/masterpage/ .master default.aspx allitems.aspx default.master .aspx .aspx .master /_layouts/ create.aspx “ghosting” Pages\ SiteTemplates\STS Global\ .aspx default.master viewpage.aspx default.aspx File System - \.. \web server extensions\12\

29. Default.masterPlaceholders Default.master contains ~30 placeholders, ~22 of them in the page body All of them must be defined in a replacement master

30. Master Page Customization Two techniques for customizing layout: • Start with a copy of default.master • Remove markup around placeholder • Rebuild in place • Start with a blank master • Build from ground up • Copy placeholders from default.master

31. Master Page Cast of Control Characters(in order of appearance) <SharePoint:CssLink> <head>control Renders path to default CSS file for site, plus spweb.AlternateCssUrl, if specified <SharePoint:Theme> <head>control Renders theme CSS files, if a theme is specified for the site <SharePoint:ScriptLink> <head>control Renders a link to a script file with a date time hash <SharePoint:CustomJSUrl> <head>control Renders a link Custom JavaScript URL defined in onet.xml (if present) <SharePoint:SoapDiscoveryLink> <head>control Renders path to .disco file, which lets clients like VS2005 discover web services on the sever

32. Master Page Cast of Control Characters <SharePoint:DelegateControl> <head>control • Allows swapping of controls via feature • Example: search is basic in WSS, advanced in MOSS • Lower sequence number in feature.xml determines winner Allows for feature-driven, declarative determination of a child control to render in a page • Delegate Controls: • AdditionalPageHead – Free for all • GlobalSiteLink0, 1, 2 – Area at top right of page • SmallSearchInputBox – Search area • TopNavigationDataSource • PublishingConsole • QuickLaunchDataSource

33. Master Page Cast of Control Characters <WebPartPages:SPWebPartManager> nonvisual control 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) <wssuc:Welcome > Provides Welcome <user> dropdown with per-user options. <SharePoint:SiteLogoImage> Renders logo of the site if defined on the web, or the value of the LogoImageUrl property <SharePoint:SPLinkButton>/<SharePoint:ProjectProperty Property="Title“> Renders Title of the Site with a link back to the home page.

34. 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:SPNavigationManager> Manages a left hand navigation control (either the Quick Launch list, or the tree view) <SharePoint:FormDigest> nonvisual control Renders a security hash into the page; needed for performing some updates.

35. Building a minimal.master • A minimal master needs: • All content placeholders • Core CssLink/ScriptLink/RobotsMetaTag • WebPartPages:SPWebPartManager • UI to recover yourself: • Site Actions dropdown • <wssuc:DesignModeConsole> • FormDigest Control

36. Master PagesTips 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

37. WSS Layout Architecture MOSS Layout Architecture tasks/forms/allitems.aspx default.aspx _catalogs/masterpage/default.master gets “chrome” from spweb.MasterUrl gets “layout” from pages/gearsofwar.aspx gets “chrome” from _catalogs/masterpage/game.aspx _catalogs/masterpage/default.master spweb.CustomMasterUrl pages/lostplanet.aspx

38. 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

39. Summary: Customization Options Change Site Logo, Format, Parts Browser complexity Change Colors, Backgrounds, Fonts Edit CSS files SharePoint Designer • Change Page Layout and Content • Edit Master PagesEdit Page Templates (MOSS only) Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio