作者blog _ http://www.cnblogs.com/rickie
_ 转载文章
因为最近在做一些定制sps _ UI 的工作,所以从网上收集了一些有用的资料,
我想大概还有不少朋友也需要这样的东西就未经作者同意给转帖出来了
希望作者不要见怪,如果有问题可以找我,我即时删除
_
** 定制 ** ** SPS ** ** 实战记录 ** ** ** ** 系列之二 ** ** **
** Written by: Rickie Lee **
** Dec. 15, 2004 **
本系列主要记录个人在定制 SPS 页面时的过程或其中的一些尝试，难免存在错误或需要改进的地方，欢迎纠正。谢谢。
本篇采用 SPS 内置的属性或 CSS ，来定制 SPS Portal Site 的页面外观。
** 1. ** ** 首先在指定目录创建 ** ** CSS ** ** 文件，并配置 ** ** SPS ** ** 的相关属性 ** ** **
（ 1 ）在如下 SPS 目录创建自定义的 CSS 文件，如 CustomStylesheet.css ，用来定制 SPS 页面外观的显式。
C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES
（ 2 ）配置 SPS 的属性以支持定制的 style sheet
Browse to the portal instance with an account that has administrator privileges.
以管理员身份访问 Portal 站点。
Click Site Settings , and then click Change portal site properties and SharePoint site creation settings .
Update the Location of cascading style sheet file property with the following value:
通过点击 ** Site Settings ** ，并进一步点击 ** Change portal site properties and SharePoint site creation settings ** 。在显示的新页面中，更新 Custom Cascading Style Sheet 的设置：
** /_layouts/[Loc ID]/styles/CustomStylesheet.css **
The portal site now renders HTML elements based on the following order of cascading style sheets:
- OWS.CSS (Windows SharePoint Services style sheet)
- SPS.CSS (SharePoint Portal Server style sheet)
- CustomStylesheet.CSS ( 上述创建的 CSS 文件 )
** 2. ** ** 创建特定目录用来存放 ** ** SPS ** ** 需要的资源 ** ** **
一般在定制 SPS 页面时，需要创建一些资源文件，如图片或 logo 等等，这里建议在如下的 SPS 目录下创建一个新的目录：
1SystemDrive
2```:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES
3
4如，创建一个名称为： rickie 的目录
SystemDrive
1
2然后，可以将对应的资源文件存放在上述目录下，你可以通过如下的 URL 访问：
3
4/_layouts/images/rickie/[Image Name]
5
6** 3\. ** ** 编辑定制 ** ** CSS ** ** 文件 ** ** **
7
8首先打开上述第一步创建的 CSS 文件，并添加如下内容：
9
10.ms-phnavtableone
11
12{
13
14padding-left: 10px;
15
16padding-top: 1px;
17
18padding-bottom: 1px;
19
20}
21
22.ms-phnavtableone a
23
24{
25
26font-family: Tahoma;
27
28font-size: 70%;
29
30font-weight: bold;
31
32color: blue;
33
34text-decoration: none;
35
36}
37
38.ms-phnavtableone a:hover
39
40{
41
42text-decoration: underline ;
43
44}
45
46.ms-phnavtableone 用来定义或控制 horizontal navigation bar 的外部表格。刷新 SPS 页面，看看定制效果。
47
48.ms-phnav1wrapper {
49
50background-image: none;
51
52border-top: 1px yellow solid;
53
54border-bottom: 1px yellow solid;
55
56background-color: #FFCC00;
57
58BACKGROUND-REPEAT: no-repeat;
59
60}
61
62.ms-phnavmidc1sel, .ms-phnavmidc0sel
63
64{
65
66BORDER-top: black 1px solid;
67
68BORDER-left: black 1px solid;
69
70BORDER-right: black 1px solid;
71
72BORDER-bottom: black 1px solid;
73
74}
75
76.ms-phnavmidc1sel a,.ms-phnavmidc0sel a
77
78{
79
80color: green;
81
82}
83
84上述元素用来控制 horizontal navigation bar 的外观显示：
85
86.ms-phnav1wrapper: Wrapper over horizontal navigation bar
87
88.ms-phnavmidc[n](Sel): Middle center of an area in the horizontal navigation bar
89
90Div.ms-titleareaframe
91
92{
93
94border-top: 3px solid #4D917C;
95
96}
97
98.ms-sbtable
99
100{
101
102background-color: #4D917C;
103
104}
105
106.ms-sblbcorner
107
108{
109
110background-image: url(/_layouts/images/rickie/cornerbl.gif);
111
112}
113
114.ms-sbtopcorner
115
116{
117
118background-image: url(/_layouts/images/rickie/cornertop.gif);
119
120}
121
122上面元素用来控制 search box 的外观显示，其中后面的 2 个样式用来引用用户自己创建的 images 文件，这 2 个 images 文件用来控制 search box 左边圆角的显示。
123
124OK. 定制 SPS Portal Site 的页面外观暂告一段落，现在可以刷新页面看看效果。
125
126** References: **
127
1281\. Daniel McPherson, Branding a SharePoint Portal Server 2003 Site: Part 2, How to Apply Your Own Corporate Brand, http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/odc_sp2003_ta/html/Office_SharePointHowToApplyBrand.asp
129
1302\. Dino Dato-on, Jinger Zhao, Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3, http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/odc_sp2003_ta/html/ODC_SPSCustomizingSharePointSites3.asp
131
1323\. Rickie, 定制 SPS 实战记录 系列之一