SharePoint 2010的网站主题

从SharePoint 2003开始，主题就作为一种自定义SharePoint外观的重要选项。SharePoint 2003和2007中的包括一系列开箱即用的主题，可以被网站所有者通过SharePoint UI应用到SharePoint网站。网页设计师和开发人员可以创建包含自定义图片及CSS文件的自定义主题。
定制SharePoint 2007主题的一个问题是，网页设计师或开发人员需要创建自定义的CSS，图片和相关的主题注册文件才能实现主题的自定义。而且需要将其部署到SharePoint Web前端服务器的本地文件系统上。这样无疑就提高了主题定制的门槛，因为需要一定的技术知识和对物理服务器的访问权限，所以非技术人员和最终用户很难对SharePoint网站视觉设计进行灵活的修改。

SharePoint 2010也支持主题，但其工作机制已发生很大变化。Miicrosoft对整个主题框架进行大调整的目的之一就是，希望非技术用户能够方便的进行站的视觉设计，并能够通过SharePoint用户界面对主题进行定制。

使用主题

全新的主题编辑器可以在"网站设置"下"外观"里的"网站主题"下找到，页面上提供了一个列表框，可以选择某个主题。这和SharePoint 2007里的页面一样，可以看到很多熟悉的主题名称，尽管主题本身已经发生了很大的变化。

现在，我们可以通过SharePoint用户界面选择一个主题，然后定制其字体和颜色。SharePoint 2010主题的一大优点就是更加标准化：

4种控制背景和文字的颜色（深色1[Dark1]，浅色1[Light1]，深色2[Dark2]，浅色2[Light2]），作为该主题的核心色调。这些颜色将作为该主题样式的主旋律，并最大程度的影响网站的整体外观。
6种强调色(accent)可以使您设计的风格更加成熟，允许我们最大程度的控制激活或悬停超链接的颜色，边框的颜色，特定内容的文字颜色（如系统菜单，组标题，标题区等）。
两种字体用于标题和内容元素。
两种颜色用于超链接<hyperlinks>（正常[normal]的和访问过后的[followed]）

除了直接提供给用户选择的颜色外，主题生成器会为每种颜色自动生成5种附加色（通过亮变化和暗变化）。每一种变化所使用的标签为（以强调文字颜色 1 [Accent 1]为例）：

强调文字颜色 1 （用户选定的颜色）
强调文字颜色 1 – 最亮 [Accent 1 - Lightest]
强调文字颜色 1 – 偏亮 [Accent 1 - Lighter]
强调文字颜色 1 – 中等 [Accent 1 - Medium]
强调文字颜色 1 – 偏暗 [Accent 1 - Darker]
强调文字颜色 1 – 最暗 [Accent 1 - Darkest]

色彩和色调变化是网页设计师进行视觉设计时的常用技法，常用于边框效果，渐变等。在本文的后面部分，我将演示这些色彩是如何通过CSS文件的方式来引用的。

剖析一个主题

SharePoint 2007里的主题是一个由CSS，图片，主题信息文件组成的集合，存放在相对于SharePoint的根目录的下。在SharePoint 2010里，你仍然可以找到2007的主题，历史的原因，仍放在相同的相对目录14\Template\Themes下。

然而，真正的SharePoint 2010主题实际上存放在相对于SharePoint根目录的14\Template\Global\Lists\Themes下。格式也已经发生了很大的变化。主题现在使用Office Open XML的格式进行了打包，变成一个.THMX文件。

THMX文件是一个包含了主题样式XML定义和图片资源的zip文件。一个主题文件内部结构的完整描述已经超出了本文的范围，你可以参考MSDN上的文章来“创建Office Open XML格式的文档主题”。

主题也可以通过"网站设置"下"库"下面的"主题"来查看，这种方式打开的是主题库。

主题如何用于页面呈现

SharePoint 2010关联到CSS的方式与SharePoint 2007大致相同，都是采用了在母版页<HEAD>部分添加控件的方式。

<SharePoint:CssLink runat="server" Version="4"/>
<SharePoint:CssRegistration Name="/Style Library/Custom.css" After="true" runat="server" EnableCssTheming="true"/>
<SharePoint:Theme runat="server"/>

虽然我们一直以来都习惯通过标准的HTML<link>属性来在母版页中包含CSS样式表，但是CssLink，CssRegistration和Theme控件可以提供特殊的功能，因此这种方式在2010中继续作为一种在我们的设计中插入样式表关联的推荐方式。这里给出每个控件的简要介绍：

<SharePoint:CssLink>控件负责插入SharePoint默认的核心样式表和任何通过CssRegistration控件注册的自定义样式表。
<SharePoint:CssRegistration>控件允许注册任何自定义的CSS样式。实际插入到页面中的<link>是通过CssLink控件完成的。
<SharePoint:Theme>控件会检查是否有主题被应用到当前站点，并负责关联到主题的样式表。
注：由于历史的原因，本控件似乎仍然包含在SharePoint 2010母板页中。对于SharePoint 2010主题，该控件似乎不再是必需的。

还是上面的例子，让我们来看看在没有应用主题时页面输出的<link>：

