Real World Branding with SharePoint 2010 Publishing Sites

Transcription

1 Real World Branding with SharePoint 2010 Publishing Sites Summary: Learn essential concepts to help you create engaging user interface designs in Microsoft SharePoint Server 2010 publishing sites. Applies to: Microsoft SharePoint Server 2010 Contents Introduction to Real World Branding with SharePoint 2010 Publishing Sites Gathering Design Requirements for a SharePoint Publishing Site Planning for SharePoint Branding Tasks Creating Realistic Design Comps for SharePoint Site Designs Creating the Adventure Works Travel HTML Creating.css files for Adventure Works Travel Testing SharePoint Webpage Design in Multiple Browsers Creating the Brand in SharePoint Adding.css and Image Files to SharePoint Building the Master Page with HTML Building Out.css Rules for the SharePoint Site Design Creating a Custom Page Layout Editing a Page Layout with SharePoint Designer Packaging and Deploying SharePoint Branding Conclusion Additional Resources Download code Introduction to Real World Branding with SharePoint 2010 Publishing Sites Microsoft SharePoint Server 2010 publishing sites use Publishing Features to provide capabilities to create engaging web content management (WCM) sites. Frequently used as Internet-facing

2 websites, these sites require the use of custom-designed user interfaces (UIs) to establish an online corporate identity. Creating custom-designed UIs, either on a traditional HTML page or in Microsoft SharePoint Server 2010, is known aswebsite branding. Publishing sites use master pages, page layouts, Web Parts, and cascading style sheets (.css files) to enable designers and developers to create branded websites with designs that can rival those of many current and popular websites today. This article focuses on the mechanics of properly planning and creating a design for an external, Internet-facing website with a publishing site, as shown in Figure 1. The article uses a fictitious travel company, Adventure Works Travel, as an example of a company that wants to create an extensively branded SharePoint site. Figure 1. Adventure Works Travel site branding Gathering Design Requirements for a SharePoint Publishing Site When you are ready to create a great design for a SharePoint site, you first need to take time to plan the site well. Use a planning phase to gather design requirements for site elements such as master pages and page layouts. By properly understanding what the business objectives are before starting to code, you can avoid difficult and time-consuming rewrites later in the project lifecycle. Gathering design requirements begins by holding a formal requirements gathering session. Whether the site you are designing will be used by 10 users or 100,000 users, some requirements must be met before the project is considered a success. Depending on how complex the site will be, adjust the level of detail to the requirements that you will gather. For example, large sites (either with many pages or many users) might require more time to gather requirements than a small and simple site would. Involve key business, marketing, and IT stakeholders in requirements gathering to ensure that their ideas are considered and to ensure that all key stakeholders

3 completely approve the project. Requirements gathering can often be difficult for a branding project and sometimes it is delegated to the marketing department or even outsourced to external consultants. Although involving key stakeholders is important, also consider whether involving more people in the decision-making process will increase the time needed to gather requirements and whether it will magnify the overall complexity of the project. For this reason, carefully consider who will provide the most relevant input when considering which stakeholders to include. The following sections describe some of the more important concepts to understand before starting any SharePoint branding project. SharePoint Server 2010 Publishing Sites vs. SharePoint Foundation 2010 Sites After requirements gathering is complete, first decide whether to base the website on Microsoft SharePoint Foundation 2010, or on a server running Microsoft SharePoint Server 2010 with the Publishing Features enabled. Publishing sites are built on SharePoint Foundation, and there are many advantages to building engaging Internet-facing websites with publishing sites. Some of the benefits of creating a brand with SharePoint Server publishing sites and SharePoint Foundation sites include the following: Enables content authors to create webpages with a more robust rich-text editing experience than SharePoint Foundation sites offer. Includes master pages that target publishing sites and that use specific code assemblies that take advantage of publishing Features. Easier control of web navigation from the web UI, and more options are available to the designer. Uses the Web UI to easily change a master page and to apply master pages to all subsites below the current site. Uses page layouts to create templates at the page level. Uses text layouts to accomplish a form of simple page layout. Text layouts are not configurable. Use the $SPUrl token to target HTML assets with URLs that are relative to either the site collection ($SPUrl;~sitecollection/) or site root ($SPUrl:~site/) Note: For the purposes of this article, a publishing site is a SharePoint Server 2010 web application with a site collection in the top-level (root) directory that has the Publishing Features enabled. For simplicity, Publishing Features are already enabled for the default Publishing templates (Enterprise Wiki and Publishing Portal). This article uses the Enterprise Wiki template for the Adventure Works Travel example. To learn more about setting up web applications and site collections, see Prescriptive Guidance for SharePoint Server 2007 Web Content Management Sites. Browsers and Platforms Targeted for SharePoint Publishing Site Designs

4 Before starting to design and code your site, decide early what browsers and operating system platforms the design will support. Although you should strive to create site designs that render as perfectly as possible in every browser and every operating system, it is often impossible or impractical to even test the design for this level of browser compatibility successfully. Typically, it is good to pick a segment of browsers and operating systems to specifically test against, and code with the intent to support them when branding the site. One good way to choose a level of browser and operating system support is to consult industry websites that study and provide web traffic analysis. Net Applications Market Share lists the top 10 web browsers by total market share for June 2010 as shown in Table 1. Table 1. Browser versions and total market share Browser Version Tot Internet Explorer Internet Explorer Firefox Internet Explorer Firefox Chrome Safari Internet Explorer 8 Compatibility Mode 3.35 Firefox Opera 10.x 1.88 Microsoft designates browsers by the level of support in SharePoint. The levels include: Supported A supported web browser is one that works with SharePoint Server 2010, and all features and functionality work as expected. Supported with known limitations A supported web browser with known limitations is one that works with SharePoint Server 2010, although there are some known limitations. Most features and functionality work, but if there is a feature or functionality that does not work or is disabled by design, documentation on how to resolve these issues is readily available.

5 Not tested A Web browser that is not tested means that its compatibility with SharePoint Server 2010 is untested, and there may be issues with using the particular web browser. For more information about the levels of browser support in SharePoint, see Plan Browser Support (Office SharePoint Server). Note: Internet Explorer 6.0 is not supported by SharePoint Although you can create a master page that would display web content properly in Internet Explorer 6.0, it would not be compatible with the authoring experience for SharePoint 2010, which requires a browser that is based on modern standards. The Adventure Works Travel example for this article focuses on an end user browsing experience that is as accurate as possible in Internet Explorer 7, Internet Explorer 8, and Firefox 3, and which ensures that several other modern browsers (including Google Chrome and Apple Safari) also render very well. Targeted Screen Size for SharePoint Site Designs Another area for consideration is the screen resolution that the new design should target. Many years ago, monitors supported only a subset of resolutions, such as 640 x 480. As monitor prices have decreased, it is more common to see website visitors browsing in 1920 x 1200 and in higher resolutions. Most web designers consider 1024 x 768 to be the most common screen resolution, followed closely by 1280 x 800. When creating a design that is intended to be displayed in a SharePoint site, remember that SharePoint renders a lot of information at once in the user's typical screen resolution. The available space for displaying content becomes even smaller when you consider that browser toolbars and scroll bars also consume a percentage of the available display area on the screen. For the Adventure Works Travel example, the minimum screen resolution is 1024 x 768. The design allows for some padding to accommodate scroll bars. Because of the padding, the site was designed to be no wider than 960 pixels. Defining the Audience and Success Criteria of SharePoint Site Designs To help ensure the success of a branding initiative, define some of the more subjective goals of the design. Which audiences will use the site? What tasks does the typical user of the site want or need to complete? How will users want to navigate the site? Are users expecting to do business with a company that has a more traditional image, or are they expecting to do business with a less traditional company? Unlike the software development process, the design process is subjective for every business situation. Design decisions are often disputed between stakeholders until a brand identity is decided upon. Because brand ideas can be difficult to gauge, it is also good to identify the success criteria for a new brand. Success criteria can be as simple as attracting more visitors or as complex as calculating an increase in sales across major demographics. The more quantifiable and measurable the success criteria are, the easier it will be to determine the relative success of the branding effort.

