This is the presentation I gave at SharePoint Saturday Sydney, Microsoft, on 8th August, 2009.

1. SharePoint Kathy Hughes SharePoint Server MVP Sydney, Australia Icon by http://dryicons.com

2. Agenda Main SharePoint Branding Components Master Pages/CSS Combo versus Themes When, How and Why Some Cool Tricks Design Considerations in SharePoint Sites Best Practices around Deploying Customizations

3. What is SharePoint Branding? Add your identity Colours, themes, pictures, company/people logos, images Eye candy Adequately surface the primary information It’s about content too and how information is represented! It’s not SharePoint but it’s SharePoint under the hood Looks great with all the great content management features, etc. Make your site ‘look loved’ See http://www.wssdemo.com/Pages/websites.aspx for some great examples of publicly hosted SharePoint sites

6. Designing MOSS and WSS Different in terms of Branding Experience WSS (standalone), e.g. http://sitename/default.aspx No OOB publishing Features Document management, team collaboration Limited UI customization Common in hosted solutions (cheaper option for small businesses and individuals) and intranets MOSS, e.g. http://sitename/pages/default.aspx Publishing Features and Infrastructure UI Customization experience, inheritance A more robust solution for internet/public facing sites Enterprise level features, e.g. business intelligence features, workflows, search

7. Some Design Tools(scenarios) In-browser tools – content authors, Information Workers SharePoint Designer – Web designers Visual Studio 2005/2008 with SharePoint Extensions IE developer toolbars (client-side discovery) Firefox firebug Expression Suite 3 - Designers SketchFlow in Blend 3 great takeaway prototyping tool! Silverlight Browser emulators for x-browser testing CSS / Web page validators (W3C) Web Development Helper – HTTP/S logging/AJAX http://projects.nikhilk.net/WebDevHelper Fiddler – HTTP/S logging/AJAX

8. Main SharePoint Design Components Master page Derived from ASP.NET 2.0 (supports .NET 3.5) Provides consistency for commonly used objects throughout sites / site collections – logos, menus, footers CSS Cloaks the page objects – color, font type, positioning Themes – icing on the cake – a ‘super’ CSS Page Layouts / Content Pages – where the content gets added by the end user – dictates how content gets laid out throughout sites / site collections Page Layouts – MOSS only = publishing functionality Content Pages – MOSS and WSS = Web part/forms pages

9. Master Pages - Components Master Page HTML HTML Content Placeholders CSS Content Placeholders JavaScript HTML JavaScript CSS

10. Page Layout - Components Page Layout ContentControls HTML HTML Field Controls Field Controls Web Part Zones Web Part Zones

11. Master Page / Page Layout working together

12. Demo SharePoint Master Pages Browser and SPD Site and System master pages Content Placeholders CSS Links Touch on other pages in site/site collection inconsistencies

13. Options for Creating Master Pages Start from scratch Minimal master page Build on one of the OOB master pages Use an existing ASP.NET master page May end up being more effort involved in doing this Consider porting .NET skins and CSS It also depends on how you choose to deploy your customizations...

14. Deployment Considerations How do you deploy Master Pages, CSS and Page Layouts? Use SharePoint Designer Use Site Definitions Use Solutions and/or Features It depends on your scenario and policies Customized or Uncustomized Solution? (important) Scalability Single or Multiple Site Collection/s (important)

15. StorageCustomized and Uncustomized WFE [12 Hive] Browser Content Database Templates Page Instance Page Rendered Page Physical Master Instance Master

16. Deployment:Customized Solutions Typically deploy master page/s, CSS and page layout/s via SharePoint Designer To root of site collection or member site (master page gallery) – talking publishing site Only accessible in same site collection Accessible to all sites in site collection IF saved to root site of collection Stored in content database SPD is commonly used in hosted solutions

17. Deployment:Uncustomized Solution Scenario: Design master page/CSS/Page layouts (design artefacts) in SharePoint Designer Developer bundles design artefacts into Feature / solution (WSP) and deploys to SharePoint server Stored on Web front-end server/s in farm Design artefacts available to all site collections on server

