定制SPS实战记录 系列之二

定制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目录下创建一个新的目录：

<%SystemDrive%>:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES

如，创建一个名称为：rickie的目录

<%SystemDrive%>:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES\rickie

 

然后，可以将对应的资源文件存放在上述目录下，你可以通过如下的URL访问：

/_layouts/images/rickie/[Image Name]

 

 

3. 编辑定制CSS文件

首先打开上述第一步创建的CSS文件，并添加如下内容：

.ms-phnavtableone

{

   padding-left: 10px;

   padding-top: 1px;

   padding-bottom: 1px;

}

.ms-phnavtableone a

{

   font-family: Tahoma;

   font-size: 70%;

   font-weight: bold;

   color: blue;

   text-decoration: none;

}

.ms-phnavtableone a:hover

{

   text-decoration: underline ;

}

 

.ms-phnavtableone 用来定义或控制horizontal navigation bar的外部表格。刷新SPS页面，看看定制效果。

 

.ms-phnav1wrapper {

   background-image: none;

   border-top: 1px yellow solid;

   border-bottom: 1px yellow solid;

   background-color: #FFCC00;

   BACKGROUND-REPEAT: no-repeat;

}

.ms-phnavmidc1sel, .ms-phnavmidc0sel

{

   BORDER-top: black 1px solid;

   BORDER-left: black 1px solid;

   BORDER-right: black 1px solid;

   BORDER-bottom: black 1px solid;

}

.ms-phnavmidc1sel a,.ms-phnavmidc0sel a

{

   color: green;

}

上述元素用来控制horizontal navigation bar的外观显示：

.ms-phnav1wrapper: Wrapper over horizontal navigation bar

.ms-phnavmidc[n](Sel): Middle center of an area in the horizontal navigation bar

 

 

Div.ms-titleareaframe

{

    border-top: 3px solid #4D917C;

}

.ms-sbtable

{

    background-color: #4D917C;

}

.ms-sblbcorner

{ 

    background-image: url(/_layouts/images/rickie/cornerbl.gif);

}

.ms-sbtopcorner

{ 

    background-image: url(/_layouts/images/rickie/cornertop.gif);

}

 

上面元素用来控制search box的外观显示，其中后面的2个样式用来引用用户自己创建的images文件，这2个images文件用来控制search box左边圆角的显示。

 

 OK. 定制SPS  Portal Site的页面外观暂告一段落，现在可以刷新页面看看效果。

 

References:

1. 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

2. 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

3. Rickie, 定制SPS实战记录 系列之一