Welcome to the Delaware Valley SharePoint User Group Russ Basiura SharePoint Consultant RJB Technical Consulting

Delaware Valley SharePoint User Group AGENDA Quick Intro Announcements SPImport –SharePoint Utility for importing exporting content Office System Timeline –Basic –Intermediate Templates –Advanced Site Definitions –Tip & Tricks –[5 minute break] New World of Work –Word –Excel –Outlook Office 12 Investment Areas Discussion Round Table Q & A

Delaware Valley SharePoint User Group Introductions DVSUG Sponsor RJB Technical Consulting ( – Delaware Valley based consulting company – Microsoft Partner – Practice Area focused on Information Worker Technologies – Office 2007, SharePoint v3, Groove Private Beta Partner

Delaware Valley SharePoint User Group User Group Goal / Objectives Build a local community focused on Microsoft SharePoint Technologies –Educate user group members about SharePoint Technologies –Transfer knowledge within the community –Communicate best practices –Introduce new products / solutions

Delaware Valley SharePoint User Group Website for user group SharePoint resource documents SharePoint resource websites links RSS Feeds Meeting Schedule Past User Group Presentations Blogs Live Meetings / Webex Discussions

Delaware Valley SharePoint User Group Upcoming Schedule Next Meeting – March 29th 5:30 PM to 8:30 PM – SharePoint Personalization – StayBridge Suites, Malvern, PA –Ongoing Schedule – Last Wednesday of every month – 5:30 PM to 8:30 PM – StayBridge Suites, Malvern, PA

Delaware Valley SharePoint User Group SharePoint Toolkit ReGhost.Net

Delaware Valley SharePoint User Group SharePoint Toolkit Why ReGhost.Net? Detects unghosted pages Desktop Install Connects to content database

Delaware Valley SharePoint User Group SharePoint Toolkit Issues with unghosted pages –Slow performance due to increased database access –Lose the capability to apply global changes

Delaware Valley SharePoint User Group Demo ReGhost.Net

Delaware Valley SharePoint User Group Branding SharePoint

Delaware Valley SharePoint User Group Branding Differences between SPS vs. WSS SharePoint Portal Server siteWindows SharePoint Services site Small number of portal sites with a large number of users for each Large number of sites with a small number of users for each Organization-wide audienceTeam-based audience Primarily for organizing, publishing, and summarizing Primarily for collaborating with other users on documents and creating lists Created and owned by named portal administrators User-created and owned Planned and designed based on specific business requirements Unstructured, created as a requirement is identified Centralized administration, with area delegationDecentralized administration

Delaware Valley SharePoint User Group Branding Portal Branding Limitations SPS is designed to only allow a subset of its pages to be freely branded. Portal site pages can be described in one of the two following ways: User-facing (Site or Area templates) Defines the features & functionality of a team site or portal area These pages are designed with some limitations Administrator-facing (Layout pages) Stored in a single location within the file system of the Web server They are virtualized. Accessible from any portal area or team site. These pages provide access to shared functionality (i.e. permissions, document library and list management, area settings etc...)

Delaware Valley SharePoint User Group Branding SharePoint Administrator-facing Limitations Although it is common to customize User-facing pages, you should NOT customize administrator-facing pages for the following reasons: Tuned & tested to ensure reliability and performance Microsoft Support Services can debug issues Service packs & new versions may remove customizations Impossible to determine the impact of the change May result in a new, significant testing requirement Many pages are shared across SPS & WSS Consider this limitation in the earliest discussions

Delaware Valley SharePoint User Group Branding Approaches to SharePoint Design

Delaware Valley SharePoint User Group Branding Design Tactics in Branding SharePoint There are several different approaches to branding a SharePoint site. To help you decide which approach is right for you, let’s discuss these tactics in terms of complexity: Exterior (Easy) Interior (Moderate) Decorating (Advanced) Within each design tactic, we’ll discuss the: Impact of customization on the standard portal site Complexity and required skill-level of the developer Supportability in the event of fixes, service packs, and new releases

Delaware Valley SharePoint User Group Branding Branding Tactics: Exterior (Easy) The Standard SharePoint Portal Server Logo: Ability to display your company logo on every page Make sure the logo is sized appropriately for the page Background Color should be consistent with the standard Blue color Microsoft recommended approach Customizations apply to all pages on the site (admin pages too) The image should be located in the same directory as other SPS images Configuration Details Impact of customization: Low Complexity: Low Supportability: High

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Moderate) Style Sheet Customizations: The look and feel is determined by a set of cascading Style sheets (CSS) and images. You can customize the look by: Complementing the existing standard style sheets Modifying the standard style sheets for WSS Replacing standard images by referencing new images Instant Source Utility (available for download/purchase) Configuration Details Impact of customization: Low-to-medium Complexity: medium Supportability: Medium-to-high.ms-bannerframe { background-color: #800000; border:0px; Border-Bottom: 2px solid #FFCC00; } Note: The application of service packs, fixes, and future releases of the product will have an impact on the modification of the standard style sheets and images. However, as long as the changes are backed up and documented it should not be too difficult to reapply them.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Moderate) Style Sheets and what they affect: \Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\Layouts\1033\Styles.ms-bannerframe { background-color: #800000; border:0px; Border-Bottom: 2px solid #FFCC00; } Style Sheet NameDescription SPS.CSS SharePoint Portal Server styles OWS.CSS Windows SharePoint Services styles MENU.CSS Styles used to create drop-down menu OWSMAC.CSS Styles used when rendering on the MAC OWSPERS.CSS My Site styles TIP: Create your own copy of the SPS.css to complement and override the default. For example: sps.css

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Style Sheet Directory Information

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Moderate) Logo & Style Sheet Customizations Great combination! Relatively easy to do Potential for significant visual impact Very supportable approach Important: The custom portal image should reside on the file system in the images directory. Create a copy of the SPS.css file and rename it rather than editing the original file.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Moderate) Microsoft Office FrontPage 2003: Customize both Windows SharePoint Services and SharePoint Portal Server areas, but… Greater impact on portal site supportability Customizations cannot be replicated across a portal site or enable a single maintenance point Customizations “UnGhost” Portal Site pages Relatively simple. Great tool for Team Sites. Configuration Details Impact of customization: Medium-to-high Complexity: Medium Supportability: Medium Note: The application of service packs or fixes will not have an impact on modifications made by FrontPage. Future versions of the product may introduce changes or additions that may require some rework.