<link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/search.css?rev=13MPCAdDiTOjeBSP8ulMLA%3D%3D"/>
<link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/wiki.css?rev=YwZnjCtjmh%2B5m0%2BZ4o%2Fw%2Fw%3D%3D"/>
<link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/corev4.css?rev=hMUVPfEXdjj0KHpLKexFuA%3D%3D"/>
<link rel="stylesheet" type="text/css" href="/Style%20Library/Custom.css"/>

在上面的例子中，我们可以看到通过CssLink控件插入了数个SharePoint自带的样式表。同时还可以看到，我自定义的CSS也已经输出在最后一行，直接关联到样式库中存储的原始CSS文件。

在应用了一个现成的主题后，我们可以看到，SharePoint修改了输出到页面的样式表关联。

<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/search-BBB12040.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/wiki-8D6982C.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/corev4-24A0E46F.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/Custom-37A53504.css?ctag=6"/>

在SharePoint 2007里，应用主题后会在页面的输出中插入一个额外的样式表关联。该主题中包含的样式将会通过CSS的层叠行为覆盖任何核心样式或自定义样式。

在SharePoint 2010中的行为已经发生了改变。当一个主题应用时，SharePoint会实时的自动生成该主题的CSS和图片，并将它们存储在应用该主题的站点的_themes文件夹下。

如果我们用SharePoint Designer打开该网站，可以看到SharePoint创建的这个文件夹，其中包含了生成的主题文件。文件夹名称是一个唯一的数字标识符，该数字是在应用一个新的主题时生成的。

要注意的很重要的一点是，SharePoint已经用主题化后的变体替代了所有原来的CSS关联。在SharePoint 2010里，当生成一个主题时，SharePoint利用嵌入在原先样式表中的指令来生成替换后的样式表。这种自动生成和替换只有在满足以下两个条件的情况下才会触发：

自带的样式表是*主题化(themable)*的。这些样式表实际上可以很容易的通过引用它们的虚目录区分出来，因为它们位于_layouts/2052/styles/themeable目录中。
用于我们的自定义样式表的CSSRegistration控件需要具有 EnableCssTheming=”true” 这一属性。

如果我们没有启用CSS主题化，那么SharePoint会把我的自定义样式表输出在页面最后一行，并且仍旧直接关联到样式库中原来的CSS文件。

<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/search-BBB12040.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/wiki-8D6982C.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/corev4-24A0E46F.css?ctag=6"/>
<link rel="stylesheet" type="text/css" href="/Style%20Library/Custom.css"/>

注意：并有没有硬性的规定说自定义样式表必须支持主题，只是在SharePoint 2007基础上多了一种选择。在SharePoint 2010里，你完全可以根据所要达到的效果选择合适的方式将自定义样式表关联到母版页，并且取消用户应用主题的能力。这种情况往往会在发布网站上碰到，往往是这类网站共同的做法。网站管理员不希望用户覆盖默认的样式。

在自定义样式表中支持主题

在SharePoint 2007中，核心和自定义样式表不需要考虑任何与主题相关的事情。 SharePoint使用CSS的层叠能力使用主题中的CSS直接覆盖关联到母板页的核心和默认的自定义样式。

在SharePoint 2010中此行为发生了变化。现在核心样式表和任何我们开发的自定义样式表都需要包含一些标记，以便支持主题。学习如何操作的最简单的方式就是打开现有的样式表，看看他们是如何做到这一点的：

.ms-menutoolbar td a{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072bc;
font-size:9pt;
font-family:宋体;
text-decoration:none;
}

在上面的例子中，我们看到，为了支持主题，样式表中的CSS的注释插入了一些特定的指令。通过这些特殊指令，SharePoint就可以用主题中定义的命名样式覆盖默认的样式。

下面是另外的一些例子，也是从默认样式中找到的，可以帮助我们编写自己的样式表来支持主题：

[ReplaceColor(themeColor:"Light1")]
 [ReplaceColor(themeColor:"Accent3-Darker")] 
 [ReplaceColor(themeColor:"Light2-Lightest")]
 [RecolorImage(themeColor:"Light2",includeRectangle:{x:0,y:610,width:1,height:42})]

请注意，SharePoint现在可以在生成主题过程中自动重新着色图片(RecolorImage) - 给力啊！

将SharePoint 2007的主题升级到SharePoint 2010

到目前为止，我还没有看到任何有关升级SharePoint 2007主题的文章。再加上SharePoint 2010的主题支持，升级SharePoint 2007主题实际上就是把旧的完全换掉：

可以用Office PowerPoint 2010创建自定义主题，并部署到网站的主题库中。 Todd Baginski 写过一篇如何创建SharePoint 2010自定义主题的文章。如果你的自定义主题是只限于基本的文字和颜色属性的话，通过这种方式实现起来会很方便。但如果你自定义的主题中包含了一些高级的CSS技巧，那么仍需手工编写代码。
创建一个自定义母版页，直接在母版页中注册您的自定义CSS

有些人可能会抱怨说，微软似乎背离了CSS继承的Web标准的本意。但是，网站所有者、管理员和开发人员毕竟会从这种标准的提升中获得便利。

参考资料

How Themes work in SharePoint 2010

posted @ 2011-02-12 16:48 Sunmoonfire 阅读(5325) 评论(4) 编辑收藏举报

刷新页面返回顶部