Presentation is loading. Please wait.

Presentation is loading. Please wait.

UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server)

Published byRalf Barrett Modified over 9 years ago

Similar presentations

Presentation on theme: "UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server)"— Presentation transcript:

1

2 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

3 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

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

5 Customization Options and Their Tools Browser 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

6 Demo Customizing SharePoint in the browser

7 Customization Options and Their Tools SharePoint Designer based customizations Modify default style sheets and create new style sheets Create and Edit master pages Create Publishing Page Layouts

8 SharePoint Style sheets WSS vs MOSS

9 Customizing SharePoint CSS core.css _layouts (on disk) default.master Normal core.css _layouts (on disk) default.master core.css _styles (in web) Customized

10 Demo Customizing SharePoint CSS in SharePoint Designer

11 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

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

13 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)

14 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:

15 SharePoint Page Layout Spweb.masterurl default.aspx /shared documents/ allitems.aspx /_catalogs/masterpage/ default.master.aspx.master Content Pages http://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.master.master /_layouts/ create.aspx.aspx

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

17 Demo Working with Master pages in SharePoint Designer

18 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

19 MOSS Layout Architecture default.aspxdefault.aspx gets “chrome” from tasks/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

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

21 Allows for feature-driven, declarative determination of a Child control to render in a page 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

22 Enables web part framework on MasterPages. WebPartManagers should generally always be defined in master pages. Provides top navigation breadcrumb. Connects to SPSiteMapProvider (also used for page breadcrumb) nonvisual control Provides Welcome dropdown with per-user options. / Renders Title of the Site with a link back to the home page. Renders logo of the site if defined on the web, or the value of the LogoImageUrl property Master Page Cast of Control Characters

23 <SharePoint:AspMenu ID="TopNavigationMenu" Displays top navigation “tabs”. Renders the SiteActions dropdown. Note that the SiteActions dropdown can be extended via ‘ features’ or directly in page. In edit mode, shows the editing status of the page and provides an Exit Edit Mode button. Renders a security hash into the page; needed for performing some updates. Manages a left hand navigation control (either the Quick Launch list, or the tree view) nonvisual control Master Page Cast of Control Characters

24 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

25 Customizing Page Layouts Office 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

26 Last Demo Page Layouts

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

28 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

29 Thank you and Q & A Don’t forget your evaluation form

Download ppt "UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server)"

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Learn the techniques to create a SharePoint 2010 web site from an existing branded web site.

Learn the techniques to create a SharePoint 2010 web site from an existing branded web site.
FINAL REVIEW Carley. Contents Unit A: Understanding Essential Computer Concepts Unit B: Getting Started wit Mac OS X Leopard Unit C: Understanding File.

FINAL REVIEW Carley. Contents Unit A: Understanding Essential Computer Concepts Unit B: Getting Started wit Mac OS X Leopard Unit C: Understanding File.
Microsoft Office 2007: Introductory Computer Applications 11.

Microsoft Office 2007: Introductory Computer Applications 11.
Using a Template to Create a Resume and Sharing a Finished Document

Using a Template to Create a Resume and Sharing a Finished Document
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.

XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber.

How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber.
1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
1 of 6 SharePoint sites share much of the same underlying functionality, and most can be customized using the same techniques. So whether you have a basic.

1 of 6 SharePoint sites share much of the same underlying functionality, and most can be customized using the same techniques. So whether you have a basic.
1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
1 Introduction to OBIEE: Learning to Access, Navigate, and Find Data in the SWIFT Data Warehouse Lesson 5: Navigation in OBIEE – Touring the Catalog Page.

1 Introduction to OBIEE: Learning to Access, Navigate, and Find Data in the SWIFT Data Warehouse Lesson 5: Navigation in OBIEE – Touring the Catalog Page.
Developing Branding Solutions for 2013 Thomas Daly,

Developing Branding Solutions for 2013 Thomas Daly,
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
WikiPlus customizations

WikiPlus customizations
Windows SharePoint Services (Part 2) including Enterprise Search David Gristwood James Akrigg Microsoft Limited.

Windows SharePoint Services (Part 2) including Enterprise Search David Gristwood James Akrigg Microsoft Limited.
1 Agenda Overview Review Roles Lists Libraries Columns.

1 Agenda Overview Review Roles Lists Libraries Columns.
Branding SharePoint 2007 March 19, 2008 Lori Neff, SharePoint Designer.

Branding SharePoint 2007 March 19, 2008 Lori Neff, SharePoint Designer.
Pasewark & Pasewark 1 Word Lesson 8 Increasing Efficiency Using Word Microsoft Office 2007: Introductory.

Pasewark & Pasewark 1 Word Lesson 8 Increasing Efficiency Using Word Microsoft Office 2007: Introductory.
Working with SharePoint Document Libraries. What are document libraries? Document libraries are collections of files that you can share with team members.

Working with SharePoint Document Libraries. What are document libraries? Document libraries are collections of files that you can share with team members.
A GUIDE TO SHAREPOINT 2007 CUSTOMIZATION OPTIONS Heather Solomon, WSS MVP.

A GUIDE TO SHAREPOINT 2007 CUSTOMIZATION OPTIONS Heather Solomon, WSS MVP.

Similar presentations

Ads by Google