Thủ thuật Sharepoint 2010 part 92 pot

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 cre

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

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 different 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

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

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 Effort

Out of the Bo

x Master Pages and Themes

Medium Effort

Custom Themes with or

without Alternate CSS

High Effort

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;

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 office 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

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

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, and click Open Then click OK in the Upload Document dialog (see Figure 23-22)

FIguRE 23-22

11 When the save dialog opens, you can change the filename here or just save the selection

by clicking Save (see Figure 23-23) Now the new theme is ready to be selected for use in SharePoint

12 To select the theme, click Site Actions➤➪ Site Settings➤➪ Look and Feel➤➪ Site Theme

FIguRE 23-23

Branding Basics for sharePoint 2010 ❘ 701

13 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 it to the site immedi-ately by clicking the Apply button Figure 23-24 shows 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

adjusting a Theme with sharePoint server 2010

SharePoint Server 2010 has unique 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 all of the same options that are available from the Office client software Figure 23-26 shows the Customize Theme options

FIguRE 23-26

The color picker is a very useful addition to this dialog Site owners and designers do not have to rely on previous knowledge of how colors are defined in web pages To see a color in action, click Select a color Figure 23-27 shows the color picker

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 trou-blesome because site owners can select inappropriate fonts such as Wingdings

One last design option that is available in SharePoint Server 2010 publishing sites is the capability to apply the theme to the current site and reset all of 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 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 had to be made to the general look and feel, every single page had to be edited individually This led to websites that were difficult

to maintain, and often resulted in pages being skipped or errors being introduced ASP.NET 2.0

fixed this problem by providing a separate master page that controls the many aspects of the layout

of each 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 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 pages and page content

Web

Request:

Response:

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 that loads matching pieces of content from the referring page