Branding SharePoint 2007

March 19, 2008Lori Neff, SharePoint Designer

• Presentation will be posted tomorrow on http://www.sharepointmn.com

• SharePoint User Group (MNSPUG)– Second Wednesday of every month– Next meeting is April 9

• Branding SharePoint blog– http://www.brandingsharepoint.com

Challenges of Branding SharePoint

• Consistency

• Audience expectations

• Audience needs

• Internal buy-off of SharePoint

• Security; anonymous access vs. forms authorization

• Content Editing experience

Simple and Advanced options

• Simple OOB customization• Update Logo• Apply a Theme• Adding web parts• Choose a different

OOB Master Page

• More advanced customization• Master Pages• Layout pages• Creating custom

themes• CSS

Simple OOB customization demonstration

• Update site with logo• Change site theme• Choose different Master Page Template

• Other master page templates are available for download

• Views in libraries• Content editor web part (inline styling)

Page Rendering

Global Navigation

Navigation

Logo

Content

Title

Search

Global Navigation

Navigation

Logo Search

Title

WebPart Zone

Content

WebPart Zone

Master Page .aspx Page Layout Rendered SharePoint Site Page

+ +

Tools

• IE Developer Toolbar (free, from Microsoft) (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en)

• FireFox Firebug (free)• InstantSource• SharePoint Designer

Advance Customization: Master Pages

• What is a Master page?• Navigation• Logos• Search box• Login control• Editing controls• CSS References• Content Regions

<SharePoint:HighlightMenu …><PublishingNavigation:PortalSiteMapDataSource …>

<SPSWC:RightBodySectionSearchBox …>

<link rel=“stylesheet” …>

<IMG …><asp:LoginStatus …>

<SharePoint:SiteActions …>

Advanced Customization: Working with CSS

• There are 26 style sheets used in SharePoint• Majority located on server:

• Server Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

• Some located in Style Library (accessible via SPD)

• Editing core.css is NOT recommended• Core.css will load last, unless you specify your

custom css in Site Settings, or override the css in the master page

ms-globalbreadcrumb

ms-globalTitleArea

ms-sitetitle

ms-globallinks

ms-globalrightms-globalleft

ms-siteaction

ms-siteactionsmenu

ms-bannerContainer

ms-bannerframe

ms-banner

ms-topNavContainer

ms-topnav

ms-topnav +ms-topNavSelected

Advance Customization: Custom Theme

• Does NOT require SharePoint Designer• Themes can be found on the server in:

• Server Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\[Theme Name]

• Copy folder, rename• Rename .INF file, change theme names in .INF file• Modify theme.css with design changes• Store preview of theme in TEMPLATE\IMAGES• Modify TEMPLATE\Layouts\1033\spthemes.xml

Advance Customization: Layout Pages

• What is a Layout Page?• Template for content• Based on a content type

• Holds:• Field controls• Web Parts• Web Part Zones• Custom CSS, in-line styles

• Careful when editing; don’t rely on “Reset to Site Definition”; make a backup first

Advance Customization: Layout Pages

• Override content placeholders• Add web part zones

• Configure web part zones• Add web parts

• Either in or out of web part zones• Insert content fields

• Configure content fields• If need more content fields, will need to create a new

content type• Pages based upon a page layout will be able to switch to

another page layout that uses the same content type as the original page layout

Advance Customization: Content Editor WP Styles

• If NOT using theme: edit HTML Editor CSS• Make a copy from the server, save in Style Library• Add styles (prefix with “.ms-rteCustom-”;

e.g., .ms-rteCustom-FabrikamTitle)• Register css in master page• New styles will appear in Content Editor Style

dropdown• If you are using a theme, you can add the styles you

like into your theme’s css file.

Advance Customization: Search Results

• Create new page

• Use Search Results Page Layout (this page layout can be customized if the layout needs to be changed)

• Or create your own custom search results page

• Customize new page

• Search control

• Search results xslt

• Go to Site Settings, Search Settings and point to this new page

Advance Customization: Search Control

• Modify CSS• Import customized search control from search results page

• On search results page, customize the search control, then export the web part

• Import web part into master page• More difficult to customize from the master page since it is a

web part• Modify search results control properties

• Copy search control from blueband.master• Register control• Modify tag properties of control

Customized vs. Uncustomized

• “Ghosted” and “Unghosted pages”

• Performance impact of ~10%

Page requestPage

request

Customized?Customized?

Retrieve customized

page from db

Retrieve customized

page from db

Retrieve shared template from

file system

Retrieve shared template from

file system

Merge rendered web parts and

return to browser

Merge rendered web parts and

return to browser

Yes No

Resources

• Branding SharePoint – http://brandingsharepoint.com

• How to Create a Minimal Master Page– http://msdn2.microsoft.com/en-us/library/aa660698.aspx

• Customizing SharePoint Sites and Portals– http://msdn2.microsoft.com/en-us/library/ms916801.aspx

• Design and Build Sites for Office SharePoint Server 2007 (sort of a best practices from Microsoft)

– http://technet.microsoft.com/en-us/library/cc261852.aspx

• Comparison of MOSS vs. WSS– http://office.microsoft.com/en-us/sharepointtechnology/FX101758691033.aspx?ofcress

et=1

• Accessibility– http://www.21apps.com/2007/03/sharepoint-accessibility-is-moss-2007_4974.html

Resources

• Real World SharePoint: Indispensable

Experiences from 16 MOSS and WSS MVPs– ISBN 0470168358

– 478 pages

• Microsoft Office SharePoint Designer 2007

Step by Step– ISBN 0735625336

– 400 pages

• Translation– http://go.microsoft.com/fwlink/?LinkId=79322