6 The design of the Adventure Works Travel site caters to a younger set of users that is looking for an edgy look and feel. These users will be comfortable navigating the site with the top and left navigation and with SharePoint Server 2010 search. The users' primary reason for visiting the site will be to learn about adventure destinations and to book vacations. The brand is that of a travel company that caters to individuals who are looking for a vacation that is more adventurous than just a typical stay at a hotel on the beach. Planning for SharePoint Branding Tasks The process of actually coding branding for a SharePoint site involves several steps, such as creating master pages, page layouts, and cascading style sheets (.css files). The planning process for building a SharePoint brand can also include several steps, such as creating black-and-white wireframes, creating full-color website design compositions (or comps), and creating functioning HTML and.css file versions of key pages. The following sections describe these activities as they relate to creating a branded SharePoint UI. Creating Simple Wireframes of SharePoint Site Design A wireframe is typically a set of black-and-white block diagrams that visually describe the overall structure of a website and its layout, navigation, functionality and, in some cases, even its content. Because of the subjective nature of web design (or even design in general), it is good to discuss these topics in wireframe form instead of getting mired in colors and photo preferences. When completed correctly, wireframes can provide a guide for developers and designers about the functionality and layout to apply in later stages of the branding process. There are many ways to create wireframes, from drawing with simple pen and paper to modeling with dedicated software tools such as Microsoft Visio Using dedicated software tools can be very helpful when you are creating wireframes because you can take advantage of prebuilt stencils that map to specific capabilities of specific applications such as SharePoint. You can find many free templates and stencils that you can use to create wireframes for SharePoint sites. As you create wireframes, decide what SharePoint functionality is supported by the brand. Some of what SharePoint displays by default is not appropriate for every Internet-facing website. Figure 2 labels the major functional areas of a SharePoint interface, and Table 2 describes these areas. Figure 2. Major functional areas of a SharePoint interface

7 Table 2. Major functional areas of a SharePoint interface Figure Label Functional Area Description of Functionality A Server ribbon The entire top portion of the UI is part of the ribbon. What is displayed depends on the user's current context. B Site Actions The main menu for interacting with SharePoint, used primarily by content authors and administrators. C D E Global breadcrumbs control Page State Actionbutton Ribbon contextual tabs A new implementation of the global breadcrumbs control that was first introduced in Microsoft Office SharePoint Server When clicked, the icon displays a dynamic HTML that shows a hierarchical view of the site. Use it to navigate up levels of the hierarchy from the current location in the hierarchy. The button used to control the page state, and that typically displays a shortcut to edit or save the current page. Tabs present menus that are specific to the functions of the SharePoint site. What is displayed changes based on what the user

8 is interacting with on the page. Some of the items will not be used on every site. F Welcomemenu This menu shows the welcome message and enables the user to view their profile, to sign out, and to sign in as a different user. If other language packs are installed, the functionality to change the user's language is also available here. When the user is not logged on, the Welcome menu also shows the Sign In link. G Developer Dashboard button The button that opens the Developer Dashboard that typically appears at the bottom of the screen. The Developer Dashboard contains statistics about the page rendering and queries. This icon is shown when the Developer Dashboard's display level is set to OnDemand (other options include On and Off). Administrators can set the Developer Dashboard display level by using Windows PowerShell or by using the SharePoint API. H Title logo Sometimes referred to as site icon. It typically shows the SharePoint site icon, but can display a user-defined logo instead. I Breadcrumb This is a breadcrumb-like control that is specific to the v4.master master page. It includes the Site Title and the placeholder for Title in Title Area, which typically contains the Page Title. TheSite Title is linked to the top level of the site. J Social buttons Used for marking items as liked and for adding tags and notes to content. K Global navigation Sometimes referred to as the Top Link Bar or Top Navigation Bar, it is the primary horizontal navigation mechanism for the site. L Search area The search box is used to enter terms for performing searches on the site. M Help button The help button links to the SharePoint 2010 help documents. N Quick Launch Provides current navigation. Sometimes referred to as the Left Navigation. It is the secondary or vertical navigation mechanism of the pages related to the current location. O Tree View Provides a Windows Explorer style representation of the site. Because of its appearance, the tree view is often better suited for intranet sites. P Recycle Bin Provides a link to the Recycle Bin for the site, which is the area where items are stored when deleted. Typically, this is better suited

9 Q All Site Content for intranet sites. A link to the All Site Content page. This was the View All Site Content link in Office SharePoint Server Typically, this is better suited for intranet sites. R Body area Represents the main content placeholder that includes all of the content that is specific to the page. Required for rendering the content of the page. When creating wireframes for a SharePoint site, be sure to consider the several types of pages that SharePoint could support. Some examples of the types of pages that can exist in a SharePoint site include the home page, landing pages, search results pages, articles, and wiki pages. Figure 3 shows the Microsoft Visio 2010 wireframe for the Adventure Works Travel website. Figure 3. Visio 2010 wireframe for an Adventure Works Travel site You can see from the wireframe page that the Adventure Works Travel site supports some SharePoint functionality but not all of it. For example, some elements such as the Help button, Tree View, and Recycle Bin will be omitted from the UI. By making these decisions at the wireframe stage, developers do not have to build unnecessary functionality.

10 Creating Realistic Design Comps for SharePoint Site Designs Although creating wireframes can certainly help to support any serious branding effort as you plan a new SharePoint site, you should create a complete design comp or prototype before any coding begins. Unlike wireframes, most web design comps are intended to mimic the appearance and behavior (look and-feel) of an actual website as closely as possible without actually creating any code. Comps include realistic static versions of photos, logos, colors, fonts, form elements, and other design or structural artifacts that might appear on the page. For a SharePoint site, emulating page contents means emulating many of the functional areas of the SharePoint user interface. Although you can create design comps with any graphics application (or even with a pencil and paper), applications such as Adobe Photoshop or Microsoft Expression Design can make the task much easier. Use these applications to create an easily maintained and reusable design comp for SharePoint sites. Note: Although this article does not refer to specific features of Adobe Photoshop or Microsoft Expression Design, general concepts and processes are described and similar features may be available in these and similar design applications. The following sections describe capabilities that are common to applications that are used to create design comps. Using Layers and Layer Groups in Design Applications to Separate Elements Use layers and layer groups to separate design elements into specific units. Instead of creating design elements in a "flat" file, layers behave as if each new layer is placed on top of the previous layer. Designers can hide, show, manipulate, move, and apply effects such as drop shadows and borders to individual layers without affecting the other design elements. When using a design tool to create a design comp, it is a good idea to make new layers for every element in the design. Creating Editable Text with Design Applications Create editable text by using a wide variety of fonts, sizes, and styles. Without this feature, text that is created in basic design programs is static and must be erased before each change. By using a modern design tool, you can resize text, display text in a bold font, color the text, or change its font changed and much more without erasing the previous state. Creating Web Safe Images with Design Applications Save images easily in web safe file formats such as.jpg,.gif, and.png. Many design programs can help you create images in a small web-friendly file size without compromising their quality. Creating Realistic Design Comps with Design Applications

