SharePoint UI 定制（原创）

时间：2022-03-21 16:21:34

在看了Rickie 的定制SharePoint UI 后自己再尝试了一下，总结了些改变SharePoint UI 的经验，主要是修改SharePoint 自身的CSS 文件（修改前先备份）就可以做到改变它基本的图象和颜色，至于再深入需要改得面目全非的话，我也在研究。好了现在先自定义一个CSS 的文件，然后按照Rickie 的方法应用就可以。我这里给出了更多一些CSS 的设置。

/*搜索Web 部件的背景*/
.ms-sbtable
{
 background-color: white; font-family: 宋体; font-size: .7px; font-style: normal; font-weight: normal
}
.ms-sblbcorner
{
}


/*owspers.css*/
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree
{
 
 background-repeat: repeat-x;
 background-color: white;
 
}
.ms-sectionline
{
 background-color: white;
}
.ms-menuimagecell
{
  
    background-color: white;
    cursor:hand ;
   
}
.ms-sectionheader
{
    color: white;
    font-family: arial;
    font-size: 12pt;
    font-weight: bold;
}
.ms-WPHeader
{
 background-color :White ;

    background-repeat: repeat-x;
    BORDER-TOP:  solid 1px white;
}


/*设置导航按钮被选中后的背景*/
.ms-phnavmidc1sel, .ms-phnavmidc0sel
{
 border-right: 1px solid white;
 padding-right: 8px;
 border-top: 1px solid white;
 padding-left: 8px;
 background-image:none;
 
 padding-bottom: 2px;
 border-left: 1px solid white;
 padding-top: 1px;
 border-bottom: 1px solid white;
 background-repeat: repeat-x;
 background-color: white;
 
}
/*曾经修改COLOR 属性*/
.ms-phnavmidc1sel a,.ms-phnavmidc0sel a
{ FONT-WEIGHT: bold; FONT-SIZE: 70%; COLOR: black; FONT-STYLE: normal; TEXT-DECORATION: none }

.ms-location a:link, .ms-location a:visited
{
 font-weight: normal;
 font-size: 9pt;
 color: black;
 font-family: ,Verdana;
 text-align: left;
 text-decoration: none
}

.ms-pvnavmidC1 a:link
{
 overflow: hidden;
 width: 80px;
 color: black;
 TEXT-OVERFLOW: ellipsis;
 text-decoration: none
}


.HtmlMenuButton
{
   background-color:White ;
   font:icon([""]) #ffffff;
   cursor:hand ;
}

.ms-bannerframe
{
 padding-right: 14px;
 padding-left: 0px;
 padding-bottom: 0px;
 padding-top: 0px;
 border-bottom: 0px;
 background-color: white;
}
.ms-tzmidright
{
 padding-right: 6px;
 padding-left: 6px;
 padding-bottom: 6px;
 padding-top: 6px;
}
.ms-navframe, .ms-GRStatusBar
{
 
 background-color: white;
        BACKGROUND-REPEAT: repeat-y;
}

Div.ms-titleareaframe
{
    border-top: 3px solid white;
 
    background-repeat: no-repeat;


}

.ms-ToolPaneFrame .ms-HoverCellInActiveDark
{
    border: solid 1px white;
}
/*WebPart 的头部颜色*/

.ms-WPHeader
{
   background-image: none;
   background-color: #ffffff;
   BORDER-TOP:  solid 1px #FEE8CA;
}

.ms-sitehdr
{
BACKGROUND-POSITION: left center;
BACKGROUND-IMAGE: none
WIDTH: 100%;
BACKGROUND-REPEAT: repeat-y;
BACKGROUND-COLOR: #646464;
padding-left: 5px;
padding-right: 0px;
padding-top:4px;
padding-bottom:4px;
}
.ms-farmhdr
{
BACKGROUND-POSITION: left center;
BACKGROUND-IMAGE:none;
WIDTH: 100%;
BACKGROUND-REPEAT: repeat-y;
BACKGROUND-COLOR: #646464;
padding-left: 5px;
padding-right: 0px;
padding-top:4px;
padding-bottom:4px;
}
.ms-phnav1wrapper
{
 /*导航栏背景图在这里设置*/
 border-top: white 1px solid;
 background-image: none;
 
 width: 100%;
 background-repeat: repeat-x;
 background-color: white;
}
/*帮助按钮的指针 */
.HtmlMenuButton
{
    CURSOR:help ;
}


.ms-tzmidright
{
 padding-right: 6px;
 padding-left: 6px;
 padding-bottom: 6px;
 padding-top: 6px;
 
}
/*menu.css*/
.ms-MenuUI
{
 background-color:white;

}
/*OWS.css*/