18. Demo Deploy a new customized master page Multiple site collections Smartsite and Mossapp

19. Combat _layouts pages Design The application.master page CANNOT/MUST NOT edit Cannot see in SPD Inconsistent branding experience A lot of customers don’t like this Even if it’s an intranet – they want c-o-n-s-i-s-t-e-n-c-y Designers and developers need to be aware The regular master pages, i.e. System and Site master pages do NOT effect those pages in the _layouts directory, e.g. Site Settings pages Two options ASP.NET HTTPModule redirect – more dev intensive Custom theme

20. Branding Administration PagesAdmin Pages conceptualized X WFE [12 Hive _layouts] Browser Content Database Application Page Rendered Page Application Master

21. Enter SharePoint Themes(branding consistency ALL pages) A Super form of CSS (CSS and Images) Themes versus Master pages and CSS Value Add, popular for intranets What do they really fix? Quickly SKIN a site Address _layouts/application pages issue – consistent look and feel on ALL pages within a site Themes OOB are applied on a site-by-site basis See Theme Stapler on CODEPLEX Include a custom theme throughout an entire site collection Include theme as part of a site definition, deploy using Features See also community Theme manager application http://community.zevenseas.com/Blogs/Robin/archive/2009/08/03/adding-themes-the-supported-way.aspx

22. The TEN Themes(Microsoft download) Ten new SharePoint themes released in March 2009 Deploy via Visual Studio 2008 using VSeWSS

23. The TEN Themese.g.

24. Demo Apply theme – theme walkthrough Deploy a ‘TEN’ using VSeWSS Themes in master pages, publishing sites Themes on WFE server

25. Issue with Deploying .NET 3 or 3.5 from VSeWSS VS.NET 2008 FYI If you see a garbled message when attempting to package and deploy the TEN themes in VS.NET 2008 using VSeWSS 1.3 then it’s likely you haven’t fully configured the .NET feature on Windows 2008: Make sure WCF is activated. To do this: Open up Server Manager Select Features, then Add Features Expand the .NET Framework 3.0 Features Expand WCF Activation Tick and select HTTP Activation. This will automatically select WCF activation for you. Click Next to Add the feature

26. Marrying Master Pages and Themes(COMBINED) A couple of gotchas when applying a new or custom master page Ensure that enabling an OOB or custom theme does not ‘override’ your custom master page You’ll need to disable themes from your master page <sharepoint:themerunat="server"> <meta name="Microsoft Theme" content=“Themename 1011,default"> Theme ‘tags’ will get added to a master page automatically if the master page is ‘customized’, i.e. deployed and saved via SharePoint Designer

27. Demo Managing themes in master pages Best practices when integrating themes with a custom master page in SPD

28. But there’s...MySites(different master page) Different master page again Cannot easily be edited Easier to modify a MySite’s CSS References http://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-sites-within-the-enterprise.aspx - How to http://cks.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=2824 – CodePlexMySite template

29. Custom Navigation:Custom menu controls prebaked TelerikRADControls for ASP.NET AJAX http://demos.telerik.com/aspnet-ajax/menu/examples/overview/defaultcs.aspx AJAX 3.5 in SharePoint Server 2007 details http://www.telerik.com/help/aspnet-ajax/moss-install-aspnet-ajax-35.html Save lots of time!!

30. Demo Default SharePoint navigation control Manipulation TelerikRADControls for menus

31. CSS Drilldown SharePoint is rich in CSS files/classes Its main CSS file is the CORE.CSS file Over 5,000 lines of code Mostly all default CSS files inherit from CORE.CSS You should NOT customize the OOB CSS files Most users choose to create a custom CSS Associate CSS to the site collection/site master page

32. Customizing CORE.CSS Becomes relative to the current site Won’t inherit throughout site collection, i.e. Child sites