11 When you are creating design comps, it is tempting to use the power of the design tool to create designs that are highly polished or finished. Be careful not to create a design that is so finished that it looks nicer than a browser can actually render on a SharePoint page. Text is one such limitation. In Adobe Photoshop, each piece of text can use different antialiasing techniques. Antialiasing is a mechanism that reduces distortion of images at lower resolutions. Small text in particular appears much smoother in Photoshop than browsers can replicate. To not set expectations too high, it is a good idea to avoid using anti-aliasing with small text. In addition to text antialiasing, consider the appearance and behavior of SharePoint. To accurately replicate SharePoint functionality in a design comp, take screen shots of each of the pieces of SharePoint functionality and paste them into the design. For example, as the Adventure Works Travel design comp is created, various colors and styles are finalized. Stock photos must be acquired, fonts must be selected, and logos must be created. Each element is created in its own layer, and effects such as gradients and borders are created as layer effects to make it easier to make changes later. Capture SharePoint elements such as the Server ribbon or the search box and paste them into the design tool, and finally arrange these elements in an appealing way. Figure 4 shows the final Adventure Works Travel design comp. Figure 4. Adventure Works design composition As you create the design comp, decide how to replicate the concepts in SharePoint. Figure 5 shows the same design comp with labels applied that highlight each functional area. Table 3 describes the functional areas. Figure 5. SharePoint functional areas in a design comp

12 Table 3. Major functional areas in the SharePoint Site design comp Label Functional Area Description A The ribbon Includes all of the standard ribbon elements such as the Site A B C D E Title logo Search area Global navigation Current navigation F Breadcrumbs Uses the SiteMapPath control. G H I J Field control Field control Web Part Web Part

13 Converting the Design Comp into HTML and.css Code Convert the design comp into a functioning HTML page. You can skip this step for simple designs, but for complex designs, completing it enables the designer to work in a familiar environment. The HTML code can be used later to create the master page in a tool such as Microsoft SharePoint Designer By first creating a functioning HTML version, you can finetune the HTML for the master page without having to work around the code that SharePoint adds to the display. When this step is finished, there should be a functionally complete HTML version of the site's key pages. All cascading style sheet code for the basic layout is complete and all images are sliced from the design comp and saved to individual files. There are many toolsets available to designers for creating HTML. Tools range from Notepad or another text editor to simply code the HTML, to professional webpage development tools such as Adobe Dreamweaver or Microsoft Expression Web. The following is a list of some of the advantages that a professional webpage development application can offer to designers: Support for HTML and cascading style sheet code completion WYSIWIG (What You See Is What You Get) design views Tools that help with the creation of cross browser webpages DOCTYPES and SharePoint When you are creating cross-browser compliant HTML, it is important to understand how HTML DOCTYPE declarations work. A DOCTYPE is a declaration that instructs a browser or validator to use a specific language to interpret the HTML or XML code that it describes. Although it is possible to create HTML and even master pages that do not declare a DOCTYPE, without one, browsers can render HTML code in unexpected ways. For example, without a valid DOCTYPE declared, Internet Explorer 8 will render an HTML page in Quirks Mode (which is similar to how Internet Explorer 5.5 would render a page). There are several DOCTYPE declarations in use currently that can cause a browser to render content in a predictable way. The most popular DOCTYPE declarations are the following: HTML 4.01 Strict Allows all HTML elements but does not allow deprecated elements such as the tag. HTML 4.01 Transitional Allows all HTML elements, including the deprecated elements. XHTML 1.0 Strict Similar to HTML 4.01 Strict, but all tags must be well-formed XML (for example, tags must be closed properly). Any deprecated elements are ignored. XHTML 1.0 Transitional Similar to HTML 4.01 Transitional, but all tags must be wellformed XML. Deprecated elements are allowed (but must also be well-formed XML). Because SharePoint 2010 uses the XHMTL 1.0 Strict DOCTYPE declaration in its default master pages, use the XHTML 1.0 Strict DOCTYPE when creating HTML that is intended for use in SharePoint 2010.

14 Note: By default, SharePoint 2010 sites will probably not be 100% valid XHTML 1.0 Strict through any World Wide Web Consortium (W3C) validation checker. Some of the legacy controls are still used in SharePoint Although the pages will not completely validate, the design experience will be more reliable if XHTML 1.0 Strict is used to code SharePoint HTML. The examples in this article use the XHTML 1.0 StrictDOCTYPE. To create an XHTML 1.0 Strict document in an HTML editor tool, ensure that you create a new blank HTML document that specifies DOCTYPE as XHTML 1.0 Strict. (For more information about the XHTML 1.0 StrictDOCTYPE, see the W3C XHTML 1.0 Strict Specification.) The blank HTML page that the tool creates will open with the following markup. HTML <!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.0 Strict//EN"" xmlns= http-equiv="content-type" content="text/html; charset=utf-8" /><title>untitled Document</title></head> <body></body></html> From here, create the rest of the HTML. Be careful to follow the W3C guidelines for creating valid XHTML 1.0 Strict code. For more information about the XHTML 1.0 Strict DOCTYPE, see the W3C XHTML 1.0 Strict Specification. The rest of this section focuses on specific points related to creating HTML for a SharePoint design. For more information about creating HTML code, see the MSDN HTML and DHTML Overviews and Tutorials. Designing SharePoint Sites with or without Tables Another design choice that is often debated is whether the HTML design layout should use tables or whether it should use tags with.css styling. Historically, all HTML layouts were created with tables to allow for a rich UI, but as browsers have evolved, so has the support for cascading style sheet-based layouts. Because HTML tables were originally intended to display tabular information, not to create layouts, they are falling out of favor with web designers. You should consider that by default SharePoint 2010 contains fewer tables than previous versions, and tables are mostly used in SharePoint 2010 only when displaying tabular data. The Adventure Works Travel HTML code does not use tables and uses cascading style sheets for its entire layout. HTML and Future Internet Explorer Compatibility with SharePoint As new versions of Internet Explorer are released, the way HTML is rendered by the browser could change over time. To address the possibility of changes, Microsoft uses the X-UA- Compatible META tag that targets HTML markup to a specific version of Internet Explorer. The default SharePoint 2010 master pages are set to force current and future versions of Internet Explorer to render HTML in Internet Explorer 8 mode like the following markup: <meta http-equiv="x-ua-compatibile" content="ie=ie8" /> The Adventure Works Travel HTML includes the META tag to help ensure future Internet Explorer versions will display the SharePoint HTML properly.

15 For more information about the Internet Explorer Standards Mode, see META Tags and Locking in Future Compatibility. Slicing the Design Comp into Web Images Although creating a design comp is useful for understanding how the webpage should look, use it to create all of the individual images that HTML will load. One great way to break up a large image into individual web images is to use the Slice tool in a design application such as PhotoShop or Expression Blend. To create web images from a design comp, open the Slice tool from the appropriate menu in your design application. Create rectangular selections around all of the areas that have to be made into web images, and be sure to hide any layers that are unwanted in the final images (such as the mocked-up text that SharePoint creates). Click each slice and select an appropriate web image file format. For slices that should not be turned into images, there should be an option to associate a slice with no image. Typically,.jpg files should be used for photos with many colors, and.gif files or.png files should be used for artwork and text or images that need transparent backgrounds. Files in.png format introduce the ability to include faded levels of transparency, while.gif files have only 100 percent transparent areas. Creating the Adventure Works Travel HTML Now that all of the individual web images created, the next step is to code the HTML and.css files for Adventure Works Travel. Adobe Dreamweaver CS3 was used to create an XHTML 1.0 Strict HTML file. The rest of the HTML markup can be found in the associated files that are available for download with this article (see MSDN Sample - Real World SharePoint Branding on MSDN Code Gallery). Note: The HTML in this example does not use tables for layout, but instead frequently uses tags to segment the logical areas of the page. This HTML was checked by using the W3C Markup Validation Service and is XHTML 1.0 Strict compliant. Creating.css files for Adventure Works Travel Because.css code is used for all of the layout design, the HTML markup alone will not create an attractive webpage. Find the.css code that was created to style all of the colors, fonts, images and positions for the elements in the HTML in the associated files available for download with this article (see MSDN Sample - Real World SharePoint Branding on MSDN Code Gallery). This.css file was linked from the Adventure Works Travel HTML file by way of the following code in the <head> section. HTML <link rel="stylesheet" href="style.css" type="text/css"> For more information about creating.css code to style an HTML webpage, see MSDN CSS Reference.

