为 Outlook Web App 创建主题

 

适用于: Exchange Server 2010 SP2, Exchange Server 2010 SP3

上一次修改主题: 2016-11-28

本主题说明如何为 Microsoft Office Outlook Web App 创建自定义主题。主题是控制 Outlook Web App 外观的媒体文件和级联样式表(.css 文件)的集合。

默认情况下,在运行 Microsoft Exchange Server 2010 的计算机上安装客户端访问服务器角色时,会安装多个主题,如下所示:

  • .css 文件 -- 定义颜色、渐变和字体。

  • 图像 (.png) 文件 -- 提供图标和其他图形元素。编辑任何图标时,请勿更改其大小。如果更改了任何图形元素的大小,应测试所做更改,以验证这些元素是否仍能正确配合在一起。

这些文件存储在客户端访问服务器上安装目录的 \Client Access\OWA\<版本>\themes 中。每个主题都存储在主题的一个子目录中。可以通过复制现有主题和修改副本来创建其他主题。

注释注意:
Outlook Web App 基本客户端不支持主题。

建议

Outlook Web App 主题的许多元素都可以更改。为了避免在 Outlook Web App 中产生不稳定性,建议仅直接更改与自定义主题相关的文件。

作为最佳做法,请遵循以下准则:

  • 在编辑原始文件之前,请始终创建这些文件的备份副本。

  • 在将升级或修补程序应用于具有自定义主题的客户端访问服务器之前,请创建这些主题的备份副本。

  • 每次仅进行一或两个更改,并在进行其他更改之前测试更改。

  • 请勿更改 \Client Access\OWA\<版本>\themes\resources 中的文件。这些文件定义的字体和其他设置由 Outlook Web App 中的所有主题使用。无法在不影响所有主题的情况下更改这些文件。

  • 主题保存在每台客户端访问服务器上。如果有多台客户端访问服务器,并且希望某个自定义主题可以在所有服务器上使用,必须将该主题复制到每台客户端访问服务器上的主题目录中。

若要了解与自定义 Outlook Web App 外观相关的其他管理任务,请查看自定义 Outlook Web App 的登录和注销页

希望执行何种操作?

  • 创建新 Outlook Web App 主题

  • 命名自定义主题

  • 为主题创建自定义图标

  • 创建自定义标题

  • 使用 Internet Explorer 开发人员工具确定颜色

  • 更改主题中的颜色

  • 更改主题中的图标和徽标

  • 设置默认 Outlook Web App 主题

创建新 Outlook Web App 主题

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

  1. 在承载 Outlook Web App 的客户端访问服务器上,打开 Windows 资源管理器,然后找到 Exchange 服务器安装目录。

  2. 在 \Client Access\OWA\<版本>\themes 中,找到使用的颜色方案类似于您需要的颜色方案的主题,然后创建该主题的副本。

  3. 为刚才创建的副本提供一个短名称,该名称应类似于要为主题提供的名称。

  4. 除了为创建主题而必须更改的任何其他文件,在新主题文件夹中创建以下文件的备份副本。这些副本会在您必须撤消更改时保留您的原始设置:

    • premium.css

    • csssprites.png

    • csssprites2.png

    • headerbgmain.png

    • headerbgright.png

  5. 按照以下各节中的步骤修改新主题文件夹中的文件,以创建主题。

  6. 使用 iisreset/noforce 命令重新启动 Internet 信息服务 (IIS)。

  7. 登录 Outlook Web App 并选择新主题来测试新主题。

