.NET开发

本类阅读TOP10

·NHibernate快速指南(翻译)
·vs.net 2005中文版下载地址收藏
·【小技巧】一个判断session是否过期的小技巧
·VB/ASP 调用 SQL Server 的存储过程
·?dos下编译.net程序找不到csc.exe文件
·通过Web Services上传和下载文件
·学习笔记(补)《.NET框架程序设计(修订版)》--目录
·VB.NET实现DirectDraw9 (2) 动画
·VB.NET实现DirectDraw9 (1) 托管的DDraw
·建站框架规范书之——文件命名

分类导航
VC语言Delphi
VB语言ASP
PerlJava
Script数据库
其他语言游戏开发
文件格式网站制作
软件工程.NET开发
定制SPS实战记录 系列之二

作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站

作者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目录下创建一个新的目录:

<%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文件,这2images文件用来控制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实战记录 系列之一



 




相关文章

相关软件