如何创建 Outlook Web Access 主题

  • 项目

 

适用于： Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007

上一次修改主题： 2007-09-12

本主题说明如何为 Microsoft Office Outlook Web Access 创建自定义主题。主题是控制 Outlook Web Access 外观的文件和样式表的集合。默认情况下，在运行 Microsoft Exchange Server 2007 的计算机上安装客户端访问服务器角色时，将安装两个主题，分别是 Seattle Sky 和 Carbon Black。

只有 Outlook Web Access 高级客户端才支持自定义主题。不能为 Outlook Web Access 基本客户端创建自定义主题。

Exchange 2007 SP1 新增功能

Outlook Web Access 在 Exchange Server 2007 Service Pack 1 (SP1) 中又增加了两个主题。两个新主题为 Xbox 和 Zune。

主题内容

主题是媒体文件和级联样式表（.css 文件）的集合。这些文件存储在客户端访问服务器上安装目录的 \Client Access\OWA\版本\themes 中。每个主题都存储在主题的一个子目录中。

.css 文件定义颜色、渐变方式和字体。图像文件（.gif 文件）提供图标和其他图形元素。编辑任何图标时，请勿更改其大小。如果更改了其他图形元素的大小，应测试所做更改，以验证这些元素是否仍能正确配合在一起。

默认主题 (Seattle Sky) 是基本主题，位于 \themes\base 中。“base”文件夹中包含定义主题所需的所有文件。其中包括颜色、字体、图标和图形。

可以通过将所选文件复制到一个新目录并修改文件以满足组织的需要来创建其他主题。在 Outlook Web Access 用户界面中，主题称为颜色方案。用户选择自定义主题时，会首先使用自定义主题目录中的元素，而任何未自定义的必要元素从基本主题中获得。例如，如果通过仅将标题图形复制到新主题并对其进行修改来创建新主题，则当用户选择该主题时，标题图形将从新主题中获得，而其余主题属性将从基本主题中获得。

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

建议

Outlook Web Access 主题的许多元素都可以更改。为了避免在 Outlook Web Access 中产生不稳定性，建议先只更改标题、登录页和注销页以及用于选择和突出显示的颜色。

如果要进行较为复杂的更改，请先了解 .css 文件的工作方式。清楚了解了级联样式表后，每次更改一些元素，并测试所做更改，以确保获得预期结果。

建议的最佳做法是遵循下列准则：

  • 务必在开始编辑文件之前备份原始文件，尤其是编辑 \themes\base 目录中的文件时更应如此。

  • 请勿删除 \Client Access\OWA\版本\themes\base 文件夹或其中的任何文件。

  • 请勿更改邮件顶部出现的信息栏，这些信息栏用于向用户警告有关可能有害的内容、仿冒攻击、病毒以及被阻止或丢失的内容等信息。

下图显示包含两个信息栏的 Outlook Web Access 日历请求。

Outlook Web Access 信息栏

Outlook Web Access 信息栏

开始之前

若要执行下列步骤，必须登录到托管 Outlook Web Access 的服务器，并且必须为您使用的帐户委派本地 Administrators 组中的成员身份。

创建主题

以下步骤提供为 Outlook Web Access 创建自定义主题的常规步骤。更改 Outlook Web Access 主题中的各个元素的具体步骤包含在后面各节中。

新建 Outlook Web Access 主题

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

  2. 在 \Client Access\OWA\<版本>\themes 中，创建一个新文件夹。

  3. 将 premium.css 和 owafonts.css 文件从基本主题复制到新文件夹。

  4. 将创建主题要更改的文件从基本主题复制到创建的新文件夹。

  5. 在新主题文件夹中修改这些文件以创建主题。

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

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

为自定义主题命名

可以通过两种方式为自定义主题命名。第一种方式是为创建新主题所在的文件夹指定希望该主题使用的名称。例如，若要将自定义主题命名为“Fourth Coffee”，则将创建新主题所在的文件夹命名为 Fourth Coffee。