16 Testing SharePoint Webpage Design in Multiple Browsers Now that all of the HTML, images, and.css files are created, you can test the webpage to ensure that it looks as similar as possible to the design comp. Figure 6 shows the finished Adventure Works Travel webpage in Internet Explorer. Figure 6. Completed Adventure Works Travel webpage in Internet Explorer Before converting an HTML design into a functional SharePoint site, test the design in as many browsers as possible. In addition to Internet Explorer, by installing Mozilla Firefox, Google Chrome, and Apple's Safari for Windows, you can test a web design for many different browsing scenarios. Another option for testing in multiple browsers is to use Expression Web Super Preview. This application is available in Expression Web 3 and is also available as a free download that tests only Internet Explorer versions. The full version can test browsers that are not created by Microsoft, such as Firefox. Both versions can display pages side-by-side by using different rendering engines, and both can enable very intricate inspection of even the smallest differences. Creating the Brand in SharePoint Now you will focus on creating a brand in a publishing site. You will learn to work with a starter master page and add custom HTML markup and.css code to create a master page that closely resembles the original Adventure Works Travel HTML page. Finally, you will learn about page layouts, including how to create a page layout for Adventure Works Travel. This section will help you complete the the Adventure Works Travel SharePoint branding.

17 Building a Custom SharePoint Master Page When it comes to building a brand for a SharePoint site, the master page is of central importance. Every page in SharePoint uses a master page for laying out the functionality and content that makes up a SharePoint site. One of the keys to creating a well-branded website with SharePoint is creating a good master page. Because you already created a design comp and authored the design in HTML, you can use it to create a custom master page. Using Content Placeholders in SharePoint In addition to referencing and using all of the specific SharePoint controls, master pages in SharePoint require a specific set of content placeholders. If these required content placeholders are deleted from a master page, SharePoint displays an error in the browser. Many times the required content placeholders are not used in a particular site design; in these cases it is helpful to have a way to hide the required content placeholders. Remove content placeholders from the rendered page without causing an error by nesting them within a hidden panel control. The following code shows a content placeholder placed in a hidden panel. <asp:panel visible="false" runat=server> <asp:contentplaceholder ID=PlaceHolderNavSpacer"> runat="server" /> </asp:panel> For more information about how content placeholders are used in the SharePoint default master page see The Default Content Placeholders on Default.Master in a Windows SharePoint Services 3.0 Site. The SharePoint Starter Master Page Because SharePoint requires many specific content placeholders, creating a custom master page from scratch can be challenging. Although any of the default master pages can serve as the starting point for a new custom master page, they contain a lot of branding code that must be deleted before starting. A better approach is to begin with a starter master page, a preconfigured master page skeleton that includes only the functionality that is absolutely required to create a functioning page in SharePoint. For a list of the content placeholders used in a SharePoint Server 2010 master page, see Upgrading an Existing Master Page to the SharePoint Foundation Master Page. The downloads for this article include a well-commented starter master page designed for use with an Internet-facing publishing site. For the most part, this is a traditional starter master page for SharePoint, but it uses a few publishing-specific elements, most notably the navigation controls. The starter master page should work with most of the default SharePoint 2010 pages including Application pages (such as Site Settings), lists, and documents. Each section of the starter master page has comments that label which functional area of SharePoint is represented. The following sections describe some of the key aspects of working with master pages in SharePoint 2010, specifically as they relate to the starter master. Working with the SharePoint Ribbon

18 The starter master page is set up much like the default master pages so that it has the ribbon "stuck" to the top of the visible page. With the Ribbon Positioning System enabled, SharePoint manages the page scrolling and enables large pages to scroll and still show the ribbon at the top of the browser window at all times. To accomplish this, page scrolling is turned off in.css code and on the tag, and the main body content (everything that is below the ribbon) is placed inside two specific tags, as follows. HTML <div id="s4-workspace"> <div id=s4-bodycontainer">... </div> </div> SharePoint looks for these tags and adds scrolling to only that area and not the ribbon. Because of how the Ribbon Positioning System manages the scrolling and placement of the ribbon, it may be necessary to turn it off and use a more traditional scrolling method when working with very complex.css layouts. To learn more about how the Ribbon Positioning System works, or how to change it to use a more traditional scrolling method, see Customizing Ribbon Positioning in SharePoint 2010 Master Pages. Handling Fixed Width SharePoint Webpage Designs Part of the Ribbon Positioning System in SharePoint 2010 involves setting the page width and height automatically based on how large the browser window is. The default SharePoint branding uses the full browser width for its layout; custom branding that uses a fixed width (often centered in the middle of the page) must have a special.css class named s4-nosetwidth applied to the Workspace element. The starter master page is set to use this instance of the s4- nosetwidth class; it should be removed for designs that must take up the full width of the browser. Working with.css Code in SharePoint Webpage Design One of the key aspects of branding in SharePoint is the cascading nature of the style sheets in.css files. If two.css rules have the same specificity, the.css rule that is loaded last is the style that is applied to an element. For more information about this concept, see the W3C's Assigning Property Values, Cascading, and Inheritance. Microsoft has taken full advantage of the cascade and uses it as the primary means of overriding default styles with custom styles. The bulk of the.css style that is loaded by default in SharePoint comes from the Corev4.css file and several other related.css files that are loaded on the fly by SharePoint 2010 as particular pages need them. Corev4 and the other default.css files are loaded from the[..]\14\template\layouts\1033\styles folder, which is located in the SharePoint root folder where most of the SharePoint installation files can be found. For a list of all of the styles loaded default in SharePoint 2010, see Cascading Style Sheets Class Usage in SharePoint Foundation. A primary branding task is to override the default styles with custom.css that will restyle the SharePoint functionality to match the overall website branding. In SharePoint 2010, Microsoft

19 added the After property to allow custom.css to always come after specific.css files such as the default CoreV4.css file. The following code shows the After property being used to load a custom cascading style sheet. HTML <SharePoint:CssRegistration name="/style Library/sitename/style.css" After="corev4.css" runat="server"/> Note: The After property requires a more complete path to load a.css file after other custom.css files. For example, to load another.css file after the custom style.css file, use the following code. <SharePoint:CssRegistration name="/style Library/sitename/morestyles.css" After="/Style Library/sitename/style.css" runat="server"/> The CssRegistration in the starter master page is set to look for the custom.css in the Style Library of the publishing site under the SiteName subfolder. You should replace the SiteName folder referenced in the starter master page with the name of an actual site. Note: When making references to web files such as a custom style sheet, SharePoint Server 2010 provides the $SPUrl token for making site collection root-relative URLs or site root relative-urls. The style sheet reference in the starter master page could be written to use this functionality, as follows : <SharePoint:CssRegistration name <% $SPUrl:-sitecollection/Style Library/sitename/style.css %> After= corev4.css runat= server /> The benefit of using this method can be seen when branding is deployed to a site collection that is not located at the web application root. Using a URL that is relative to the site collection ensures that styles are loaded from the site collection's own Style Library and not from the root site collection's Style Library. The disadvantage of using this method is that Design View cannot display some assets when referenced this way. For simpli Considering Impact of Branding on SharePoint Dialog Boxes One powerful new feature in SharePoint 2010 is the dialog framework. Many menu pages are loaded in modal dialog boxes that appear over the main page content. This affects branding because by default all custom branding including logos, headers, navigation, and footers all appear inside of dialog boxes. To prevent branding elements from displaying in dialog boxes, SharePoint 2010 provides a cascading style sheet class calleds4-notdlg. When this class is applied to an element, SharePoint 2010 automatically hides that element from dialog boxes. This class I used throughout the starter master page to hide branding from dialog boxes.figure 7 shows custom branding being applied to a dialog box.

