升级到 SharePoint 2013 时可能发生的品牌设置问题

适用于:yes-img-132013 no-img-162016 no-img-192019 no-img-se订阅版 no-img-sopSharePoint in Microsoft 365

SharePoint 2013 引入了一个轻量、快速、流畅的全新用户界面。 该 UI 使用新的 CSS 样式、主题和母版页构建而成。 要获取这一全新体验,必须升级到新 UI。 但是在某些使用自定义品牌设置的情况下,为了支持新 UI 而所做的一些重要变更可能会使升级中断。

在 SharePoint 2010 产品 中,您可能已使用下列几种方式之一设置您的网站品牌:

  • 将自定义样式表应用到覆盖 SharePoint 默认样式的网站。

  • 将自定义主题(THMX 文件)应用到您的网站。

  • 复制并更改 SharePoint 2013 随附的母版页。

  • 在发布网站中创建一个全新的自定义母版页,其中自定义母版页使用自定义样式并由自定义页面布局引用。

当您将网站集升级到 SharePoint 2013 之后,这些类型的自定义不会按原样运行,因为默认 CSS 样式、主题和母版页已更改。 相反,您必须再次创建您自己的自定义品牌设置。 这要求您使用 SharePoint 2013 中可用的新样式、主题或母版页,然后将重新创建的新设计应用到升级后的网站集。

为了创建更快速、更流畅的用户界面,并使后续升级更易预测,必须对 SharePoint 样式、主题和母版页进行更改。

因此,如果您的网站集包含自定义品牌设置,我们建议您在升级之前先创建一个评估网站集,您可在该网站集在 SharePoint 2013 环境中测试并重新创建自定义品牌设置。 有关评估网站集的详细信息,请参阅 升级网站集

下面各部分列出了升级到 SharePoint 2013 时可能会遇到的品牌问题。

自定义 CSS

将自定义品牌设置应用到 SharePoint 2010 产品 网站最常见的方式是创建 CSS 文件,其中包含覆盖默认 SharePoint 样式的样式。

为了方便用户更快、更顺畅地使用新 UI,SharePoint 2013 从根本上改变了 CSS 实现方式:

  • CSS 文件减小。

  • 限制 CSS 选择器的嵌套。

  • 在必要时使用 CSS 继承。

  • 仅在一个位置定义类。

  • 在 CSS 文件中对相关类进行分组。

  • 不使用内联样式和 !important 声明,因为它们无法重写。

  • 样式使用一致的结构和命名约定。

在 SharePoint 2013 中,样式使用一致的结构和命名约定。

命名部分 MS- <FEATURE>- <NAME>
说明
指明这是一个 Microsoft 类。
此项目与之关联的功能的名称,如果作为核心 UI 的一部分,则为"核心"。
项目的描述性名称,例如标题、链接等。

由于 SharePoint 2013 实施 CSS 的方式发生了这些变更,自定义 CSS 样式将不会应用到您的网站。 为了解决此问题,您应首先创建一个评估网站集,然后使用该网站作为标识必须覆盖的新 SharePoint 2013 样式的环境。 为这些样式创建 CSS 文件,然后将该 CSS 应用到升级后的网站。

自定义主题

在 SharePoint 2010 产品 中,您可以使用 Office 程序(如 PowerPoint 2010)创建 THMX 文件。 然后您可以将该主题文件上载到 SharePoint 2010 产品 并将主题应用到您的网站。

在 SharePoint 2013 中,已改进主题引擎,使主题更加快速和灵活,并且主题可以更轻松地升级。 主题模型在 CSS 中使用注释样式标记,然后基于参数替换 CSS 的部件,例如用户选择的字体和颜色方案。 SharePoint 2013 中的主题由 XML 文件定义:

  • SPColor.xml 定义调色板,其中颜色叠加现在具有语义名称,以便更加明确当您更改颜色值时哪些 UI 元素将受影响。 此外,主题现在支持设置不透明度。

  • SPFont.xml 文件定义字体方案,并且支持多种语言、Web 安全字体和 Web 字体。

但是不支持将 THMX 文件从 SharePoint 2010 产品 升级到 SharePoint 2013。 如果您将自定义主题应用到了 SharePoint 2010 产品 网站,则当您升级到 SharePoint 2013 时,主题文件仍在原来的位置。 但是主题不再应用于网站,且网站将会恢复到默认主题。

要解决此问题,您应先创建一个评估网站集,然后使用 SharePoint 2013 中的新主题功能再次创建主题。 有关新主题的详细信息,请参阅 MSDN 上的下列文章:

