In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.

1. Introduction to Branding SharePoint K.Mohamed Faizal SharePointPROs.SG 20th August 2009 email kmdfaizal@yahoo.com / kmfaizal@ncs.com.sg IM kmfaizal (yahoo) Tech Blog http://faizal-comeacross.blogspot.com/

2. Agenda Branding & Design process Gathering Requirements Information Architecture Sitemap & Navigation Wireframes Tools for building the design Development Master page vs. theme Demo Theme Master Page

3. What does branding mean? Cowboy branding

4. What does branding mean? Branding: The act of building a specific image or identity that people recognize in relation to your company Website Branding: The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website. Branding for SharePoint: Master pages, page layouts, CSS, web parts, XSLT, images, etc.

5. WSS vs MOSS Windows SharePoint Services v3 or WSS is the free version of SharePoint Focused on collaboration with documents and light editing of web pages Microsoft Office SharePoint Server 2007 (MOSS) is the licensed version of SharePoint Includes among other capabilities the Publishing Feature Much better platform for creating a strongly branded web site

6. Microsoft SharePoint Platform

7. When come to SharePoint Design

8. How far can SharePoint Go?

9. How far can SharePoint Go? 100 Best SharePoint Websites http://www.wssdemo.com/Pages/topwebsites.aspx

10. How far can SharePoint Go?

11. How far can SharePoint Go?

12. Branding & Design Process

13. Design Process: 7 Steps

14. Gathering Branding Requirements Step 1 Conduct Requirements Gathering Session 1 Session 2 … Identify Approvers: Business Users, PWC Member, Corporate communication Member, PSC Member. Design Treatments: Gradations or flat colors, Rounded corners, Transparencies, White Text on dark background, Tabbed navigation, Pixel lines for separation, Shadows Branding Moods: Simple or Complex, Bold or Soft, Heavy Imagery or soft color transitions, Sharp square edges or soft rounded corners Sites they like and Dislike: Identify existing sites that they like and why they like them. Same for sites they don’t like.

15. Gathering Branding Requirements Step 1 Conduct Requirements Gathering Session 1 Session 2 … Define customization level? Brand Adaptation: keep out of the box layout and tab styles and Apply logo, colors only? Custom brand: More design treatments, changes to lines, controls, tab styles.. stay within master page layout Full custom design: Change layout of master page completely.. i.e. navigation may not be in tabs, etc

16. Gathering Branding Requirements Step 1 Conduct Requirements Gathering Session 1 Session 2 … Full portal modification: All sites, My Sites, and Administration page Sites only: Themes or alternate style sheets Page Only: Alternate style sheets, Content editor web part <style></style>)

18. Colors

19. Fonts

20. Imagery

21. Layout

22. Logos

24. Prioritize KeyDevelopment Iterations Step 1 Conduct Requirements Gathering Session 1 Session 2 … START Requirement 1 Requirement 2 Requirement 3 Requirement 4 Requirement 5 Requirement 6 Requirement 7 Requirement 8 Requirement 9 Requirement 10 Requirement 11 Requirement 12 Requirement 13 Step 2 Prioritize KeyDevelopment Iterations

25. Create Sitemap & Navigation Creation of high level sitemap & navigation Review Step 3 Create Site Map Identify Key Areas for IAWire Frame Design

26. Create Sitemap & Navigation Review Step 3 Create Site Map Identify Key Areas for IAWire Frame Design

27. Create Sitemap & Navigation Div 1 Div 2 Div 3 Div 4 Div 5

28. Create Wireframes Creation of Wireframes Review Step 4 StartWireframeDevelopment Wireframes range from high level b/w navigation and page sketches to detailed page layouts.

29. Create Visual Design Provide Input to your Designer Explain Design SharePoint constraints Explain Page Layout and WebParts Provide information about style sheet Review Step 5 Create“Look-n-Feel” Interface Design Full color designsof key application navigation, pages, and interactions.

31. Create Visual Design Colorful background Image Fun factor We want something that's not too 'boxy' & have the wow factor to excite users We need to have more energy and be more exciting. Mix all elements of air, water, land, energy in to your design

33. Complete Wireframes & Interface Designs Step 6 Complete Wireframes & Interface Designs Review

36. My Site

37. Templates –

38. Team Sites

39. Blogs

40. Wiki’s

41. Meeting Workspaces

42. MS Training Center

43. Administrative