20 Figure 7. Custom branding in a dialog box Handling the Name.dll ActiveX Control When displaying Internet-facing publishing sites, Internet Explorer browsers display an annoying message when they do not have the SharePoint 2010 server added to their trusted sites list. This message asks the user to add the Name.dll ActiveX Control. Typically, this control is not used by anonymous users of SharePoint and the request to load it can be quite alienating to users who are not familiar with SharePoint. You can turn off the message on the General Settings page of the Manage Web Applications section of Central Administration. Set Enable Person Name smart tag and Online Status for members to No. You can suppress the message by adding ECMAScript (JavaScript, JScript) code to the master page. The starter master page includes the following JavaScript code, which will hide the message. JavaScript <script type="text/javascript"> function ProcessImn(){ function ProcessImnMarkers () { </script> For more information about presence, see Presence in SharePoint Handling Legacy Browsers In most cases, because Internet Explorer 6 is not a supported browser for SharePoint 2010, Microsoft recommends warning Internet Explorer 6 users that their experience may be degraded. Microsoft provides awarnonunsupportedbrowsers control that can be used in master pages to warn users about unsupported browsers, as shown in the following example.

21 HTML <SharePoint:WarnOnUnsupportedBrowsers runat="server"/> The starter master page uses the WarnOnUnsupportedBrowsers control near the bottom of the code; to turn off the alert, remove that control from the master page. Creating a Master Page with SharePoint Designer After the code for a starter master page is ready, add the master page to SharePoint. Microsoft SharePoint Designer 2010 is well-suited for this task. To add the starter master page to SharePoint by using SharePoint Designer Open a SharePoint Server 2010 publishing site in Microsoft SharePoint Designer In the Site Objects panel, click Master Pages. This is the master page gallery where all master pages and page layouts are created. 3. On the ribbon, click Blank Master Page, and then name it AdventureWorks.master. 4. Click the file named AdventureWorks.master, and on the ribbon, click Edit File. SharePoint opens the new master page with its default content. 5. Select all of the content, and then press Delete to remove it. Next, copy the contents of StarterPublishing.master (available with the article downloads) and paste it into AdventureWorks.master. 6. To save the changes, click Save in SharePoint Designer On the Site Objects menu, click Master Pages, right-click AdventureWorks.master, and then click Check In. On the Check In menu, select Publish a major version, and then click OK. 8. Because there is an approval workflow applied to the master page gallery, a warning appears that says "This document requires content approval. Do you want to view or modify its approval status".click Yes. 9. The SharePoint web interface opens in a browser. If you are challenged to authenticate, log on with your user name and password. 10. The Master Page Gallery opens with a view grouped by Approval Status. Click to the right of AdventureWorks.master, and then click Approve/Reject. 11. For Approval Status, select Approved, and then click OK. Note: To add master pages to SharePoint, check them in as major versions, and publish and approve them before users other than the one who has the file checked out in order to enable users to access a site that has had the master page applied to it. The same is true for any changes to the master page: other users will see updates only if the changes are checked-in as a major version, published, and approved. When working with SharePoint files in SharePoint Designer 2010, be aware that SharePoint puts them in a customized state, which can impact site maintenance. The final section of this article describes the process for deploying branding files to SharePoint in an uncustomized state. Because of customization, it is best to work on branding files in SharePoint Designer only in a development environment, instead of working on final versions of files on a production server running SharePoint. For more information about creating uncustomized files in SharePoint, see Understanding and Creating Customized and Uncustomized Files in Windows SharePoint

22 Services 3.0. Although this article addresses the previous version of SharePoint, all the concepts and code still apply to SharePoint Applying a Master Page With the master page checked in and approved, the next step is to apply the master page to the SharePoint site. To apply the master page to the SharePoint site 1. Click Site Actions, click Site Settings, and in the Look and Feel section, click Master page. 2. For Site Master Page and System Master Page, select AdventureWorks.master, and then click Reset all subsites to inherit the Site Master Page setting. 3. Ensure that the Alternate CSS URL is set to Use Microsoft SharePoint Foundation default styles. Click OK. By applying the master page to both the Site Master Page and the System Master Page, all publishing pages and the application pages will be styled with the custom branding. This is a new feature in SharePoint 2010; by default, in Office SharePoint Server 2007 custom master pages did not apply to Application pages such as the Site Settings menus. One potential disadvantage to applying a highly stylized master page such as Adventure Works Travel as the System Master Page is that more testing is required to ensure that all settings pages and lists render the correct custom branding. The decision to apply a custom master page to the System Master Page is purely a business decision. Note: Custom master pages that are applied to application pages sometimes have specific user interface needs. For example, in Site Settings, the Users and Permissions menus must have the PlaceHolderLeftNavBarcontent placeholder visible in the custom master page to show people and groups. Also, sometimes if elements such as required content placeholders are missing, the Application pages do not display an error. Instead, they revert back to displaying the standard v4.master page. With the starter master page applied, the site's look and feel is blank and ready to have a brand applied to it. The starter master page is certainly not very attractive, but that will be addressed in the following sections. Figure 8. Starter master page applied to a publishing site

23 Adding.css and Image Files to SharePoint The branding for Adventure Works Travel requires.css files and images to work properly. They were all created for the HTML mockup earlier and are included with the downloadable code associated with MSDN Sample - Real World SharePoint Branding. To add branding files to the Style Library 1. From the Site Objects menu, click All Files. From the All Files list in the main window, click Style Library. 2. On the ribbon, click Folder to create a new folder, and name it AdventureWorks. 3. Click the new AdventureWorks folder, and then drag all of the images, favicon.ico, and style.css from the HTML Branding folder in the MSDN Sample - Real World SharePoint Brandingarticle downloads. 4. Select all of the files that were added to the Style Library, right-click, and then select Check In. 5. On the Check In menu, click Publish a major version, and then click OK. Because the Style Library does not have an approval workflow applied to it, approving the files will not be necessary. Building the Master Page with HTML After all of the branding files are added to the SharePoint site, the next step is to start adding in code from the HTML design to the starter master page. While adding the HTML, this is also a good time to start moving areas of the starter master around in the overall layout and make any other site specific changes. Verify that Adventure Works.master is open in SharePoint Designer 2010 and that it is checked out for editing. To check out the file, click Master Pages on the Site Objects menu. In the main window, if there is no green check mark next to AdventureWorks.master, right-click the file, and then click Check Out. For the Adventure Works Travel site, this process begins with the section of the starter master page. Three areas of the section have text for Site Name that can be changed to Adventure Works, including theplaceholderpagetitle, SPShortcutIcon, and CssRegistration placeholders.

24 C# <title runat="server"><asp:contentplaceholder id="placeholderpagetitle" runat="server">adventure Works</asp:ContentPlaceHolder></title> C# <SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/AdventureWorks/favicon.ico"/> C# <SharePoint:CssRegistration name="/style Library/AdventureWorks/style.css" After="corev4.css" runat="server"/> Adventure Works has its own custom style sheet, so the inline.css code that is included in the section of the starter master page can be moved to the path Style Library/AdventureWorks/style.css. Note: You can ignore the entire ribbon section of the code. Unless there are unique circumstances, most master pages can use the default ribbon code. Next, copy and paste everything from the original HTML design between the <form> and </form> tags into the master page after the <div id="mso_contentdiv" runat="server"> tag. The next sections describe which areas of SharePoint functionality will be moved up from the lower parts of the starter master page into the pasted HTML code. Note: Some of information below may be tricky to follow, so it may be helpful to open the final version of the Adventure Works master page, which is available with the article downloads, and follow along. To build the master page with HTML 1. Adventure Works is a public-facing Internet site, and the decision was made to hide the ribbon for anonymous users and instead show a simple User Login link. When users are authenticated, the User Login link disappears and the full ribbon is displayed at the top. The code is not included by default in the starter master page. An <asp:loginview> tag is used to show different HTML code for anonymous users and logged in users. The new custom <div> tag contains that code. HTML <div class="customtopleft"> <asp:loginview id="loginview1" runat="server"> <AnonymousTemplate> <div class="customlogin"<a href="/_layouts/authenticate.aspx">user Login</a></div> <style type="text/css" body #s4-ribbonrow { display: none; </style>

25 </AnonymousTemplate> <LoggedInTemplate> <style type="text/css">.customlogin { display: none; </style> </LoggedInTemplate> <asp:loginview> </div> 2. Because the customtop <DIV> tag should not show in the dialog boxes in SharePoint Server 2010, the s4-notdlg.css class must be added. HTML <div class="customtop s4-notdlg"> 3. The static search HTML is replaced with the PlaceHolderSearchArea placeholder and the SmallSearchInputBox delegate control. HTML <div class="customsearch"> <asp:contentplaceholder id="placeholdersearcharea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:contentplaceholder> </div> 4. The customheader <DIV> tag should not show in the dialog boxes in SharePoint 2010, so the s4-notdlg.css class must be added. 5. The static link back to home (<a class="customlogo" href="#"><img src="logo.png" alt="back to Home" title="back to Home" /></a>), is replaced with a custom logo (<div class="customlogo">) tag and the SharePoint link button <SharePoint:SPLinkButton> and <SharePoint:SiteLogoImage> tag from the starter master page are moved into it. Also, the LogoImageUrl tag is changed from sitename toadventureworks. These changes are shown in the following markup. HTML <div class="customlogo"> <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/"> <SharePoint:SiteLogoImage LogoImageUrl="/Style Library/AdventureWorks/logo.png" AlternateText="Back to Home" ToolTip="Back to Home" runat="server"/> </SharePoint:SPLinkButton> </div> 6. The static navigation is replaced with the SharePoint Global Navigation control and the corresponding data source. You can also remove the.css classes for menu and horizontal

26 orientation from <div class="menu horizontal customtopnavholder"> because SharePoint will now handle this.css code. HTML <div class="customtopnavholder"> <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <SharePoint:AspMenu ID="TopNavigationMenuV4" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"> </SharePoint:AspMenu> </div> 7. The default SharePoint 2010 status bar <DIV> tags are added between the customheader closing </DIV> tag and the custommain <DIV> tag. This is shown in the following markup. HTML </div> <div class="s4-notdlg"> <div id="s4-statusbarcontainer"> <div id="pagestatusbar" class="s4-status-s1"></div> </div> </div> <div class="custommain"> 8. Next, the left navigation will be added. But because the Adventure Works branding has uniquely styled navigation, it is a good idea to show only the branded navigation when an Adventure Works publishing page is created, not on all of the application pages or anywhere else. Use only the content placeholder for PlaceHolderLeftNavBar and remove any of its usual contents, such as the AspMenu and data source placeholders. Removing these placeholders enables the Adventure Works page layout to override the

27 content placeholder with branded navigation, and any other page that needs left navigation can also override it with its own navigation. For pages that do not include left navigation, set up the placeholder to hide the left panel entirely so that there is no empty space on the left side of the interface. Also, notice that the containing <DIV> ID tag and the Class get combined with the custommainleft class from the HTML mockup. This combination allows the default SharePoint.css files to apply to the left navigation and any custom branding for Adventure Works. HTML <div id="s4-leftpanel" class="custommainleft s4-notdlg"> <asp:contentplaceholder id="placeholderleftnavbar" runat="server"> <style type="text/css"> #s4-leftpanel { display: none;.custommainright { width: inherit; padding-left: 10px; </style> </asp:contentplaceholder> </div> 9. In the HTML for the mockup, there is a Trip Planner that appears below the left navigation. In SharePoint 2010, this is a good place for a Web Part zone. You add Web Part zones from page layouts, not from master pages. So to add a Web Part zone, add the PlaceHolderLeftActions content placeholder below the PlaceHolderLeftNavBar content placeholder. The Adventure Works page layout will override theplaceholderleftactions content placeholder, and any page that does not override this placeholder will not display anything in this area of the master page. C# <asp:contentplaceholder id="placeholderleftactions" runat ="server"/> 10. The custommainright <DIV> tag is where much of the page content is. Add the s4- ca class so that SharePoint can control the area with its own cascading style sheet. HTML <div class="s4ca custommainright"> 11. Next, place the breadcrumbs, page title, and page description in their own <DIV> section with the s4-notdlg.css class applied so that they can be hidden for dialog boxes. For the page title and description, this is as simple as adding

28 the PlaceHolderPageTitleInTitleArea and PlaceHolderPageDescription conte nt placeholders. The breadcrumbs involve a bit more work because the default breadcrumb menu for SharePoint 2010 is the pop-up menu on the top left side of the page. This pop-up menu works well for intranet sites, but is not an element that would normally appear on public-facing Internet sites for anonymous users. To duplicate the functionality of a more traditional breadcrumb, use the SiteMapPath class: <asp:sitemappath runat="server" />. HTML <div class="custommaincontent"> <div class="s4-notdlg"> <div class="custombreadcrumbs"> <asp:sitemappath runat="server"/> </div> <h1 class="custompagetitle"><asp:contentplaceholder id="placeholderpagetitleintitlearea" runat="server" /></h1> <asp:contentplaceholder id="placeholderpagedescription" runat="server" /> </div> 12. The remaining content from the HTML mockup that is in the custommaincontent section is handled by the PlaceHolderMain content placeholder and is ultimately supplied by the page layout. This code includes the subtitle, the page content, and the Top Activities (which will be a Web Part). Simply remove all of this section and replace it with the placeholder, as shown in the following example. HTML <asp:contentplaceholder id="placeholderpagedescription" runat="server" /> </div> <asp:contentplaceholder id="placeholdermain" runat="server"/> </div> </div> 13. Because the customfooter <DIV> section should not appear in dialog boxes in SharePoint 2010, add the s4-notdlg.css class.<div class="customfooter s4- notdlg">. 14. Move up the Developer Dashboard code from the starter master page code and place it right after the customfooter closing </DIV> tag. HTML </div> <div id="developerdashboard" class="ms-developerdashboard"> <SharePoint:DeveloperDashboard runat="server"/> </div>

29 15. Remove any of the remaining starter master page code that is located after the Developer Dashboard closing </DIV> tag and before the three closing </DIV> tags and the PlaceholderFormDigest placeholder. At this point, the Adventure Works Travel master page is complete. You should check in the master page, publish it as a major version, and approve it so that users can see the changes. Although the master page is finished at this point, the site still does not look like the final design. The site requires the addition of much more custom.css code to the style.css file before the look is complete. Building Out.css Rules for the SharePoint Site Design When all of the.css files and images were added to the Style Library, they included the style.css file, which included all of the styles that created the look and feel of the HTML design. For the cascading style sheets to work with the additional SharePoint functionality, several changes need to be made to the.css code. This section begins with areas of the HTML design's.css code that must be updated, and then concludes with a large chunk of.css code that is used to style the SharePoint functional elements. Note: Working with.css code in SharePoint can be very challenging because of the sheer volume of.css rules that are applied. With over 5,000 lines of.css code in use at any one time, designers and developers often turn to tools to help them work with.css files in SharePoint. Two such tools are the Internet Explorer 8 Developer Tools and the Firebug FireFox plug-in. Both can be used to inspect and manipulate.css code that is being applied to a webpage (including SharePoint pages). One key feature that is common to both tools is the ability to point to areas of the page and get a better understanding of all of the.css code that is applied to that area, and see which rules are being overridden by the.css cascade. To update the.css code for SharePoint Site Design 1. Add a color to the a:hover style to ensure that the link hover colors match the rest of the links in SharePoint. HTML a:hover { color: #0077b4; text-decoration: underline; 2. Add automatic scrolling (overflow:auto) to the main content area. Note: The branding elements will be used throughout SharePoint including in application pages and in lists so it can be helpful to add automatic scrolling to the main content area. Adding automatic scrolling enables very wide pages to scroll

30 inside of the branding instead displaying outside of the branding and showing up over the background. 3. HTML 4..customMain { 5. width: 100%; 6. background-color: white; 7. min-height: 400px; 8. padding:8px 20px; 9. width:937px; 10. overflow:auto; Adjust the width of the.custommainright class. The width for.custommainright is 760 pixels by default. If left navigation is hidden, the master page or page layout will adjust the width to expand to fill the entire middle area. HTML.customMainRight { width:760px; padding-bottom:15px; float: left; 14. Remove several existing styles from the HTML mockup for areas that will have specific SharePoint styles added later, including styles for the search, navigation, top navigation, and left navigation. You can remove each of the following classes and all corresponding.css code. HTML.menu ul.menu ul,.menu li.horizontal li.customsearch input.customsearchgo.customsearchgo:hover.customtopnavholder li.customtopnavholder li:hover.customtopnavholder li a.customleftnavholder li 15. Add several styles to brand the search area, including hiding the default search button, adding a branded button with a hover, and adding styles for the search box. HTML /* search button hider */.customsearch.ms-sbgo img { display: none;

31 /* fancy search button */.customsearch.ms-sbgo a { display: block; height:17px; width:32px; background:transparent url('but_go.gif') no-repeat scroll left top; margin: 0px; padding: 0px; position: relative; top: 0px; /* search button hover */.customsearch.ms-sbgo a:hover { background-image: url('but_go_on.gif'); /* search box style */.customsearch input.ms-sbplain { font-size:1em; height:15px; margin-right: 5px; background-image: none; color: #999999; 16. Add several styles to handle the various top navigation elements, including hiding the default arrows, the item style and hover state, the dynamic flyout holder, and the flyout item and hover state. HTML /* arrow for flyouts */.menu-horizontal a.dynamic-children span.additional-background,.menu-horizontal span.dynamic-children span.additional-background { padding-right:0px; background-image:none; /* item style */.s4-tn li.static >.menu-item { white-space:nowrap; border:0px none transparent; padding:12px 10px 5px; display:inline-block; vertical-align:middle; color:white; font-family:arial,helvetica,sans-serif; font-size: 105%; font-weight: bold; background-image:url('dottedline.gif'); background-position:right top; background-repeat:no-repeat; background-color:transparent; /* item style hover */

32 .s4-tn li.static > a:hover { color: white; text-decoration: none; background-image:url('nav_hover.gif'); background-position:right top; background-repeat: repeat-x; /* flyout holder */.s4-tn ul.dynamic { background-color:#1e4b68; border:0px none; /* flyout item */.s4-tn li.dynamic >.menu-item { display:block; white-space:nowrap; font-weight:normal; background-color: #1E4B68; background-repeat: repeat-x; padding:4px 8px 4px 10px; font-family:arial,helvetica,sans-serif; border-top: 0px; color: #ffffff; /* flyout item hover */.s4-tn li.dynamic > a:hover { font-weight:normal; text-decoration:none; background-color: #b5d8ee; color: #222222; 17. The left navigation has style applied to only the items in the navigation, not the design. Because the left navigation in Adventure Works Travel will not show flyouts, there are no styles added for those states. HTML /* left nav item style */.customleftnavholder li >.menu-item { background-image:url('arrow.gif'); background-position:left center; background-repeat:no-repeat; border-bottom:1px solid #ECF0EF; padding:4px 0 4px 14px; 18. The Web Parts in the left column need special styling so that their titles include the branding elements, and to reduce some white space and padding. HTML

33 /* Web Part title for left column */.customleftwpholder.ms-wptitle { color:inherit; padding:0px; font-family: Arial,sans-serif; font-weight: bold; font-size: 1.2em; margin-bottom: 0; text-transform: uppercase; background-image:url('ticket_bg.gif'); background-position:left top; background-repeat:no-repeat; height:30px; line-height:34px; padding-left:4px; /* Web Part padding for left column */.customleftwpholder.ms-wpcontentdivspace { padding: 0px; /* Remove some white space from Web Parts in left column */.customleftwpholder.ms-wpheader.ms-wptdspace { display:none; /* remove border from bottom of Web Parts in left column */.customleftwpholder.ms-wpheader td { border-bottom: none; 19. After all of the HTML design styles, several SharePoint-specific.css styles are added. Each of the style rules in this section begins with comments that describe its specific usage. The first few were the styles that were included inline in the starter master page. HTML /* hide body scrolling (SharePoint will handle) */ body { height:100%; overflow:hidden; width:100%; /* Pop-out breadcrumb menu needs background color for Firefox */.s4-breadcrumb-menu { background:#f2f2f2; /* If you want to change the left navigation width, change this and the margin-left in.s4-ca */ body #s4-leftpanel { padding-right:20px; /* body area */.s4-ca { margin-left:auto;

34 /* Fix scrolling on list pages */ #s4-bodycontainer { position: relative; /* Fix the font on some built-in menus */.propertysheet,.ms-authoringcontrols { font-family: Verdana,Arial,sans-serif;; line-height: normal; /* Nicer border between top bar and page */.ms-cui-topbar2 { border-bottom: 1px solid #666666; /* Hide the hover state for the ribbon links */ #s4-ribbonrow a:hover { text-decoration: none; /* Fix ribbon line height */ #s4-ribbonrow { line-height: normal; /* Make site settings links look normal */.ms-linksection-level1 ul li a { font-weight:normal; /* Hide the left margin when dialog is up */.ms-dialog.customcentered,.ms-dialog.custommain,.ms-dialog.custommainright { margin-left:0!important; margin-right:0!important; min-height:0!important; min-width:0!important; width:auto!important; height:auto!important; background-color: white!important; background-image: none!important; padding: 0px!important; overflow:inherit; /* Dialog bg */.ms-dialog body { background-color: white; background-image: none; /* Fix dialog padding */.ms-dialog.s4-wpcell-plain { padding: 4px; After the last style rules are added to style.css, the.css code for the Adventure Works Travel branding is complete. Check in and publish the style.css file as a major version so that end users can see the changes. Figure 9 shows the much improved SharePoint branding. Figure 9. Almost completed SharePoint branding job

35 Note: The content part of the page still does not look like the design mockup. This area will be branded with a custom page layout. Creating a Custom Page Layout Use page layouts as a type of page template in publishing sites to give designers and developers a way to create different types of page designs that will live inside of the master page design. In addition to overriding the content placeholders from the master page, page layouts also define all of the editable content areas of the page with field controls, Web Parts, and Web Part zones. To learn more about the differences between field controls and Web Parts, see Understanding Field Controls and Web Parts in SharePoint Server 2007 Publishing Sites. Although this article targets Office SharePoint Server 2007, the concepts and capabilities still apply to SharePoint Every page layout in SharePoint is created from one specific SharePoint content type. A content type defines all of the site columns that can be used to store data for the page. These site columns make up the available field controls that can be used in the page layout. For simplicity, the Adventure Works Travel page layout will use the existing default Welcome Page content type. This content type has enough site columns to create an Adventure Works Travel page and the existing home page layout can be swapped out easily with the new page layout. To create the Adventure Works travel page layout 1. On the Site Objects menu, click Page Layouts.

36 2. On the ribbon, click New Page Layout. 3. In the New page layout window, do the following: 4. Click OK. For Content Type Group, select Page Layout Content Types. For Content Type Name, select Welcome Page. For URL Name, type AW_Layout.aspx. For Title, type Adventure Works Page. SharePoint Designer opens the new page layout with the PlaceHolderPageTitle and PlaceHolderMain content placeholders already created. C# <asp:content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> <SharePointWebControls:FieldValue id="pagetitle" FieldName="Title" runat="server"/> </asp:content> <asp:content ContentPlaceholderID="PlaceHolderMain" runat="server"> </asp:content> Editing a Page Layout with SharePoint Designer Next, you will edit the Adventure Works Travel page layout by adding field controls and Web Part zones. You can add these elements easily from specific task panes in SharePoint Designer. Note: Page layouts must be edited using Advanced Mode in SharePoint Designer If you attempt to edit a page layout in Normal Mode, all of the content will be highlighted in yellow to indicate that it is not editable. New page layouts are opened automatically in Advanced Mode; when opening existing page layouts, on the ribbon, point to Edit File, and then click Edit File in Advanced Mode. Field Controls Use the Toolbox pane in SharePoint Designer to add field controls to a page layout. Simply drag the field controls you want to use from the Toolbox pane to the content control that will contain them. Web Part Zones To add a Web Part zone to a content control, select the content control in SharePoint Designer by using the Design View or Split View, and then on the ribbon, click Web Part Zone. Adding a Web Part Zone creates an empty Web Part zone that can be given a more useful title to help content authors identify it when editing the page. Finishing the Adventure Works Travel Page Layout

37 Finish the page layout for Adventure Works Travel by adding controls, inline styles, and other elements to it. To finish the Adventure Works Travel Page Layout 1. Add the PlaceHolderAdditionalPageHead content control and some inline styles to control the width of the left and right areas of the page. C# <asp:content ContentPlaceholderID="PlaceHolderLeftActions" runat="server"> <div class="customleftwpholder"> <WebPartPages:WebPartZone id="leftzone" runat="server" title="left Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div> </asp:content> 2. Add the PlaceHolderPageTitle content control to the page layout and add the text Adventure Works - before the PageTitle field control. These actions insert the text before the page title and place all of it into the HTML page title. C# <asp:content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> Adventure Works - <SharePointWebControls:FieldValue id="pagetitle" FieldName="Title" runat="server"/> </asp:content> 3. Add the PlaceHolderPageTitleInTitleArea content control with the TitleField field control inside of it. These controls add the page title before the page content. C# <asp:content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server"> <SharePointWebControls:TextField runat="server" id="titlefield" FieldName="Title"/> </asp:content> 4. Add the PlaceHolderLeftNavBar to the page to add the Related Links title from the HTML mockup, followed by the left navigation AspMenu and data source that was removed from the starter master page. These additions cause the branded left navigation to appear for pages created from this page layout. C# <asp:content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server"> <div class="customtickettitle"> <h1>related LINKS</h1> </div>

38 <PublishingNavigation:PortalSiteMapDataSource ID="SiteMapDS" runat="server" EnableViewState="false" SiteMapProvider="CurrentNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <SharePointWebControls:AspMenu ID="CurrentNav" runat="server" EnableViewState="false" DataSourceID="SiteMapDS" UseSeparateCSS="false" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0" CssClass="customLeftNavHolder" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/> </asp:content> 5. The PlaceHolderMain content placeholder starts with the <WebPartPages:SPProxyWebPartManager /> control, which is added automatically by SharePoint Designer when Web Part zones are being used in a page layout. Next, the Comments field control is added to enable content authors to edit the subtitle of the page. Then, the PublishingPageContent field control is added. This control contains the main publishing HTML content of the page. C# <asp:content ContentPlaceholderID="PlaceHolderMain" runat="server"> <WebPartPages:SPProxyWebPartManager runat="server" id="proxywebpartmanager"></webpartpages:spproxywebpartmanager> <div class="customsubtitle"> <SharePointWebControls:NoteField FieldName="Comments" InputFieldLabel="SubTitle" DisplaySize="50" runat="server"></sharepointwebcontrols:notefield> </div> <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" runat="server"/> </asp:content> This is all of the code that is needed to create the Adventure Works Travel page layout. Before content authors can create pages based on this page layout, the page layout must be checked in, published as a major version, and approved. Changing the Page Layout of a Page With the custom page layout completed, you can create new pages that are based on it. This is certainly useful for filling the site with new content, but there is still one step that must be completed to make the home page look like the initial design comp. Because the home page is using a default page layout, you need to replace the home page with the custom Adventure Works Travel page layout. Note:

39 The site template that is used to create the publishing site determines which page layouts are available to select. Depending on which page layout you used to create your publishing site, you may need to change the available page layouts before your new page layout will be available to select. To change the available page layouts, click Site Actions, point to Site Settings, point to Look and Feel, and click Page layouts and site templates. This settings page has an option for Page Layouts from which the available page layouts can be selected. The easiest way to try out a several page layouts, including the new custom page layout, is to select Pages in this site can use any layout, and then click OK. To switch from the home page to the new page layout 1. Click Site Actions, and then click Edit Page. 2. On the ribbon, click Page, and the click Page Layout. In the drop-down list under the Welcome Page group, select Adventure Works Page. 3. The page refreshes and the new page layout is applied to the page, as shown in Figure 10. Figure 10. Adventure Works Travel home page in edit mode From here, the page can be edited to include any content, including the subtitle, page content, and any Web Parts. In SharePoint Server 2010, Web Parts do not have to be added to Web Part zones; they can also be added to rich HTML content areas in publishing pages and wiki pages. Figure 11 shows the final page with all of the content from the HTML mockup added. Figure 11. Adventure Works Travel home page with all content added in edit mode

40 After all of the changes are finalized, just click the small Save icon at the top left of the ribbon or click Page, and then click Save & Close. If the publishing workflow is activated for the pages library, the page must be published and approved before end users will be able to see the new content. Packaging and Deploying SharePoint Branding At this point, the Adventure Works Travel site branding is created and applied to an existing SharePoint publishing site. Although creating and applying branding in this way works well for testing demonstration purposes, the next step finalizes the branding work by packaging the branding files (including images,.css files, JavaScript and markup in both the master pages and page layouts) in a way that the branding files can be added to other environments. The final package enables site designers to easily distribute the branding files. The following are a few ways to complete this step. Branding Deployment Options To deploy custom branding files, the first option is to simply use the site collection backup and restore. This option is not ideal in an Internet-facing scenario because all of the files will remain as customized files. For more information about the differences and implications of customized and uncustomized files in SharePoint, see Understanding and Creating Customized and Uncustomized Files in Windows SharePoint Services 3.0. When branding files are deployed and managed as customized files, site rebranding campaigns can get complicated. Therefore, an uncustomized branding and management process is preferred, especially for highly trafficked sites and those filled with a significant amount of content. When deploying uncustomized branding files, publishing site implementers can pick from among a few different options when deciding where to deploy the files. The following are the three most popular and common options: Deploy branding files to the site's top-level folder. Deploy branding files to the sites _layouts directory. Deploy branding files to the site collection's content database.