重要

展望将来,如果您想要使用自定义品牌设置,并且希望该品牌设置在未来升级后仍可正常运行,我们建议您使用主题实施您的设计。 未来更新可用时,主题将提供升级支持。 如果主题对您的方案不适用,或者您必须使用更广泛的品牌设置,我们建议您将发布网站与设计管理器结合使用。 但是请注意,如果您投资构建自定义母版页和页面布局,则在每次 SharePoint 升级之间或之后,都必须修改或更新设计文件。

复制并更改 SharePoint 2013 随附的母版页

在 SharePoint 2010 产品 中,对 UI 进行少量自定义设置的常见方式是复制并更改随 SharePoint 2010 产品 一起提供的母版页。 例如,您可以更改母版页以删除或向用户隐藏某些功能。

当您将某个 SharePoint 2010 产品 网站升级到SharePoint 2013 时,母版页将重置为使用 SharePoint 2013 中的默认母版页。 因此,在升级之后,您的网站将显示自定义品牌设置。 在 SharePoint 2010 产品 中创建的自定义母版页在网站中仍然存在,但您不应将旧的母版页应用到新网站,因为新网站将不会按预期显示。

为了在 SharePoint 2013 中支持新 UI,我们对默认母版页进行更改。 因此,我们不能将在 SharePoint 2010 产品 中创建的母版页应用到 SharePoint 2013 中的网站。

为解决此问题,您应首先创建一个评估网站集,然后在 SharePoint 2013 网站中再次创建母版页。 确认新母版页按预期运行后,将母版页移动到新的网站集并将其应用到网站。 如果网站为发布网站,您可以使用设计管理器将母版页作为设计包的一部分导出然后导入。 或者,您可以将母版页作为沙盒解决方案的一部分进行移动或者通过将文件上载到母版页库。

重要

[!重要说明] SharePoint Foundation 2013 不支持发布网站。 需要使用 SharePoint 2013 才能发布网站。

发布网站中的自定义母版页

如果您需要一个完全品牌化的网站,例如公司通讯 Intranet 网站,您应使用具有完全自定义母版页和附加到自定母版页的自定义页面布局的发布网站。

当您将某个 SharePoint 2010 产品 网站升级到SharePoint 2013 时,母版页将重置为使用 SharePoint 2013 中的默认母版页。 因此,在升级之后,您的网站将不会显示自定义品牌设置。 在 SharePoint 2010 产品 中创建的自定义母版页和页面布局在网站中仍然存在,但您不应将旧的母版页应用到新网站,因为新网站将不会按预期显示。

为解决此问题,您应首先创建一个评估网站集(即发布网站),然后在 SharePoint 2013 网站中再次创建母版页。 确认新母版页按预期运行后,完成下列步骤:

  1. 将母版页作为设计包的一部分进行导出。

  2. 将设计包导入到新网站集。

  3. 将新母版页应用到网站

新母版页上的自定义内容占位符

重要

[!重要说明] 如果您的自定义母版页包含自定义内容占位符,而且如果自定义页面布局也包含此自定义内容占位符,那么在升级后,可能出现错误,使您的网站主页根本不呈现。 相反,在升级后,您可能看到错误消息"发生意外错误"。

要确定您是否存在此问题,可以创建一个也是发布网站的评估网站集,然后将母版页设置为随 SharePoint 2013 一起提供的母版页。 如果网站仍然显示,则说明您不存在此问题。 如果网站不显示,且您将收到"意外错误"和一个关联 ID,则您很可能存在此问题。

要解决此问题,请执行下列步骤:

  1. 创建一个也是发布网站集的评估网站集。

  2. 创建 SharePoint 2013 母版页。

  3. 将自定义内容占位符添加到 2013 母版页。

  4. 将新母版页应用到网站

  5. 创建一个不包含自定义内容占位符的页面布局。

    页面布局将与应用到网站的新母版页关联。

  6. 将使用旧页面布局的所有页面更改为使用新页面布局。

    您可以在浏览器中手动编辑各个页面并使用功能区上的选项,或者对 SharePoint 使用客户端对象模型,以编程方式更新页面。

  7. 删除包含自定义内容占位符的页面布局。

我们建议您不要向您的自定义母版页或页面布局添加自定义内容占位符。

另请参阅

其他资源

解决 SharePoint 2013 中的网站集升级问题

查看已升级到 SharePoint 2013 的网站集

Upgrade a site collection to SharePoint 2013

Run site collection health checks in SharePoint 2013

Overview of Design Manager in SharePoint 2013