z7369 发表于 2015-9-27 12:03:12

如何修改sharepoint首页样式

  Project Server首页是架设在sharepoint之上的,修改Project Server首页和修改sharepoint首页是一样的。
  首页上图,看看我们的最初的ProjectServer首页是什么样子:
  

  
  因为既有顶栏菜单又有左侧树结构菜单,这让人感觉很不和谐,我们之前做过的门户网站都是只有顶栏菜单。
  话不多说,现在开始怎么修改sharepoint的masterpage达到我们的目的。
  首页,我们找到我们的顶栏菜单,在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\template\GLOBAL\v4.master下,将v4.master打开,可以找到我们的顶栏菜单是:



<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn"/>

  我们找到s4-tn,在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\template\layouts\2052\STYLES\Themable\COREV4.CSS下面,可以找到其样式,我们觉得这个样式不好看,怎么办,用我们自己的menu样式替换它。
  从网上找到一处还过得去的menu样式:



.nav {
background:#06c;
float:left;
width:100%;
}
.nav li {
display: inline;
list-style-type: none;
}
.nav li a:link,.nav li a:visited {
float:left;
padding:5px 12px;
color:#fff;
text-decoration: none;
background:#06c;
border-right: 1px solid #fff;
}
.nav li a:hover {
background:#060;
}

  果断地将CssClass="nav",就可以看到我们的菜单变化了,变成我们现在的nav样式,如果不能马上看到效果建议重启下IIS。
  但是,我们的左侧菜单还是在那里,怎么样将其去掉,找到我们的左侧菜单,包含在<div id="s4-leftpanel" class="s4-notdlg">下面,这下好办,将div的display=none即可。
  <div id="s4-leftpanel" class="s4-notdlg" >
  我们看下效果,菜单虽然不见了,但它还是占了位置,我们右边的内容没有置左,怎么办?一定是css的问题。
  我们找到右侧内容部门的div,在这个地方<div class="s4-ca s4-ca-dlgNoRibbon" id="MSO_ContentTable">
  然后我们找到它的css,同样在corev4.css下面,搜索s4-ca,我们找到一处css



.s4-ca{
/* */ background:#fff;
margin-left:132px;
margin-right:0px;
min-height:324px;
}

  看到了吧,它的样式没有置左,果断地将margin-left:0px;
  保存后重启IIS,可以不重启,只是为了保险。
  现在我们可以明显地看到我们的首页变化了,变的比原来好看了,更像是一个门户系统了。

  大家看看,是不是美观了些呢?
  
页: [1]
查看完整版本: 如何修改sharepoint首页样式