33. CSSLInk Control <SharePoint:CssLinkrunat="server"/> The CssLink Web Control renders <LINK> elements in this order: The main CSS file (CORE.CSS) An optional CSS file specified by the control's DefaultUrl property The value of the site definition's AlternateCSS attribute if one exists. If you are using the MOSS publishing features, you can also set this property for a single site by using the Site Master Page Settings page.

34. CSS Stacking Order – Important! SharePoint will use CSS in order depending on where the CSS is located, e.g. is your CSS bound to your master page or as an Alternate CSS Farm (CORE.CSS) Site Definition Master Page AlternateCSS Custom Theme (1011_65001) Instance Page (CEWP)

35. Consistent Styles - RTE Option: Use Alternate CSS option to modify RTE custom styles post site deployment

36. Demo Apply an AlternateCSS Override CSS styles on a single page CEWP

37. DIVs or TABLES(Spit the dummy table…) FACT SharePoint (2007) OOB is not CSS compliant Web parts render as tables You can add DIVs to your master pages and page layouts, but it won’t be 100% compliant BUT…you should be working with DIVs, DIVs are the way of the future Test DIVs especially in older or alternate browsers Remember approximately 20-30% of browser usage is in IE6 A number of organizations need to run IE6 due to legacy applications which aren’t yet compliant with the newer, upgraded browsers Three 3rd party options – HiSoft, ARK and CSS adaptors

38. CSS Discovery Internet Explorer 7 Developer Toolbar http://www.microsoft.com/DOWNLOADS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en IE8 has built-in CSS discovery/debugging tools The following tag needs to beaddedinto the SharePoint master page for support in IE8 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Firefox FireBug Add-on https://addons.mozilla.org/en-US/firefox/addon/1843

39. Demo Browser debugging CSS JavaScript (will deactivate Site Actions) Validation

40. Browser Trends http://marketshare.hitslink.com

41. Multi-browser Testing For intranet sites Usually more control over type of browser/s Depends on company and policies For internet sites No control over browser type Test minimally in IE6, IE7, IE8, Firefox 2+ Test optionally in Opera, Chrome, others Fantastic online browser emulator available: Erases the problem of installing multi-browsers on your machine/s Test on IE6, 7 and 8 Test on multi-browser platforms Xenocode - http://www.xenocode.com/browsers/ You’ll need to open up access to the internet to use it I use a couple of virtual images in my development environment to do this

42. Multi-browser Testing ToolXenocode (online emulator)

43. Cross Browser and RTE OOB RTE doesn’t work as expected in Firefox 3.5 If you need to design with Firefox in mind, then consider the 3rd party alternative Telerik RTE Cross browser compatible Important consideration for internet sites

44. Demo OOB RTE in Firefox 3.5 Enter RADEditor RTE – cross browser compatible

45. Accessibility-Dynamic Font Size…(font-size:12pt versus font-size:0.75em)

46. Where to - Dynamic Font Size(accessibility) Be aware that enabling dynamic font size on some CSS elements may throw out custom formatting when font is enlarged within the browser

47. Handling of Animations(applicable to all Web sites!!) Don’t leave people out of the picture Give the user an alternative if they don’t have Flash or Silverlight Rare these days but there are instances

48. Add Print Specific Styles In a New Stylesheet file Link to master page <LINK rel="stylesheet" type="text/css" href="print.css" media="print"> In an Existing Stylesheet file (screen.css) @media print{.stylename{…}} @import url(paged.css) print,projection; Inline on the Page <STYLE type="text/css"> @media print {.stylename{…}}<STYLE>