也可以通过将基本主题中的 themeinfo.xml 文件复制到创建自定义主题所在的文件夹，并编辑该文件，为该自定义主题命名。可以使用记事本等文本编辑器编辑 themeinfo.xml 文件，以将主题显示名更改为希望该主题使用的名称。

通过编辑 themeinfo.xml 文件为自定义主题命名

  1. 将基本主题文件夹中的 themeinfo.xml 文件复制到创建自定义主题所在的文件夹。

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

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

    示例：若要将主题命名为 Fourth Coffee，文件应包含 theme displayname = "Fourth Coffee"。

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

note注意：
如果更改了主题的名称，只有停止后再启动 IIS，更改才能生效。打开命令提示符窗口并使用命令 iisreset/noforce，可以完成此操作。

创建自定义标题

可以自定义 Outlook Web Access 主页的标题。若要更改 Outlook Web Access 中的标题，将需要下列文件：

  • premium.css

  • owafonts.css

  • logopt.gif

  • logopb.gif

  • nbbkg.gif

Premium.css 和 owafonts.css 定义 Outlook Web Access 使用的字体和颜色。Logopt.gif、logopb.gif 和 nbbkg.gif 是用于创建 Outlook Web Access 中位于页面顶部的标题的图像文件。

在图像编辑工具中打开 .gif 文件，以查看如何使用这些文件创建 Outlook Web Access 中的标题。

下图显示用于为 Seattle Sky Outlook Web Access 主题创建标题的原始文件。

Outlook Web Access 标题文件

Outlook Web Access 头文件 创建自定义标题

  1. 将基本主题文件夹中的 premium.css、owafonts.css、logopt.gif、logopb.gif 和 nbbkg.gif 复制到自定义主题文件夹。

  2. 在自定义主题文件夹中，使用记事本等文本编辑器打开 premium.css。

  3. 若要将“已连接到 Microsoft Exchange”从标题中删除，则找到 "background:url("logopb.gif") no-repeat;"，并在其后面接着添加 display:none;。

  4. 若要更改徽标，请使用图像编辑工具打开并修改 logopt.gif。

  5. 如果更改了 logopt.gif 中的背景颜色，请使用图像编辑工具编辑 logopb.gif 和 nbbkg.gif，使其具有相同的背景颜色。

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

  7. 若要测试对自定义主题所做的更改，登录到 Outlook Web Access，依次单击“选项”、“常规设置”，然后从“外观”菜单中选择自定义主题。必须保存所做更改，然后单击 Internet Explorer 中的“刷新”以查看新主题。

更改主题中的颜色

