Branding SharePoint 2007 March 19, 2008 Lori Neff, SharePoint Designer
Dec 23, 2015
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