.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree
{
 background-image: url(/_layouts/images/topgrad_2.gif);
 background-repeat: repeat-x;
 background-color: white;
}
/* web part 的外观属性*/
.ms-WPDesign {
    background-color: white;
}
.ms-WPMenu {
    background-color: white;
}
.ms-WPTitle
{
 padding-right: 7px;
 padding-left: 6px;
 font-weight: bold;
 font-size: 9pt;
 padding-bottom: 2px;
 color: black;
 padding-top: 2px;
 font-family: simsun-18030, verdana, arial, helvetica, sans-serif;
}
.ms-WPTitle A:link, .ms-WPTitle A:visited
{
    color:black;
    text-decoration:none;
    cursor:hand;
}
.ms-WPTitle A:hover
{
    color:black;
    text-decoration:underline;
    cursor:hand;
}
.ms-WPSelected
{
    border: #f4c660 3px dashed;
}
.ms-WPBody
{
    font-size: 9pt;
    font-family: verdana, arial, helvetica, sans-serif;
}
.ms-WPBody TABLE, .ms-TPBody TABLE
{
    font-size: 1em;
    color:Black ;
}
.ms-WPBody A:link, .ms-WPBody A:visited
{
    color:black;
    text-decoration:none;
}
.ms-WPBody A:hover
{
    color:black;
    text-decoration:underline;
}
.ms-WPBody th, .ms-TPBody th
{
    font-weight:bold;
}
.ms-WPBody td
{
    font-size: 9pt;
    font-family: verdana, arial, helvetica, sans-serif;
}
.ms-WPBody h1, .ms-TPBody h1
{
    font-weight:bold;
    font-size:200%;
}
.ms-WPBody h2, .ms-TPBody h2
{
    font-weight:bold;
    font-size:150%;
}
.ms-WPBody h3, .ms-TPBody h3
{
    font-weight:bold;
    font-size:120%;
}
.ms-WPBody h4, .ms-TPBody h4
{
    font-weight:bold;
    font-size:100%;
}
.ms-WPBody h5, .ms-TPBody h5
{
 font-weight:bold;
 font-size:80%
}
.ms-WPBody h6, .ms-TPBody h6
{
    font-weight:bold;
    font-size:65%;
}
.ms-WPBorder
{
    border-color: white;
    border-width: 1px;
    border-style: solid;
    border-top-width: 0px;
}
/*间隔线*/
.ms-vh,.ms-vh2{
    font-family: verdana;
    font-size: .75em;
    color: white
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    vertical-align: top;
    padding-right:;
}
.ms-vh2{
    padding-left: 4px;
    padding-right: 0px;
}

/*左边间隔线*/
.ms-vh-left {
    font-family: verdana;
    font-size: .75em;
    color: white;
    text-align: left;
    text-decoration: none;
    font-weight: normal;
}
/*右边间隔线*/
.ms-vh-right {
    font-family: verdana;
    font-size: .75em;
    color: white;
    text-align: right;
    text-decoration: none;
    font-weight: normal;
    padding-right: 5px;
}

/*更改连接web part 的字体*/
.ms-vb, .ms-vb2, .ms-GRFont, .ms-vb-user{
    font-family: Simsun-18030, verdana;
    font-size: .75em;
    vertical-align: top;
    padding-right:;   
}
.ms-vb a, .ms-vb2 a, .ms-GRStatusText a,.ms-vb-user a {
    color: black;
    text-decoration: none;
}
.ms-vb a:hover, .ms-vb2 a:hover, .ms-vb-user a:hover {
    color: black;
    text-decoration: underline;
}
.ms-vb a:visited, .ms-vb2 a:visited, .ms-GRStatusText a:visited, .ms-vb-user a:visited  {
   color: black;
   text-decoration: none;
}
.ms-vb a:visited:hover, .ms-vb2 a:visited:hover, .ms-vb-user a:visited:hover {
    color: black;
    text-decoration: underline;
}
.ms-vb2, .ms-vb-title, .ms-vb-icon,.ms-vb-user {
    border-top: 1px solid black;
}
.ms-vb-icon {
    vertical-align: top;
    width: 16px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 0px;
    padding-bottom: 0px;
    background-image:none;
}
.ms-vb-user {
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 0px;
}
.ms-vb2{
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
}
.ms-homepagetitle {
    font-family: arial;
    font-size: 12pt;
    color: black;
    font-weight: bold;
    text-decoration: none;
}
a.ms-addnew {
    font-weight: normal;
    font-family: verdana;
    font-size: .75em;
    color: #003399;
    text-decoration: none;
}
td.ms-addnew {
    padding-left: 7px;
    padding-right: 0px;
}
/*更改搜索栏需要的图片*/
.ms-sblbcornerRTL
{  /*找到cornerbRTL.gif，并修改成你自己需要的颜色*/
 background-color: #FFFFFF;
 background-image:none;
 background-repeat: no-repeat;
 background-position: right top;
 padding-left: 0px;
 padding-right: 5px;
 padding-bottom: 4px

}
.ms-sbtopcorner
{ 
  /*找到cornertop.gif，并修改成你自己需要的颜色*/
 background-image:none;
 
 background-repeat: no-repeat;
 background-position: left top;
 border-bottom-width: 0px;
}
.ms-sblbcorner
{ 
  /*找到cornerbl.gif，并修改成你自己需要的颜色*/
 background-color: #FFFFFF;
 background-image:none;

 background-repeat: no-repeat;
 background-position: right top;
 padding-left: 0px; 
 padding-right: 5px;
 padding-bottom: 4px
}
.ms-sbtopcornerRTL
{ 
  /*找到cornertopRTL.gif，并修改成你自己需要的颜色*/
 background-color: #FFFFFF;
 background-image: none;
 background-repeat: no-repeat;
 background-position: left top;
 border-bottom-width: 0px;
}
/*三角型按钮属性*/
.ms-HoverCellInActive
{
    border: none;
    margin: 1px;
    background-color: transparent;
   
}
.ms-HoverCellActive
{
    border: white 1px solid;
    background-color: white;
}
.ms-HoverCellActiveDark
{
    border: solid 1px white;
    background-color: white;
}
/*连接web 部件 属性*/
.ms-SPLink
{
    font-family:verdana;
    font-size: 9pt;
    color: black
}
.ms-SPLink A:link, .ms-SPLink A:visited
{
    color:black;
    text-decoration:none;
}
BODY
{
 background-color:White;
}

 


参考:
http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/odc_sp2003_ta/html/ODC_SPSCustomizingSharePointSites2.asp
http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/odc_sp2003_ta/html/ODC_SPSCustomizingSharePointSites3.asp

标签：

相关文章