1 / 29

UX01 A Guided Tour Through  SharePoint  HTML, CSS, and Master Page Resources 

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.

brandy
Download Presentation

UX01 A Guided Tour Through  SharePoint  HTML, CSS, and Master Page Resources 

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. Demo • Customizing SharePoint in the browser

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

  7. SharePoint Style sheets WSS vs MOSS

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

  9. Demo • Customizing SharePoint CSS in SharePoint Designer

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

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

  12. 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)

  13. 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 MOSSUser Interface:

  14. SharePoint Page Layout Content Pages http://myserver Application Pages /_layouts/ application.master Spweb.masterurl .master default.aspx /shared documents/ allitems.aspx /_catalogs/masterpage/ default.master /_layouts/ create.aspx .aspx .aspx .master .aspx GHOSTING SiteTemplates\STS\ default.aspx Pages\ viewpage.aspx Global\ default.master File System Templates \..\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplates

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

  16. Demo • Working with Master pages in SharePoint Designer

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

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

  19. Master Page Cast of Control Characters(in order of appearance) <head>control <SharePoint:CssLink> 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

  20. Master Page Cast of Control Characters <SharePoint:DelegateControl> <head>control Allows for feature-driven, declarative determination of a Child control to render in a page • 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

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

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

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

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

  25. Last Demo • Page Layouts

  26. Summary • Saw how to customize SharePoint using the browser • CSS based customizations • Master page customizations • Page layout build

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

  28. Thank you and Q & A • Don’t forget your evaluation form 

More Related