44. Central AdministrationAlpha Prototype: Incomplete representation of portal structure; usually home page plus key category/ user path to give a preview of how site will function Beta Prototype: 100% complete representation of site structure; all content represented on site map completed

45. How to begin?

46. Tools for building the design Complexity

47. Different type of SharePoint Branding Methods Themes Master Pages Page Layouts SharePoint Page Elements Field Controls, Web Part Zones, Web Parts, etc. Almost everything relies on Cascading Style Sheets

48. Themes Think of it as painting the walls You can only change: Background images Colors Fonts Hide certain elements Make minor movements and size changes Themes can style the Application pages (those with _layouts in the URL)

49. Themes

50. Custom Themes

51. Master Pages Master pages allow you to change the look and feel for an entire site simply by making changes to a single file Unlike themes, Master Pages allow full control over the HTML of the page Can’t have a SharePoint site without it –even if you use a theme!

52. OOTB Master Pages

53. Custom Master Pages

54. Master Page vs. Theme Which option is best for your environment?

55. Master Page vs. Theme Themes If you just want to change colors, fonts, background images then go with a theme. Master Pages If you want to move elements around on the page or change the HTML you have to go Master Page.

56. Implementation Method Options Custom Theme Create a custom theme and apply it to each site. Pros: Easy to apply Ability to have multiple brands within environment Cons: This approach is defined per site Cannot be pushed across all sites If modified theme needs to be removed and then reapplied

57. Why Create a Custom Theme The OOTB themes have bright colors that rarely match with corporate brands Check out the new MS themes: http://faizal-comeacross.blogspot.com/2009/04/10-sharepoint-themes-for-free.html

58. Applying a Theme to a SharePoint site MOSS Site Actions > Site Settings > Modify All Site Settings Look and Feel > Site Theme WSS Site Settings > Site Theme

60. CSS Tag for Header / Navigation (Core.css)

61. CSS Tag for Body Layout(Core.css)

62. CSS Tag for Quick Launch/Left Nav(Core.css)

63. CSS Tag for Main Content Area(Core.css)

64. CSS Tag for Web Parts (Core.css)

65. CSS Tag for Forms (Core.css)

66. CSS Tag for Site Settings (Core.css)

67. CSS Tag for Site Settings Menus (Core.css)

68. Creating your own Theme Let’s Code? Change Background Image & Height Size Change Site Font Hide Icon & Change Site Title font size Add Rounded corner Image to Web Part Headers

69. The Themes Folder Themes Folder is located in the 12 Folder C:rogram Filesommon Filesicrosoft Sharedeb server extensions2EMPLATEHEMES

70. Other Files in the Theme Folder theme.css Most of the CSS for the Theme mossExtension.css Extra CSS applied to the end of the Theme CSS for MOSS sites Supporting images and CSS

71. The Theme INF File LACQUER.INF [info] title=Lacquer codepage=65001 version=3.00 format=2.00 readonly=true refcount=0 [titles] 1031=Lacquer

72. SPTHEMES.XML Contains references to all Themes for SharePoint Located in the 12 Folder: Crogram Filesommon Filesicrosoft Sharedeb server extensions2EMPLATEAYOUTS033PTHEMES.XML <Templates> <TemplateID>Lacquer</TemplateID> <DisplayName>Lacquer</DisplayName> <Description>Lacquer has a gray background with gray control areas and orange highlights.</Description> <Thumbnail>images/thlacquer.gif</Thumbnail> <Preview>images/thlacquer.gif</Preview> </Templates>

73. Thumbnail / Preview Images Thumbnail and preview images are located in the 12 Folder: C:rogram Filesommon Filesicrosoft Sharedeb server extensions2EMPLATEMAGES OOTB Thumbnails are named “th*.gif” Can be GIF, JPG, or PNG

74. Applying a Theme to a SharePoint site What happens when a Theme is applied? Files provision in site at “_themes/Lacquer” mossExtension.css is added to the end of theme.css and a new Theme file is created “Lacq1011-65001.css”

75. Tools SharePoint Skinner: SharePoint Skinner is a really useful tool that will allow designers to inspect existing Web sites and create SharePoint themes from them http://www.elumenotion.com/Blog/Lists/Posts/Post.aspx?ID=4

76. Tools Serv´e’s SharePoint Theme Generator: http://hermansberghem.googlepages.com/themegenerator.htm