Delaware Valley SharePoint User Group Branding SharePoint Portal Template Design Exploring SharePoint Curb Appeal

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) SharePoint Templates: Portal sites and Areas are based upon a set of templates. By branding a portal site using the templates, you ensure maximum page performance and simplified page maintenance. Template customization provides you with the greatest flexibility and performs branding using a Microsoft recommended method. Impact of customization: Low-to-high Complexity: Medium-to-high Supportability: Low-to-Medium Note: Difficult to provide a specific assessment of impact or cost. The application of service packs, fixes, and future releases of the product will have an impact on the changes. Arguably most flexible type of modification.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) SharePoint Portal Server Areas: Each portal area is made up of two elements: Area Pages and Sites. While both can be customized, you typically achieve branding by modifying area pages only.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Sites in SharePoint Portal Server: Behind every portal area is a backend WSS site. This backend WSS site provides most of the WSS list and document library based capabilities to the SPS area. It defines items such as the following: Lists available for creation Lists created by default Fields that make up a particular list Available views Note: We will not be exploring modifications to the area definition (he combination of HTML files and XML-based configuration files that make up these pages/content.

Delaware Valley SharePoint User Group Branding Site Definitions What is a Site Definition Defines a unique type of SharePoint site Examples include Team Sites, Meeting Workspaces, Topics, News It’s a set of files in the file system located on the Web server XML files ASPX pages Document Templates (.dot,.htm) and Content files (.gif,.doc) Site definitions specify portal area list types, Web pages, navigation and site Why work with Site Definitions Customize the look and feel of SharePoint sites Add new functionality (Create new lists and web page modules)

Delaware Valley SharePoint User Group Branding Site Definition Files. Where Are They? Everything is Under: \Program Files\Common Files\Microsoft Shared\web server extensions\60\template File Scopes: Server Language: \1033 (English Language) Site Definition: \1033\STS (SPS, SPSNEWS etc…) List Definition: \1033\STS\Lists\Announce (display, edit, new) Resource Files: Template\layouts\1033\Styles (Images & Styles directories)

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) SharePoint Template Descriptions: Each area template is contained within its own folder structure. FolderArea SPSHome SPSCOMMUCommunity SPSMSITEMy Site Homepage SPSPERSMy Site Team Site SPSNEWSNews SPSNHOMENews Home SPSSITESSite Registry SPSTOC Topics Home SPSTOPICTopics STSWSS Team Site MPSWSS Multi-Page Team Site

Delaware Valley SharePoint User Group Branding Site Definition Files Create New Site Definitions (Create & Customize a new Template) 1.Copy an existing Definition 2.Rename it 3.Update WEBTEMPSPS.XML Note:. May not be fully supported or updated by services packs and future software revisions.

