1. Branding SharePoint 2007 March 19, 2008 Lori Neff, SharePoint Designer

2. Presentation will be posted tomorrow on http://www.sharepointmn.com http://www.sharepointmn.com SharePoint User Group (MNSPUG) –Second Wednesday of every month –Next meeting is April 9 Branding SharePoint blog –http://www.brandingsharepoint.comhttp://www.brandingsharepoint.com

3. Challenges of Branding SharePoint Consistency Audience expectations Audience needs Internal buy-off of SharePoint Security; anonymous access vs. forms authorization Content Editing experience

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

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

6. Page Rendering

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

8. Advance Customization: Master Pages What is a Master page? Navigation Logos Search box Login control Editing controls CSS References Content Regions <PublishingNavigation: PortalSiteMapDataSource …> <SPSWC: RightBodySectionSearchBox …>

9. 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\103 3\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

10. ms-globalbreadcrumb ms-globalTitleArea ms-sitetitle ms-globallinks ms-globalright ms-globalleft ms-siteaction ms-siteactionsmenu ms-bannerContainer ms-bannerframe ms-banner ms-topNavContainer ms-topnav ms-topnav + ms-topNavSelected

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

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

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

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

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

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

17. Customized vs. Uncustomized “Ghosted” and “Unghosted pages” Performance impact of ~10% Page request Customized? Retrieve customized page from db Retrieve shared template from file system Merge rendered web parts and return to browser YesNo

18. Resources Branding SharePoint –http://brandingsharepoint.comhttp://brandingsharepoint.com How to Create a Minimal Master Page –http://msdn2.microsoft.com/en-us/library/aa660698.aspxhttp://msdn2.microsoft.com/en-us/library/aa660698.aspx Customizing SharePoint Sites and Portals –http://msdn2.microsoft.com/en-us/library/ms916801.aspxhttp://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.aspxhttp://technet.microsoft.com/en-us/library/cc261852.aspx Comparison of MOSS vs. WSS –http://office.microsoft.com/en- us/sharepointtechnology/FX101758691033.aspx?ofcresset=1http://office.microsoft.com/en- us/sharepointtechnology/FX101758691033.aspx?ofcresset=1 Accessibility –http://www.21apps.com/2007/03/sharepoint-accessibility-is-moss-2007_4974.htmlhttp://www.21apps.com/2007/03/sharepoint-accessibility-is-moss-2007_4974.html

19. 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=79322http://go.microsoft.com/fwlink/?LinkId=79322