77. Tools IE Developers Toolbar: This free tool is a plug-in available from Microsoft that adds a new toolbar to the bottom of your Internet Explorer browser window. Firebug: Firebug is similar to the IE Developer Toolbar in that it is a free tool that works inside the browser. The biggest difference is that it is targeted to FireFox

78. Master Page

79. Master Page MOSS Master Pages are similar to .NET Master Pages. However, MOSS added a component called a Page Layout.

80. Master Page The Master Page is assigned at the site or sub-site level. A Page Layout is assigned at the page level. Page Layouts act as templates that may be used by multiple pages.

81. Master Page and Page Layout

82. Estimating Branding Many times branding is estimated after requirements are gathered and before any other work happens Master page vs. theme Skill level of designers Deployment considerations How much time is available Complexity of the design Number of elements to be styled Flexibility of the stakeholders Give enough time to test Setting expectations is key!

83. Functional Areas of a Master Page Content Placeholders

84. Default.masterPlaceHolders All placeholders must be defined in a replacement master

86. Master Page Page Layout

87. Master Page Web Part Zones

88. Master Page Demo

89. Navigation Settings StaticDisplayLevels–The number of levels of sub navigation to show by default MaximumDynamicDisplayLevels–The number of levels of sub-navigation to show as fly-outs Orientation–Can be horizontal for top navigation or vertical for side navigation http://blogs.msdn.com/ecm/archive/2007/02/10/moss-navigation-deep-dive-part-1.aspx

90. Adding Custom CSS to SharePoint Where should CSS live in SharePoint? Style Library for MOSS To be absolutely certain your CSS is called last, use an HTML CSS include <link rel="stylesheet" type="text/css" href="<%$SPUrl:∼sitecollection/Style%20Library/∼language/Custom%20Styles/MyCustomStyle.css %>" />

91. Custom Master Pages SharePoint requires specific Content Placeholders You will get “An unexpected error has occurred.” Turn on detailed error messages: http://blog.drisgill.com/2008/08/turning-on-detailed-error-messages-in.html Learn more about the default placeholders: http://office.microsoft.com/en-us/sharepointdesigner/HA101651201033.aspx#3 Minimal Master Pages create a “blank slate” to start your masterpiece

92. IE Developers Toolbar Download: Internet Explorer Developer Toolbar

93. Implementation Method Options Modify Core Server CSS File: Core.css Applied to all sites, sub-sites, application pages, and My Sites. Pros: Instant Results All Sites/pages will be branded Cons: All Sites/pages will be branded Risk that service pack will override changes

94. To Package, Deploy Master Page Go To MSDN article Real World Branding with SharePoint Server 2007 Publishing Sites URL http://msdn.microsoft.com/en-us/library/ee354191.aspx

95. Implementation Method Options Modify All Core Server Master Pages: Adding a CSS Reference to all major master page files on the server. Application.master Default.master Pros: Instant Results All Sites/pages will be branded Cons: All Sites/pages will be branded Risk that service pack will override changes

96. Implementation Method Options Custom Site Definitions and Ref. Alternate Stylesheet: Create Custom Site Definitions Reference Custom CSS file in all Default.aspx pages Reference an alternate CSS file at the top level site collection. Pros: Branding only applied to those sites that use those templates Cons: The Alternate Style sheet will have to be applied to every top level site collection Not all system pages will be branded

97. Implementation Method Options Custom Master Page within UI Create custom Master page and store it in the Master Page and Page Layouts Gallery Reference to Custom CSS file on the server Pros: Easily Supported Ability to use library features (Check in/out, Versioning, Restore) Cons: No system pages will be branded

98. Implementation Method Options Alternate Style Sheet Reference the Alternate Stylesheet at the top level site collection. Pros: Quick way to make simple changes to site Cons: This approach does not get applied when a new site is created.

99. Implementation Method Options Content Editor Web Part Use <Style></Style> tag within the web part to override the CSS for that page. Pros: Flexible and can be used on any site Cons: This approach only effects the page and not the whole site/collection

100. All Sites Method Feature Staple Create a custom site definition that references a custom master page. That master page references the custom CSS file. Modify the Application.Master to reference the custom CSS file for all _layouts pages.

102. 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 Create a Feature: Master Pages for Site Collections http://www.heathersolomon.com/blog/articles/servermstpageforsitecollect_feature.aspx SharePoint Branding and UI Design http://blog.drisgill.com SharePoint Branding & Design http://erikswenson.blogspot.com/