Thủ thuật Sharepoint 2010 part 92 pot

690  CHAPTER 23 BraNdiNg sharePoiNt 2010 FIGURE 238 7. Click OK. Now when you browse to the root of your site, it should open your new publish- ing home page. TYPES OF SHAREPOINT SITES: INTERNET VERSUS INTRANET When setting up a SharePoint site, it is important to understand the kind of content it will be host- ing. SharePoint sites have been historically categorized as collaboration, communication, or both. Collaboration sites are focused on facilitating information sharing; typically there are many content authors and contributors. Communication sites are focused on publishing information to users and typically have few content authors and many consumers of information. From a branding perspec- tive, however, it’s important to also consider the general audience that is visiting the site. Is the site going to be a public Internet site where communication is key, or will it be an internal intranet site where the focus is typically collaboration but sometimes also includes communication? Table 23-1 highlights some of the key differences between the two. TABLE 231 Internet versus Intranet Sites INTERNET SITES INTRANET SITES Public facing Internal facing. Marketing driven Information and collaboration driven. Mostly anonymous users Typically all users authenticate. Few authors, many viewers Many authors, collaborators, and viewers. Tightly controlled content Freely created content. Many dierent types of browsers Browsers can be controlled by administrators. Types of SharePoint Sites: Internet versus Intranet  691 Because Internet sites are public facing, they often feature heavily customized branding. Two great examples of branded Internet sites that were built with SharePoint are SharePoint911.com (see Figure 23-9) and Kroger.com (see Figure 23-10). You can fi nd many excellent examples of public-facing SharePoint sites at http://www.wssdemo.com/Pages/websites.aspx. FIGURE 239 692  CHAPTER 23 BraNdiNg sharePoiNt 2010 FIGURE 2310 Intranet sites typically feature less branding than Internet sites; often the focus is on getting work done rather than marketing something. The out-of-the-box default SharePoint 2010 Team Site lay- out is often a good starting point for SharePoint intranet site designs. Figure 23-11 shows the default layout for Team Sites. Types of SharePoint Sites: Internet versus Intranet  693 FIGURE 2311 This doesn’t mean that all corporate intranets need to be identical. Often, companies want to have their branding apply to their intranet sites even if it’s just a hint of their corporate style. Figure 23-12 shows a sample branded SharePoint 2010 intranet site. FIGURE 2312 694  CHAPTER 23 BraNdiNg sharePoiNt 2010 Because Internet sites and intranet sites focus on such different goals, administrators need to con- sider these differences when configuring SharePoint. For example, intranet sites often need more site collection owners and more intricate security groups than public Internet sites. BRANDING BASICS FOR SHAREPOINT 2010 Depending on your skill level with traditional web development, ASP.NET, and SharePoint, it can be intimidating to consider all of the options for creating a branded SharePoint site. In fact, there are three major approaches to creating branding in SharePoint 2010, ranging from very simple (low effort) to complex (high effort). Figure 23-13 shows the three approaches. Low Eort Out of the Box Master Pages and Themes Medium Eort Custom Themes with or without Alternate CSS High Eort Custom Master Pages FIGURE 2313 Low effort  — This approach uses the out-of-the-box SharePoint master pages and themes to create a simple branded SharePoint site. Without doing anything custom, you can cre- ate many color combinations and styles. SharePoint Server 2010 provides two master pages — v4.master and nightandday.master — to choose from, both of which can be styled using any of the 20 out-of-the-box SharePoint 2010 themes. Medium effort  — This approach combines the out-of-the-box master pages with custom themes and/or Alternate CSS, which is covered later in the section “Applying CSS to SharePoint.” You will see in the next section that themes are much easier to create in SharePoint 2010 than they were in SharePoint 2007. Themes can be used with the out-of-the-box master pages to add cor- porate colors and fonts, but the medium effort approach can be taken even further by adding custom background images through the use of Alternate CSS. High effort  — To create Internet and intranet sites that have a high level of customization, the high-effort approach is the best choice. It includes creating custom master pages, custom CSS, and even potentially some custom page layouts. This approach is good if you have prior experi- ence with traditional web design or some knowledge of how master pages work in ASP.NET. Branding Basics for SharePoint 2010  695 To understand how branding works in SharePoint 2010, it’s important to talk about the major tech- nologies that are involved. These include themes, master pages, page layouts, and cascading style sheets (CSS), so we turn to those topics now. Themes In many ways, SharePoint themes are the first and easiest option for creating light branding for a SharePoint site. They enable site owners and designers to apply a set of 12 colors and 2 fonts throughout any of the out-of-the-box branding and even custom branding. If you are used to how themes worked in SharePoint 2007, you may be in for a shock with SharePoint 2010, as Microsoft has completely revamped the way themes are created and how they work in SharePoint. In SharePoint 2007, creating a theme involved creating a lot of CSS and images, placing them on the file system in the 12 folder, editing both an . INF file and an XML file, and then, for icing on the cake, you also had to run IISRESET and select and apply the theme on every site. This process was difficult for both those creating the themes and those who had to administer and maintain them. Behind the scenes, when a page was loaded, both the SharePoint core CSS file and the theme CSS file would be loaded by the browser, with the theme’s CSS usually showing on the page because it was loaded last. That entire process has changed for SharePoint 2010; now themes can be created in the Microsoft Office client software (either Word 2007/2010 or PowerPoint 2007/2010). This creates a . THMX file, which describes the 12 theme colors and 2 fonts available in the new SharePoint themes. These . THMX files can be uploaded into SharePoint and applied to any site. Unlike in SharePoint 2007, the new themes do not apply CSS after the core CSS; instead, SharePoint actually looks for a special type of CSS comment and injects the new CSS into the core CSS so that only one file has to be loaded by the web browser. If you were to look at coreV4.css, you would see many comments like the following throughout: /* [ReplaceColor(themeColor:”Accent1”)] */ color: red; When a theme is applied, SharePoint will look for these comments and apply the Accent 1 color to whatever CSS rule is directly below it. Unlike SharePoint 2007 themes, the new themes in SharePoint 2010 do not have the capability to define custom background images. If you have a SharePoint 2007 theme that uses a lot of custom background images, probably the best way to move forward to SharePoint 2010 is to either convert that theme into a custom master page or perhaps use the Alternate CSS feature in SharePoint Server 2010. Although you cannot define a custom background image in SharePoint 2010 themes, a feature unique to SharePoint 2010 enables you to tint or color existing images with the theme comments. To put it another way, any background images that are being defined in the SharePoint core CSS or cus- tom CSS, whether they are applied with a master page or Alternate CSS, can be colored on the fly by themes. Here is a sample of what the CSS comment would look like: /* [RecolorImage(themeColor:”Accent2”,method:”Tinting”)]*/ background:transparent url(“Header.png”) no-repeat scroll top left; 696  CHAPTER 23 BraNdiNg sharePoiNt 2010 When SharePoint sees this comment it will create a version of the Header.png image that is tinted in the same color as Accent 2. From an administrative standpoint, note that when applying themes to custom branding, the custom CSS and image files should be located in one of several Themable directories: On the server file system in 14 folder:  14\TEMPLATE\LAYOUTS\1033\STYLES\Themable In the site collection’s Style Library directly under the root:  /Style Library/Themable/ In the site collection’s Style Library directly under any language code folder:  /Style Library/en-us/Themable/ By placing your CSS files in these locations or any subdirectories created below them, SharePoint will look for any valid CSS comments and apply the colors and fonts. Anywhere else will be ignored and the theme colors will not be applied. Using Microsoft Oce Themes in SharePoint 2010 Here are the steps for creating and using a Microsoft Office theme in SharePoint 2010 using PowerPoint 2010: 1. Open PowerPoint (2010) and either create a new PowerPoint file or use an existing PowerPoint presentation. 2. On the Ribbon, switch to the Design tab and click Colors, and then select Create New Theme Colors (see Figure 23-14). Notice that there are two dark and two light Text/Background colors, six Accent colors, and two Hyperlink colors. One thing to consider here is that the Accent 1 through 6 colors correspond well to the bullet indention levels in PowerPoint, but they are more subjective in SharePoint. Some experimentation is typically needed before getting the right combina- tion. One good strategy is to pick colors that are similar or complementary. Figure 23-15 shows the menu for creating new theme colors (this figure loses some impact in a black- and-white book). 3. After selecting a color scheme, click Save. 4. Back on the Ribbon, click Fonts Create New Theme Fonts (see Figure 23-16). Branding Basics for SharePoint 2010  697 FIGURE 2314 FIGURE 2315 698  CHAPTER 23 BraNdiNg sharePoiNt 2010 FIGURE 2316 Notice that there are options to set both the Heading and Body font and that the selection includes many of the fonts installed on the client computer. Because these fonts will be used in SharePoint and loaded from an Internet browser, be sure to pick fonts that are common across multiple operating systems. Figure 23-17 shows the dialog for creating new theme fonts. 5. After selecting the two fonts, click Save. 6. Up until now, your selections were being saved in the local PowerPoint file. To export the theme for use in SharePoint, click the small “more” button (the downward-pointing arrow) on the right side of the Themes section of the Design tab in the Ribbon (see Figure 23-18). FIGURE 2318 FIGURE 2317 Branding Basics for SharePoint 2010  699 7. At the bottom of the All Themes dialog, shown in Figure 23-19, click Save Current Theme, select a location, name it demo.thmx, and click Save. This saves the .THMX file so that it can be used in SharePoint. FIGURE 2319 8. Open a SharePoint 2010 site in a browser, login, and click Site Actions Site Settings Galleries Themes. This will load the document library view of the available themes, as shown in Figure 23-20. FIGURE 2320 [...]... the Select a Theme options Figure 23-24 Figure 23-25 shows the SharePoint site with the theme applied Of course, because this book is in black and white, you’ll have to try it yourself if you want to see the results Figure 23-25 702  ❘  Chapter 23   Branding SharePoint 2010 Adjusting a Theme with SharePoint Server 2010 SharePoint Server 2010 has unique functionality that enables site owners and designers... Figure 23-27 Branding Basics for SharePoint 2010 ❘  703 Along with the colors, two font options can be changed from the Customize Theme dialog Note that all of the fonts installed on the server are available for selection This can be particularly troublesome because site owners can select inappropriate fonts such as Wingdings One last design option that is available in SharePoint Server 2010 publishing sites... functionality that enables site owners and designers to adjust the theme color and fonts directly in the web user interface SharePoint Foundation users are limited to editing SharePoint themes using the Office client software To change the theme attributes in SharePoint Server 2010, simply click Site Actions ➪ Site Settings ➪ Look and Feel ➪ Site Theme From there, the Customize Theme section will display... clicking Save (see Figure 23-23) Now the new theme is ready to be selected for use in SharePoint To select the theme, click Site Actions ➪ Site Settings ➪ Look and Feel ➪ Site Theme Figure 23-23 Branding Basics for SharePoint 2010 13 ❘  701 From the Select a Theme dialog, select your new theme from the list If you have SharePoint Server, you can preview the theme by clicking Preview or you can apply... page from one central location Because SharePoint is built on top of ASP.NET, master pages in SharePoint work very similarly to those in traditional ASP.NET sites Master pages can be thought of as the glue that holds together, and arranges and styles, all of the SharePoint functionality that is seen when a page is loaded in the browser Pretty much every page in SharePoint requires an associated master... the subsites below it to the same theme There was no equivalent option in SharePoint 2007 themes, and it can be quite useful for projects with many subsites Once all of the changes are made, clicking Apply will refresh the site with the new colors and fonts that were selected The great thing about how themes work in SharePoint 2010 is that they are self service From an administrative standpoint, your... Content Page Figure 23-28 Unlike themes, custom master pages enable you to change almost all aspects of how SharePoint looks From a branding point of view, master pages can be thought of as the outer design or “chrome” of a website Master pages in SharePoint consist of HTML for layout, CSS for styles, SharePoint controls, and content placeholders Content placeholders can be thought of as a type of container...700  ❘  Chapter 23   Branding SharePoint 2010 9 To add the new theme, from the Ribbon select Documents ➪ Upload Document (see Figure 23-21) Figure 23-21 10 From the Upload Document dialog, click Browse, find the saved demo.thmx file,... styles, all of the SharePoint functionality that is seen when a page is loaded in the browser Pretty much every page in SharePoint requires an associated master page When a page is loaded in the browser, SharePoint sees the reference to a master page and combines the page content with the master page to create one seamless page that is displayed to the user Figure 23-28 shows the relationship between master... is that they are self service From an administrative standpoint, your users should be able to create their own color-schemed sites without needing to ask you to mess with XML files or put files in the SharePoint root folder Master Pages If you think back to the olden days of web development, every page on a website contained all of the HTML and design elements that made up what was seen If a change . the Alternate CSS feature in SharePoint Server 2010. Although you cannot define a custom background image in SharePoint 2010 themes, a feature unique to SharePoint 2010 enables you to tint or. see the results. FIGURE 2325 702  CHAPTER 23 BraNdiNg sharePoiNt 2010 Adjusting a Theme with SharePoint Server 2010 SharePoint Server 2010 has unique functionality that enables site owners and. Microsoft Oce Themes in SharePoint 2010 Here are the steps for creating and using a Microsoft Office theme in SharePoint 2010 using PowerPoint 2010: 1. Open PowerPoint (2010) and either create a new