Delaware Valley SharePoint User Group Branding Site Definition Files Why did we just discuss this? It’s important to understand what constitutes the Site Definition It’s great to know how to create new Templates and make them available to users But…ONLY modify these files if you absolutely have to

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Customizing SharePoint Area Pages: Every area in your portal is created with a default.aspx page; this is the page displayed when an end-user accesses an instance of a portal area. Template Location \Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\1033 IMPORTANT: Do not edit SharePoint templates or pages by opening them directly from the file system in FrontPage as the HTML can become corrupted.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Working with & Modifying Templates: How should we implement a new Banner? \Program Files\Common Files\Microsoft Shared\webserverextensions\60\Template\ \SPS 1.Standard HTML Create code and paste it into each default.aspx page replacing the standard one. Simple to implement. Requires changes in additional default.aspx pages. 2.Web Part Use Standard HTML. Include in a server control or Web Part. Upside: Maintained in a single location. Downside: Development required.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Modifying Templates: Server-Side Controls SharePoint Portal Server includes a number of server-side controls, which provide functionality like top navigation, left navigation, actions, and a logo. A number of these controls have parameters that you can specify to change their behavior.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Modifying Templates: Navigation (Home Area Only) This control manages the left-hand and top navigation elements. Left-hand navigation, as displayed on the Home area, is shown here. Vertical Mode: By default, it displays one-level beneath Topics Horizontal Mode: Parameters that can be modified: Display the children of any other area within your portal hierarchy. Render in horizontal mode, as it is in the top navigation bar

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Modifying Templates: Navigation (All Other Areas) The left-hand navigation on all other areas is made up of two controls: Display the breadcrumb in a horizontal mode Anchor the breadcrumb to a specific area Include a specific separator in the breadcrumb trail Vertical Mode: Horizontal Mode:

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Modifying Templates: Page Header (Standard) Using parameters, you can modify this control in the following ways: Render only the links displayed on the right-hand side. Render only the image displayed on the left-hand side. Render both the links and the image.

Delaware Valley SharePoint User Group Branding Branding Tactics: Interior (Advanced) Modifying Templates: Actions You can remove any of these actions or add your own with parameters: The URL where the link will navigate you to. Text to display. The ToolTip to display. Whether it is visible in Edit mode.

Delaware Valley SharePoint User Group Branding Branding Tactics: Decorating (Advanced) Using Flash: Flash can bring an entirely new dynamic to your Portal or Team Site Potential Uses for Flash: Custom header for the homepage and others Features or Presentations

Delaware Valley SharePoint User Group Branding SharePoint WSS Template Design Exploring the SharePoint Curb Appeal

Delaware Valley SharePoint User Group Branding Branding WSS Sites Themes (Standard & Custom) FrontPage 2003 Customizations Template Creation

Delaware Valley SharePoint User Group Branding Branding WSS Sites: Themes (Standard) 1. Site Settings 2. Click Apply theme to Site 3. Select a Preview 4. Click Apply Configuration Details Impact of customization: Low Complexity: Low Supportability: High

Delaware Valley SharePoint User Group Branding Branding WSS Sites: Themes (Standard/Custom) FrontPage 2003 Choose existing Themes Modify existing Themes Create new Themes Note: Customizations done in FrontPage are unique to the specific site. Creating a new Theme in FrontPage does not make it immediately available to your Site Administrator through Site Settings. Configuration Details Impact of customization: Low Complexity: Low-medium Supportability: Low-High

Delaware Valley SharePoint User Group Branding Branding WSS Sites: Themes (Custom) Creating Themes \Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES\ Provides you with the greatest flexibility using a recommended branding method. Configuration Details Impact of customization: Low-High Complexity: Medium-High Supportability: Medium Note: Customizations are immediately available to your Site Administrator through Site Settings

Delaware Valley SharePoint User Group Branding Branding WSS Sites: Themes (Custom) Creating Themes (Update SPTHEMES.XML) \Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\Layouts\1033 Requirements Unique Template ID, Name Create a custom thumbnail and preview image for your users to identify. Make your new theme available through Site Settings!

Delaware Valley SharePoint User Group Branding Branding WSS Sites: FrontPage 2003 Customization What Can I Do? Add a Custom Header Change the HTML Structure of the Homepage. Customize Web Part Zones Customize Web Part Views

Delaware Valley SharePoint User Group Branding Branding WSS Sites: Creating & Saving WSS Templates: Planning to create a new template? You may want to consider whether the new Template should be available globally to all top-level site collections. 1. Site Settings 2. Go to Site Administration 3. Save Site as Template 4. Download template.stp 5. Install with sts.adm

Delaware Valley SharePoint User Group Branding SharePoint Branding Resources Branding SharePoint us/odc_sp2003_ta/html/Office_SharePointApplyingCorporateBrand.asp MSDN Webcast: Customizing and Branding SharePoint Portal Server and Windows SharePoint Services (Level 300) SharePoint Customization

Delaware Valley SharePoint User Group Branding Best Practices : SharePoint Branding Do’s and Don’t’s DO’s The Portal or Team site should reflect and reinforce the company identity Branding your Portal or Team site is part of the Planning Process Design within the limitations of SharePoint. Keep it supportable Document your Branding customizations Understand where, when, why and how to use FrontPage 2003 Make backups of the files you plan to customize DON’T’s Edit your Portal area pages in FrontPage (via or the file system) Edit the Administration (Layout) page

Delaware Valley SharePoint User Group Branding Questions??

Delaware Valley SharePoint User Group 5 minute break

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group

Delaware Valley SharePoint User Group Demo Word 2007

Delaware Valley SharePoint User Group Questions??

Delaware Valley SharePoint User Group 5 minute break

Delaware Valley SharePoint User Group Round Table Discussion