命名自定义主题

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

  1. 打开自定义主题文件夹中的 themeinfo.xml 副本。

  2. 找到该主题的 displayname 值,然后将该值更改为希望主题使用的名称。

    示例:若要将主题命名为 Fourth Coffee,文件应包含以下内容: theme displayname = "Fourth Coffee".

  3. 更改 sortorder 值,以将主题放置在您希望其在 Outlook Web App 的主题选取器中所处的位置。

    示例:若要将主题设置为第一个出现,文件应包含 sortorder = 1

  4. 保存所做更改,然后关闭 themeinfo.xml。

  5. 通过打开命令提示符窗口并使用命令 iisreset/noforce,在客户端访问服务器上停止并再启动 IIS。

  6. 若要测试更改,请登录 Outlook Web App,单击“选项”,然后在主题选取器中查找新主题。如果未看到您的主题列出,请使用 Microsoft Internet Explorer 中的“Internet 选项”删除临时文件。然后刷新浏览器并再次尝试查看主题选取器。

为主题创建自定义图标

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

若要为主题创建自定义图标,必须编辑 themepreview.png 文件。此文件是主题在 Outlook Web App 的主题选取器中的图标。

  1. 在图像编辑工具中打开 themepreview.png,然后进行所需更改。请勿修改尺寸。该图像是 32x32 像素。

  2. 若要测试更改,请登录 Outlook Web App,单击“选项”,然后在主题选取器中查找新主题。如果未看到新图标,请使用 Internet Explorer 中的“Internet 选项”删除临时文件。然后刷新浏览器并再次尝试查看主题选取器。

创建自定义标题

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

若要在 Outlook Web App 中更改标题,必须编辑以下文件,这些文件用于创建 Outlook Web App 顶部的标题:

  • headerbgmain.png

  • headerbgright.png

  • headerbgmainrtl.png(仅当支持从右到左的语言时,才需要编辑此文件)。

  1. 在图像编辑工具中打开这些 .png 文件,然后进行所需更改。请勿修改尺寸。

  2. 若要更改徽标,请使用支持透明背景的图像编辑工具(如 Paint.NET 或 Photoshop)打开并修改 csssprites.png。此文件具有透明背景。请勿在文件中移动图像或更改图像大小,因为 Outlook Web App 会从 csssprites.png 上的特定位置拉取每个图标或徽标。当在文件中编辑某些内容时,必须将新图像恰好置于所替换的图像上。

  3. 编辑了这些文件之后,保存所做更改。

  4. 若要测试对自定义主题进行的更改,请登录 Outlook Web App,单击“选项”,然后在主题选取器中选择主题。如果未看到新主题,请使用 Internet Explorer 中的“Internet 选项”删除临时文件。然后刷新浏览器并再次尝试选择自定义主题。

使用 Internet Explorer 开发人员工具确定颜色

Internet Explorer 8 和 Internet Explorer 9 包含开发人员工具,使用这些工具可以确定特定元素的颜色和字体,并测试对这些值进行的修改。随后可以使用开发人员工具中的信息在 .css 文件中查找这些值,并在其中修改这些值以自定义主题。

  1. 登录 Outlook Web App 并选择任何主题。

  2. 转到显示要自定义的元素的模块。例如,如果要自定义 Mail 中的突出显示颜色,请转到 Mail。

  3. 在 Internet Explorer 中,转到程序工具栏并选择“工具”>“开发人员工具”,或按 F12。

  4. 排列窗口,从而使 Outlook Web App 和“开发人员工具”窗口不会重叠。

  5. 在“开发人员工具”中,单击工具栏左侧的选择箭头或按 Ctrl+B。

  6. 将指针移动至要自定义的 Outlook Web App 部分上方。在指针经过每个元素上方时,您会看到相应元素周围的轮廓线。在要更改的元素周围出现轮廓线时单击。

  7. 查看“开发人员工具”窗口。您会看到用于生成页面的代码,所选择的元素会在左侧窗口中突出显示。

  8. 在右侧窗口中查找该元素的颜色。颜色会是 RGB 值,该值表示为以 # 开头并后跟六个字母数字字符的七字符字符串。例如,白色表示为 #ffffff。

  9. 如果未看到 RGB 值,请重复前面的步骤并再次尝试。

  10. 当找到 RGB 值时,将其更改为需要的值,然后按 Enter。更改几乎会立刻显示在 Outlook Web App 中。这不会更改主题,而是仅应用于本地设置且仅应用于当前会话。

  11. “开发人员工具”的右侧窗格向您显示该值所处的文件以及在该文件中找到该值的位置。

  12. 在找到要更改的值之后,必须转到客户端访问服务器上自定义主题所处的文件夹,然后在 premium.css 中修改该值。