若要更改主题中的颜色，必须在 premium 样式表 (premium.css) 中找到这些值，然后确定要使用的颜色的 HTML RGB 值。HTML RGB 颜色值通过七个字符组成的字符串定义，格式为数字标记 (#) 后跟六个字符组成的字符串。若要找到许多颜色的 HTML RGB 值，请参阅 MSDN 库中的 颜色表。如果必须与特定的颜色相匹配，而您无法联机找到该颜色的匹配项，可以使用图像编辑工具获取颜色样本，并确定其 HTML RGB 值。

更改导航栏中选定模块的突出显示颜色

  1. 使用记事本等文本编辑器打开 premium.css 文件。

  2. 在该文件中，找到以下字符串：

    a.nbHiLt
{
       background-color:#FFEFB2;
}

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

  4. 若要测试对自定义主题所做的更改，登录到 Outlook Web Access，依次单击“选项”、“常规设置”，然后从“外观”菜单中选择自定义主题。必须保存所做更改，然后单击“刷新”以查看新主题。如果已有活动 Outlook Web Access 会话，按 F5 键刷新页面，以便可以查看所做更改。

下图显示突出显示了“邮件”模块的 Outlook Web Access 导航栏的一部分。

突出显示了“邮件”模块的导航窗格

突出显示的模块 更改主要列表选择颜色和次要列表选择颜色

  1. 使用记事本等文本编辑器打开 premium.css 文件。

  2. 找到以下字符串，以更改主要选择颜色：

    tr.sel, tr.srsel, tr.lrsel
{
      background-color: #FFEFB2;

  3. 找到以下字符串，以更改次要选择颜色：

    tr.shdw, tr.srshdw, tr.lrshdw
{
      background-color:#F8F0D2;

  4. 将主要选择颜色和次要选择颜色的 RGB 值替换为所需颜色的 RGB 值。

  5. 若要测试自定义主题，登录到 Outlook Web Access，依次单击“选项”、“常规设置”，然后从“外观”菜单中选择自定义主题。必须保存所做更改，然后单击“刷新”以查看新主题。如果已有活动 Outlook Web Access 会话，按 F5 键刷新页面，以便查看所做更改。

主要选择颜色用于在焦点处于该窗格中时，突出显示列表窗格中的选定项目。如果用户将焦点移至预览窗格或导航窗格，将使用次要选择颜色突出显示列表窗格中的选定项目。下图显示 Outlook Web Access 中的主要选择颜色和次要选择颜色之间的区别。

Outlook Web Access 中的主要选择颜色和次要选择颜色

主次突出显示颜色

note注意：
可以使用上一个步骤中使用的方法更改其他主题元素的 RGB 值。

更改列表视图的背景

从导航窗格中选择“邮件”、“联系人”、“任务”或“公用文件夹”时，Outlook Web Access 会在相应模块的可用文件夹中显示一个项目列表。

通过修改 premium.css 中的设置，可以在列表视图中添加背景。

更改 Outlook Web Access 中列表视图的背景

  1. 查找或创建 .gif 格式的图像。

  2. 将图像文件复制到自定义主题文件夹中。

  3. 使用记事本等文本编辑器打开 premium.css 文件。

  4. 找到以下设置更改背景图像：

    div#divLstV{width:100%;height:100%;}

  5. 将字符串编辑为：

    div#divLstV{background-image: url(image file name);width:100%;height:100%;}

  6. 找到以下设置更改背景透明度以正确显示新图像：

    td#tdIL{background-color: #FFFFFF;height:100%;vertical-align:top;}

  7. 将 background-color 值替换为 transparent 值：

    td#tdIL{background-color:transparent;height:100%;vertical-align:top;}

  8. 若要测试自定义主题，登录到 Outlook Web Access，依次单击“选项”、“常规设置”，然后从“外观”菜单中选择自定义主题。必须保存所做更改，然后单击“刷新”，才能查看新主题。如果已有活动 Outlook Web Access 会话，按 F5 键刷新页面，才能查看所做更改。

更改默认的 Outlook Web Access 主题

可以使用 Set-OwaVirtualDirectory cmdlet 将虚拟目录的默认 Outlook Web Access 主题从基本主题更改为自定义主题。也可以使用 Set-OwaVirtualDirectory cmdlet 禁用 Outlook Web Access 中的主题选择选项。如果有多个 Outlook Web Access 虚拟目录，可以使用下列步骤为每个虚拟目录设置默认主题。

设置默认主题后，只有那些先前未登录到 Outlook Web Access 并且未选择新主题的用户才会强制使用默认主题。

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

使用 Exchange 命令行管理程序设置 Outlook Web Access 的默认主题

  • 若要为 Outlook Web Access 设置默认主题，其中服务器名为“FourthCoffee”，虚拟目录名为“owa”，网站名为“Default Web site”，且主题位于名为“Custom”的文件夹中，请运行以下命令：

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

使用 Exchange 命令行管理程序在 Outlook Web Access 中禁用主题选择

  • 若要在 Outlook Web Access 中禁用主题选择，其中服务器名为“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

自定义登录页和注销页

Outlook Web Access 登录页、语言选择页和注销页始终基于基本主题文件夹中的图形和 logon.css 文件创建。因此，若要使用自定义登录页和注销页，必须修改基本主题文件夹中的文件。基本主题文件夹位于 Exchange 安装目录的 \Client Access\OWA\版本\themes\base。

登录页、语言选择页和注销页使用 logon.css 文件来定义文本样式和颜色。通过为顶部、底部和两侧的边框组合使用多个图像来创建页面，并且包含重复的图像以及用于扩展的边角。下列文件用于创建登录页：

  • logon.css

  • lgnbotl.gif

  • lgnbotm.gif

  • lgnbotr.gif

  • lgnexlogo.gif

  • lgnleft.gif

  • lgnright.gif

  • lgntopl.gif

  • lgntopm.gif

  • lgntopr.gif

使用纯色最容易产生新的视觉效果，因为三个页面使用的是同一个图像集合：登录页、每个邮箱初次登录时显示的语言选择页以及注销页。页面大小基于页面的内容进行水平调整和垂直调整。

如果有多台客户端访问服务器，并且希望这些服务器全部使用相同的登录页和注销页，必须将修改后的登录文件和注销文件复制到每台客户端访问服务器。

Caution警告：
由于必须更改基本主题中的文件来创建自定义登录页和注销页，所以，在开始创建自定义登录页和注销页之前，请备份将更改的所有文件。

下图显示默认的 Outlook Web Access 登录页，此时，用户单击了“显示说明”并且选择了“此计算机是私人计算机”和“使用 Outlook Web Access 基本客户端”。一幅图显示创建页面的图形文件如何配合在一起。另一幅图显示 logon.css 文件如何确定登录页上的背景和文本的颜色。

显示自定义图形文件的 Outlook Web Access 登录页

默认登录页

显示文本选项的默认 Outlook Web Access 登录页

Outlook Web Access 登录页文本选项

下图显示默认的 Outlook Web Access 注销页。一幅图显示创建页面的图形文件如何配合在一起。另一幅图显示 logon.css 文件如何确定注销页上的背景和文本的颜色。

显示自定义图形文件的 Outlook Web Access 注销页

默认注销页

显示文本选项的默认 Outlook Web Access 注销页

带有文本选项的 Outlook Web Access 注销页

测试对登录页和注销页所做的更改

在 Internet Explorer 中打开 Outlook Web Access 登录页或注销页之后，不必重置 IIS 或退出 Internet Explorer，即可测试所做更改。

测试对登录页和注销页所做的更改

  1. 在 Internet Explorer 中打开 Outlook Web Access 登录页或注销页。

  2. 单击工具栏上的“工具”，然后单击“Internet 选项”。

  3. 在“常规”选项卡的“浏览历史记录”下，单击“删除”。

  4. 在“Internet 临时文件”下，单击“删除文件”，在系统询问您是否确实要删除所有 Internet Explorer 临时文件时，单击“是”。

  5. 单击“确定”关闭“Internet 选项”。

  6. 单击“刷新”查看所做更改。

每次更改了登录页或注销页的文件之后，重复上述步骤以查看所做更改。如果进行多项更改，可以保持登录页或注销页处于打开状态，然后重复上述步骤以查看所做更改。

更改徽标

若要自定义 Outlook Web Access，可以根据组织的徽标更改登录页和注销页上的 Outlook Web Access 徽标。

更改 Outlook Web Access 中的徽标

  1. 创建要更改的文件的副本，并将其保存到一个安全位置，以便可以在需要时还原原始页面。

  2. 使用图像编辑工具打开 lgntopl.gif 文件，然后修改该文件，以创建要使用的徽标。

  3. 保存所做更改，然后单击“刷新”按钮以查看所做更改。

    note注意：
    如果更改了 lgntopl.gif 的背景颜色，建议您修改用于创建登录页和注销页的其他文件，使其相匹配。

更改字体样式和颜色

可以编辑 logon.css 文件，以更改页面上使用的字体样式和某些颜色。其中包括登录页和语言选择页中心的控件后面的背景颜色。如果更改了这些页面的颜色，建议您更改背景颜色，使其相匹配。

若要更改登录页、语言选择页和注销页的背景颜色和字体颜色，必须在登录样式表 (logon.css) 中找到这些值，然后确定要使用的颜色的 HTML RGB 值。HTML RGB 颜色值通过七个字符组成的字符串定义，格式为数字标记 (#) 后跟六个字符组成的字符串。若要找到许多颜色的 HTML RGB 值，请参阅 MSDN 库中的 颜色表。如果必须与特定的颜色相匹配，而您无法联机找到该颜色的匹配项，可以使用图像编辑工具获取颜色样本，并确定其 HTML RGB 值。

若要测试所做更改，打开 Internet Explorer 并输入 Outlook Web Access 的 URL。如果要测试对托管 Outlook Web Access 虚拟目录的客户端访问服务器上的默认网站所做的更改，可以打开 Internet Explorer 并输入 URL https://localhost/owa 进行测试。

note注意：
语言选择页仅在用户初次登录到 Outlook Web Access 时出现。

下表列出了登录页和注销页的元素以及对每个元素的说明。

登录页和注销页的元素及其说明

要更改的元素 要搜索的字符串 说明

背景颜色

Background: #7F90b1

登录页和注销页的背景颜色。如果更改了图形文件的背景颜色，应更改该背景颜色，使其相匹配。

警告文本

wrng{color:#f8d328}

用户选择“此计算机是私人计算机”时出现的警告文本的颜色。在现有的 Outlook Web Access 登录页上，此警告文本为亮黄色，在蓝色背景上显得非常突出。如果更改了登录页的背景颜色，可能还需要更改警告文本的颜色，以便可以看清警告文本。

主要文本颜色

select, table {color:#ffffff;}

主要文本颜色是白色，用于指示 Outlook Web Access 登录页上可以选择的选项以及输入字段。示例包括用户名字段和密码字段的标签以及安全选项旁边的文本。如果为登录页选择了黑色，白色仍适用于此文本。

显示说明

a{color#ffe052;

登录页上的链接，用户单击该链接可以显示或隐藏私人登录和公共登录的说明。

Outlook Web Access 基本客户端说明

disBis{color:#c8d3e3;}

用户选择“使用 Outlook Web Access 基本客户端”时，将显示有关 Outlook Web Access 基本客户端的一段简单说明。

已连接到 Microsoft Exchange

;color:#fffff;

“已连接到 Microsoft Exchange”将出现在登录页和注销页的左下角。更改此值将同时更改该文本的颜色。

分隔线

#A9AAc4

使用 logon.css 的全部三个页面均使用细线将其分隔成多个部分。这些页面包括登录页、注销页和语言选择页。更改了背景颜色和字体颜色之后，可能需要更改分隔线的颜色，使分隔线仍可以看到，但是不要比文本更清楚。

在决定了要更改颜色的元素并确定了要将这些元素更改为的 HTML RGB 颜色值之后，请使用以下步骤更改 .css 文件中定义的任何元素的颜色。

更改元素的颜色

  1. 打开 logon.css。

  2. 使用本主题前面部分提供的登录页和注销页的元素表，找到与要更改的元素相匹配的字符串。

  3. 将要更改的元素的 HTML RGB 颜色值替换为要用于该元素的新 HTML RGB 颜色值。

  4. 保存所做更改并关闭 logon.css。

  5. 通过打开 Internet Explorer 并输入 Outlook Web Access 登录页的 URL，测试所做更改。

note注意：
如果已打开 Outlook Web Access 登录 URL，可以通过删除 Internet 临时文件并刷新 Internet Explorer 来测试所做更改。为此，单击“工具”，然后单击“Internet 选项”。在“常规”选项卡的“浏览历史记录”下，单击“删除”。在“Internet 临时文件”下，单击“删除文件”，在系统询问您是否确实要删除所有 Internet Explorer 临时文件时，单击“是”。单击“确定”关闭“Internet 选项”，然后按 F5 键刷新登录页。