50. Used in Core.CSS @media print{.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,.ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2{display:none;}

51. Section of page controlled by print.css

52. Accessible Printing Add Print Icon to Page Layout. Clicking on the icon will pop up a page minus redundant artifacts, i.e. menus, and a Print dialog

53. Look ‘n Feel when Editing Page

54. Which Editing Controls?

55. SPSecurityTrimmedControl Lock down access to ‘Site Actions’ or ‘View all Site Content’ Security trim control to ‘Admins’ only <Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl" runat="server" PermissionsString="ManageWeb"> …………………………….. </SharePoint:SPSecurityTrimmedControl>

56. Demo Security trimming a control Intranet scenario

57. Deployment: External Sites and Forms Pages http://sitename/_layouts/viewlsts.aspx

58. Deployment:External Sites and Forms Pages When you don’t want anonymous visitors to see ‘behind the scenes’ using http://sitename/pages/_layouts/viewlsts.aspx Use Lockdown Feature to block access to Forms pages in anonymous sites – ViewFormPagesLockDown Feature Details - http://blogs.msdn.com/ecm/archive/2007/05/12/anonymous-users-forms-pages-and-the-lockdown-feature.aspx Lockdown Feature only available for MOSS sites! Workarounds offering similar functionality for standalone WSS sites http://blog.thekid.me.uk/archive/2008/11/20/lockdown-wss-system-pages-on-public-sharepoint-sites.aspx (need to access web.config file) http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/6f8c6dbe-67d0-4dcf-a03d-3da4171649c8/ (can be done using SharePoint designer, suitable for hosted sites)

59. Deployment:(external) Consider IE7 and IE8 Users Modify master page/s to avoid the ActiveX prompt when users navigate to your SharePoint site/pages http://support.microsoft.com/kb/931509 <script type="text/javascript" src="/_catalogs/masterpage/custom_activex_override.js"></script>

60. Content Rollup Three compelling Web parts / Solutions Content Query Web Part (CQWP) Roll-up lists, content types, pages content DataView Web Part Create in SharePoint Designer, query, filter, presentation Swiss army knife of Web parts Connected Web Parts Cross list queries and lookups between pages in a site

61. Connected Web Parts

62. Thanks to our sponsors Resources SharePoint Developer site (includes AdventureWorks Travel Site download) http://www.microsoft.com/click/SharePointDeveloper/html/Default.html Visual Studio 2008 Extensions for SharePoint (VSeWSS) 1.3 http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=fb9d4b85-da2a-432e-91fb-d505199c49f6 Visual Studio 2005 Extensions for SharePoint http://www.microsoft.com/downloads/details.aspx?FamilyID=3E1DCCCD-1CCA-433A-BB4D-97B96BF7AB63&displaylang=en SharePoint Designer Team Blog http://blogs.msdn.com/sharepointdesigner/ Microsoft sample SharePoint master pages http://www.microsoft.com/downloads/details.aspx?FamilyID=7C05CA44-869A-463B-84D7-57B053711A96&displaylang=en Microsoft sample SharePoint themes (VS 2008 projects) http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a87658f-20b8-4dcc-ad7a-09ad22641f3a Sample SharePoint sites http://www.wssdemo.com http://www.topsharepoint.com SharePoint Magazine good articles on branding and master pages http://sharepointmagazine.net/technical/development/incorporating-a-master-page-into-a-sharepoint-site-definition-master-pages-and-sharepoint-part-6-of-6 http://sharepointmagazine.net/technical/development/sharepoints-branding-limitations-part-4 Implementing a Brand in SharePoint (MSDN) http://msdn.microsoft.com/en-us/library/dd221375.aspx

63. About Me Kathy Hughes SharePoint Server MVP Sydney, Australia SharePoint Consulting, Training, Writer and Speaker Published Co-Author Microsoft Press SharePoint Server 2007 Admin Companion Microsoft Press SharePoint Server 2007 Best Practices SharePoint Designer Training curriculum developer www.kathyhughes.com

64. Today’s Presentation brought to you by: VMWare Workstation 6.5 Windows Server 2008 R2 64bit Windows XP and Windows 7 (client) SQL Server 2008 SharePoint Server 2007 SP2 Visual Studio 2008 Microsoft VSeWSS TelerikRADControls AJAX 3.5 SharePoint Designer 2007 IE6, IE7, IE8, Firefox IE7 and IE8 Developer toolbars