注释注意:
若要找到许多颜色的 HTML RGB 值,请参阅 MSDN 库中的 颜色表。如果必须与特定颜色相匹配,而您无法联机找到该颜色的匹配项,则可以使用图像编辑工具获取颜色样本,并确定其 HTML RGB 值。“开发人员工具”具有一种有用的颜色选择器工具。从菜单中选择“工具”>“显示颜色选取器”。若要确定所需颜色的 RGB 值,请将鼠标指针置于具有该颜色的某个元素上方。

更改主题中的颜色

在找到要更改的颜色并确定要将其更改为的 RGB 值之后,必须在客户端访问服务器上的 premium 样式表 (premium.css) 中找到该属性,然后将现有值替换为新值。

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

  1. 使用记事本等文本编辑器打开自定义主题中的 premium.css 文件。

  2. 在该文件中,搜索使用 Internet Explorer 工具找到的值。

  3. 将 RGB 值替换为所需颜色的 RGB 值。

  4. 若要测试对自定义主题进行的更改,请登录 Outlook Web App,单击“选项”,然后在主题选取器中选择主题。如果未看到您进行的更改,请使用 Internet Explorer 中的“Internet 选项”删除临时文件。然后刷新浏览器并再次尝试选择自定义主题。

更改主题中的图标和徽标

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“图形编辑器”条目。

若要更改主题中的图标和徽标,请使用支持透明背景的图像编辑工具(如 Paint.NET 或 Photoshop)打开并修改 csssprites.png 和 csssprites2.png。这些文件具有透明背景,必须保留该背景以正确显示各个元素。请勿在文件中移动图像或更改图像大小,因为 Outlook Web App 会从文件中的特定位置拉取每个图像。当在文件中编辑某些内容时,必须将新图像恰好置于所替换的图像的相同位置上。

更改图像:

  1. 使用支持透明背景的图像编辑工具打开包含要更改的图形元素的文件。

  2. 编辑要更改的元素,注意保留原始元素的位置和大小。

  3. 保存并关闭该文件。

  4. 若要测试对自定义主题进行的更改,请登录 Outlook Web App,单击“选项”,然后在主题选取器中选择主题。如果未看到您进行的更改,请使用 Internet Explorer 中的“Internet 选项”删除临时文件。然后刷新浏览器并再次尝试选择自定义主题。

设置默认 Outlook Web App 主题

设置默认主题时,只会强制那些先前未登录到 Outlook Web App 并且未选择新主题的用户使用默认主题。

若要强制所有用户使用默认主题,除了设置新的默认主题之外,还必须禁用主题选择。

使用命令行管理程序为 Outlook Web App 设置默认主题

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“Outlook Web App 虚拟目录”条目。

此示例为 Outlook Web App 设置默认主题,其中服务器名称为“FourthCoffee”,虚拟目录名称为“owa”,网站名称为“Default Web site”,且主题位于名为“Custom”的文件夹中。

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom 

有关语法和参数的详细信息,请参阅Set-OwaVirtualDirectory

使用命令行管理程序为 Outlook Web App 禁用主题选择

您必须先获得权限,然后才能执行此过程。若要查看所需的权限,请参阅客户端访问权限主题中的“Outlook Web App 虚拟目录”条目。

此示例在 Outlook Web App 中禁用主题选择,其中服务器名称为“FourthCoffee”,虚拟目录名称为“owa”,网站名称为“Default Web site”。

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false 

也可以按以下示例中所示,同时完成这两个命令:

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

有关语法和参数的详细信息,请参阅Set-OwaVirtualDirectory

其他任务

在创建主题之后,您可能还需要自定义 Outlook Web App 的登录和注销页

 © 2010 Microsoft Corporation。保留所有权利。