创建和部署 Outlook Web Access 主题

 

上一次修改主题: 2005-03-22

本主题提供的信息旨在帮助 Exchange 管理员设计和修改针对 Exchange Server 2003 的 Microsoft® Office Outlook® Web Access 主题。

在设计 Microsoft Exchange Server 2003 版本的 Outlook Web Access 时,Microsoft 决定统一使用样式表。 此决定使 Outlook Web Access 客户端的外观与 Microsoft Office Outlook 2003 的外观保持相似。在设计过程中,Outlook Web Access 团队中一些非常热情的成员认为,为该版本提供“皮肤”或“主题”功能将会相对比较容易。 通过他们的努力,您能够创建自己的 Outlook Web Access 主题。 本主题讲述了在 Outlook Web Access 中创建和部署主题的基本过程。

在本主题结束后,您应该充分了解 Outlook Web Access 中的主题结构,从而能够生成类似于 Microsoft Xbox® 主题的您自己的自定义主题,如下图所示。

OWA UI 的 XBOX 主题

实际上,Outlook Web Access 中的每个元素(从新邮件表单到视图列表以及预览窗格)都已使用 HTML 级联样式表进行了格式化。

标准通用标记语言 (SGML) 的一个主要目标就是提供一种将格式与内容分离的方法。 例如,HTML 和 XML 都是基于 SGML 的语言。 使用级联样式表之前,无法在 HTML 中实现这种分离,因此作者通常将所有格式和内容嵌套在一起。 使用联机样式表后,就可以将这种格式分离到一个单独的文件中,并将标识符标记分配到内容中。 该功能正是 Outlook Web Access 主题的基础。

要更好地了解 Outlook Web Access 主题,还应该适当的了解一下级联样式表的工作原理。

Outlook Web Access 主题使用链接样式表的概念。 在链接样式表中,每个 HTML 页面顶部都有一个声明,说明该页面应使用哪个样式表。

例如,在 Outlook Web Access 显示的每个页面顶部,您都会看到与下面内容类似的文件头信息。

<!--Copyright (c) 2000-2003 Microsoft Corporation. All rights reserved.-->
<HTML xmlns:MSIE DIR=LTR>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="http://myserver.example.com/exchweb/themes/0/owacolors.css">

<link> 指令可告知页面在哪里可以找到控制 Outlook Web Access 主题信息的样式表。

样式表本身是由一些规则构成的,这些规则定义如何格式化页面上的元素。 这些规则既可以应用于标准元素(如标题和段落样式),也可以应用于那些通过类进行标识的元素。

默认的 Outlook Web Access 主题样式表位于 [drive letter]\Program Files\Exchsrvr\exchweb\themes\0\owacolors.css,其中包含 900 多行文本。 此文件定义了一些规则或样式,这些规则或样式指定将用于绘制 Outlook Web Access 页面的主题颜色。

规则是由一系列元素或 HTML 标记组成的,后面带有一系列用括号括起的级联样式表样式属性。 通过使用逗号将多个标记隔开,可以同时定义多个标记。 规则中的每个属性都由分号隔开,如下例所示。

/* DEFAULT (BLUE) */
.dlgBody, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr
{
     background-color:#C3DAF9;
}

该样式表中的示例显示,多个不同的 Outlook Web Access 元素共享同一个 #C3DAF9 的背景色。 这个由数字表示的颜色符合用于指定 HTML 中的颜色的规则。

尽管在 Outlook Web Access 样式表中可以定义很多属性,但下表中只列出了此次讨论最感兴趣的一些属性。

 

感兴趣的 Outlook Web Access 主题级联样式表属性

背景图像

底部边框颜色

背景颜色

颜色

边框颜色

左边框颜色

右边框颜色

顶部边框颜色

底部边框颜色

note注意:
尽管可以尝试指定更多属性,包括那些定义字体和位置的属性,但仍需小心谨慎。 建议在进行任何更改之前先备份原始的 .css 文件。

在 HTML 中,使用一共六个十六进制数值指定颜色。 这些数字再分成两组,每组都定义一个阴影或色调(红色、绿色和蓝色 (RGB))。 在级联样式表文件和网页中使用前导数字符号 (#) 指定此值。

在设计主题时,您会发现能够访问功能全面的图形包(如 PaintShop Pro 或 Adobe Photoshop),或专用拾色工具(如可在像 C|Net's Download.com 这样的各种 Internet 下载站点下载的很多实用程序之一)是非常重要的。 这些工具可用于分析颜色,并确定其等效的 Web 值。

还可以通过名称指定大部分常用颜色。 大多数浏览器都识别这种速记方法,并在显示时将颜色转换为其相应的十六进制表示值。

已针对 Microsoft Internet Explorer 6 及更高版本优化了 Outlook Web Access。 这些客户端被称为高级客户端。 Outlook Web Access 还为其他浏览器(包括 Internet Explorer 5.01 和 Netscape 4.8 以及更高版本)提供了基本的电子邮件体验。 遗憾的是,并非所有基本客户端都完全支持级联样式表,所以对于这些客户端,将无法提供丰富的主题支持

如之前所述,Outlook Web Access 会在 Exchange 2003 服务器安装文件的一个子目录中搜索,查找其主题信息。 具体地说,它从 ..\exchsrvr\exchweb\themes 目录开始查找。 在该目录中有大量的子目录。 为此 Outlook Web Access 实例安装的每个主题都对应有一个子目录。

下图显示了默认的主题结构。

主题相关文件的位置

新的 Exchange Server 2003 安装文件有五个子目录。 每个子目录都对应于产品中五个默认主题的其中一个主题。

在每个子目录中,您都能够看到一个主级联样式表文件和多个与该主题相关的图像文件。

下表说明了每个图像对应的内容。

 

图像 文件 描述
OWA 产品徽标

Logo2.gif

主要徽标。 这是一个 179x36 像素的品牌徽标。 要最小化工作量,应尝试将此徽标替换为大小近似的图像。 还要保证徽标背景颜色与所替换图像的背景色一致。

OWA 主题图像

Nb-bkgd.gif

导航栏背景(重复)。 这是 1x26 像素的条带,作为 Outlook Web Access 窗口左侧导航栏的背景色。 默认图像使用渐变颜色填充。

OWA 主题图形

Nb-hide-ql.gif

导航栏“隐藏”图像。 此 50x8 像素的图像用在左侧导航窗口中,该窗口用于隐藏或展开导航栏。

OWA 主题图形

Nb-ql-tgl.gif

导航栏“隐藏”背景。 该图像显示在 hb-hide-ql.gif 和 hb-show-ql.gif 文件后面。 它通常是渐变填充,且它的颜色不会与后面的图像相冲突。

OWA 主题图形

Nb-sel-bkgd.gif

已选中导航栏。 此 1x26 像素的图像用作导航栏中的背景高光。

OWA 主题图形

Nb-show-ql.gif

导航栏“显示”图像。 该图像与 nb-hide-ql.gif 的大小相同。当隐藏导航栏选项(日历、选项、收件箱)时将显示该图像。

OWA 主题图形

Nin-bg.gif

弹出通知“烘托”背景。 此 130x126 像素的图像是 Outlook Web Access 弹出通知的背景。 可以使用任何要使用的图像上的水印修改此图像,但要确保其上的文本仍然可读。

OWA 主题图形

Resize-dot.gif

此 1x1 像素的图像用于 Outlook Web Access 内部。

OWA 主题图形

Tool-bkgd.gif

工具栏背景。 此 1x32 像素的图像是背景图像,用于 Outlook Web Access 窗口顶部的工具栏。 同时,它也是导航栏中未选按钮的背景图像。

对级联样式表和可用的 Outlook Web Access 多个不同客户端版本有了基本了解之后,就可以在标准的“蓝色”主题基础上创建名为“Orange”的新主题。

下图显示了主题颜色为默认蓝色的 Outlook Web Access。

OWA UI 的默认蓝色主题

主题修改过程包括以下几个步骤:

  1. 在 Outlook Web Access 服务器上为您的主题创建新的空间。
  2. 更新服务器注册表,以便 Outlook Web Access 能够找到主题。
  3. 修改主题样式表。
  4. 更新主题图像。

创建主题最简便的方法就是修改默认主题。 要创建名为“Florida”的新主题,请复制默认主题中的文件。

note注意:
通常情况下,大部分组织在前端和后端服务器情景中部署 Outlook Web Access。 本主题中的说明假设情景如此。 如果在独立的服务器上模拟此情景原型,可以将所有设置应用于单台计算机。
为您的主题创建新的空间
  1. 在前端服务器上,请转到目录 program files\exchsrvr\exchweb\themes\0\

  2. 复制此文件夹,并命名副本 program files\exchsrvr\exchweb\themes\orange\

Caution警告:
错误地编辑注册表可能导致严重问题,甚至可能需要重新安装操作系统。因注册表编辑不当而导致的问题可能没有办法解决。在编辑注册表之前,请备份所有重要数据。
更新注册表以使用新主题
  1. 在后端服务器上,运行注册表编辑器,然后转到以下注册表项:

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA

  2. 如果不存在子项,请创建名为“主题”的新子项。

  3. 在“主题”子项下,创建名为“FloridaTheme”的新字符串值 (REG_SZ)。 用户将看不到此值。

  4. 如下图所示,将该值设置为:

    id=0x1;path=orange;title=Florida;bgcolor=#b26d0a

    OWA 的注册表项位置

    ID: 主题标识符在所有主题中都必须唯一。 它可以被指定为十进制或十六进制的数字且必须小于 0x80000000。 还要注意,如果以十六进制格式指定 ID,则必须确保第一个数字是零。

    内置主题不将第一个数字设置为 1,而自定义主题则会这么做。这就是为什么在设置了第一个数字后无法再设置自定义主题 ID。 在注册表中指定 ID 之后,将用 0x80000000 对该值进行 OR 操作,且该值将成为保留在用户邮箱中的最后一个 ID。

    路径: 指定 exchweb\themes 目录下放置主题文件的路径。

    标题: Outlook Web Access 显示的主题名称。 此值不能为空,且必须少于 512 个字符。

    Bgcolor: 为您的主题框架集指定默认背景色。 必须在 owacolors.css 文件外指定该值,因为不能在级联样式表文件中指定框架集的背景色。 该设置作为框架背景色在“简化的调色板”部分中列出。 如果再次修改框架背景色,必须更新此值。 还应确保徽标背景色与该值匹配。 必须使用 #RRGGBB 的格式指定该值(不能使用浏览器默认名称,如黑色或白色)。

    30 到 60 秒钟后,新主题应该能够在 Outlook Web Access 选项页面中使用。

    note注意:
    确保将主题文件复制到所有前端服务器上,并更新所有后端服务器上的注册表设置。 如果 Outlook Web Access 认为注册表值不正确,将忽略该主题。

既然已经设置了服务器,那么真正的工作即将开始。

修改级联样式表
  1. 找到级联样式表文件。

  2. 使用文本编辑器(如记事本)进行搜索,并将所有找到的主题\0 替换为主题\orange。

  3. 保存更新后的文件。

使用更新后的样式表,您可以更改主题的颜色。

在设计主题过程中的一个最大难题就是要提供一系列互补色。 防止出现严重问题的一个方法就是挑选出作为主题基础色的主要颜色,然后对该颜色进行略微调整,就可用于主题中的其他元素。 如果您的绘画程序支持在色调、饱和度以及亮度模式中运行,则这些调整会变得更加简单。

本文中并未深入讨论如何正确选择颜色。 但是简言之,大部分的颜色选择都不是基于色轮原理。 在颜色原理中,有一些完全机械化的工具,可用来提供互补色。 如果您需要对比色,基本的方法就是在色轮上选择完全相反的两种颜色。 这种方法应会生成互补的颜色对。 选择主题颜色最简单的方法是使用单色主题,在单色主题中,所有颜色都由某种颜色在亮度和饱和度方面变化而得到的。 这样的主题看上去会很舒服,而且很容易设计。 虽然很容易使用,但该主题不一定能够呈现最好的对比度。

如果您的团队中有网页设计人员,他或她应该能够帮助您为自定义主题设计一个漂亮的彩色主题。 在本主题中,编程色轮工具(如 Color Wheel Pro)用于生成主题中使用的互补色调色板。 本主题使用不以温暖橙色为基础的分离互补方案。 生成的调色板包含多个亮度和颜色饱和度级别,但只有一个色调。

下图显示了佛罗里达调色板及其互补对比调色板。

佛罗里达主题的蓝色和橙色调色板

在 Outlook Web Access 和 owacolors.css 样式表中,标准方案中指定了 60 多种颜色,已筛选 900 多行 CSS 文件,已标识 200 多个类。 “默认模板颜色使用”部分中记录了默认主题中的颜色。 幸运的是,只需修改大约 30 种主要颜色就能提供一个主题。

下图显示了该主题中使用的调色板和替换颜色。 有关默认调色板的详细信息,请参阅本主题稍后部分中的“默认模板颜色使用”。

 

对应于

新建主题的替换颜色表

1. 对话框和注释背景

新建主题的替换颜色表

2. 框架背景

新建主题的替换颜色表

3. 工具栏背景

新建主题的替换颜色表

4. 导航栏、标签背景、工具栏分隔器颜色

新建主题的替换颜色表

5. 菜单背景

新建主题的替换颜色表

6. 3D 边框颜色: 暗

新建主题的替换颜色表

7. 3D 边框颜色: 正常,视图表头渐变(第二行 -- 应该比第 15 行稍微暗些)

新建主题的替换颜色表

8. 信息栏背景

新建主题的替换颜色表

9. 信息栏文本

新建主题的替换颜色表

10. S/MIME 进程标识符背景

新建主题的替换颜色表

11. 未选中的选项卡背景(应该比 1 稍微暗些)

新建主题的替换颜色表

12. 选项卡背景(应该比 11 稍微暗些)

新建主题的替换颜色表

13. 在视图表头中排序列

新建主题的替换颜色表

14. 视图表头背景,视图中选中的行(阴影)

新建主题的替换颜色表

15. 视图表头渐变(第一行 -- 应该比第 14 行稍微暗些)

新建主题的替换颜色表

16. 预览窗格背景

新建主题的替换颜色表

17. 选定的项目

新建主题的替换颜色表

18. 字段集边框(应该比 1 暗些)

新建主题的替换颜色表

19. 上下文菜单左侧栏背景色

新建主题的替换颜色表

20. 按钮悬停背景

新建主题的替换颜色表

21. 已按下按钮

新建主题的替换颜色表

22. 导航栏标签边框颜色

新建主题的替换颜色表

23. 树状控件边框颜色

新建主题的替换颜色表

24. 日历抬头背景

新建主题的替换颜色表

25. 日历抬头边框(应该比 23 稍微亮些)

新建主题的替换颜色表

26. 空闲/忙碌控件背景

新建主题的替换颜色表

27. 空闲/忙碌控件背景(收件人)

新建主题的替换颜色表

28. 树状控件边框

新建主题的替换颜色表

29. 预览窗格背景(无项目)

新建主题的替换颜色表

下图显示了 Outlook Web Access 的主页,大多数颜色都已经过编号和标识,从而与调色板文件相对应。

在 OWA UI 上指示颜色显示位置的标注

大部分颜色都是蓝色的变体。 在设计新主题时,可以使用以上所示的简化调色板,并开始替换新主题的颜色。 请尝试使用饱和度和亮度相近的颜色。 对于一些对比色,可以选择较深的颜色,或者使用互补色搭配以取得更好的对比效果。 按钮悬停背景和按钮按下颜色就是使用对比色的两个示例。

替换调色板中的颜色
  1. 打开级联样式表文件,然后使用简化的调色板在绘画程序(如 Adobe Photoshop 或 Jasc Paint Shop Pro)中修改调色板。

  2. 使用取色器(或类似工具),并同时使用默认调色板文件以及之前创建的调色板,查找新的十六进制值。

    note注意:
    确保您的计算机在 32 位颜色模式下运行。 如果不是在 32 位颜色模式下运行,则绘画程序报告的默认调色板值将会与本主题中显示的值略微有些不同。
  3. 记录每个十六进制替代颜色,以便用新颜色更新 owacolors.css 文件。

  4. 请在记事本中打开 owacolors.css 文件,然后查找并用新值替换每个原有的十六进制颜色值。

  5. 修改完 owacolors.css 文件后,请将新 owacolors.css 文件复制到您的服务器,再登录到 Outlook Web Access,然后检查目前得到的结果。 请记住,这些更改只会影响颜色,而不影响图像。 调整完调色板后,就可以开始更改图像了。

创建自定义主题的最后一个步骤就是修改默认图像。

更新图像
  1. 请在绘画程序中打开每个图像,然后将其临时转换为 24 位或 32 位颜色图像。

  2. 将渐变色应用到图像,使其与新调色板中的颜色相对应。

note注意:
应将更新后的图像另存为 16 种或 256 种颜色的 .gif 文件。 tool-bkgd.gif 和 nin-bg.gif 文件应保存为 256 种颜色。 其他图像可以保存为 16 种颜色。

下表显示了此示例主题的更新后的图像。

 

图像 文件 描述
假 OWA 徽标图像

Logo2.gif

主要徽标。 对于此图像,请用新的“框架背景”替换现有背景颜色,或用自定义图像替换此图像。

OWA 佛罗里达主题图形

Nb-bkgd.gif

导航栏背景(重复)。 这是 1x26 像素的条带,作为 Outlook Web Access 窗口左侧导航栏的背景色。 默认图像使用渐变颜色填充。

OWA 主题图形

Nb-hide-ql.gif

导航栏“隐藏”图像。 此 50x8 像素的图像用在左侧导航窗口中,该窗口用于隐藏或展开导航栏。

OWA 佛罗里达主题图形

Nb-ql-tgl.gif

导航栏“隐藏”背景。 该图像显示在 hb-hide-ql.gif 和 hb-show-ql.gif 文件后面。 它通常是渐变填充,且它的颜色不会与后面的图像相冲突。

OWA 佛罗里达主题图形

Nb-sel-bkgd.gif

已选中导航栏。 此 1x26 像素的图像用作导航栏中的背景高光。

OWA 主题图形

Nb-show-ql.gif

导航栏“显示”图像。 该图像与 nb-hide-ql.gif 的大小相同。当隐藏导航栏选项(日历、选项、收件箱)时将显示该图像。

OWA 佛罗里达主题图形

Nin-bg.gif

弹出通知“烘托”背景。 此 130x126 像素的图像是 Outlook Web Access 弹出通知的背景。 可以使用任何要使用的图像上的水印修改此图像,但要确保其上的文本仍然可读。

OWA 主题图形

Resize-dot.gif

此 1x1 像素的图像用于 Outlook Web Access 内部。

OWA 佛罗里达主题图形

Tool-bkgd.gif

工具栏背景 此 1x32 像素的图像是背景图像,用于 Outlook Web Access 窗口顶部的工具栏。 同时,它也是导航栏中未选按钮的背景图像。 此图像应保存为 256 种颜色。

下图显示了带有新主题的 Outlook Web Access。

应用于 OWA UI 的佛罗里达主题示例

以下几部分内容提供了在您创建主题时可能会有所帮助的更多信息。

此工具可以从针对该主题的 optional download(英文网页)下载,是一个名为 owatheme.htm 的 HTML 文件。当将此文件放在具有 owacolors.css 样式表的目录中时,将显示样式表中使用的所有颜色列表,以及相关的 Outlook Web Access 类。 有关该列表的示例,请参阅本主题稍后部分中的“默认模板颜色使用”。

通常,如果在 Outlook Web Access 用户界面中看到要更改的颜色,可以进行屏幕截图,然后在绘画程序中打开,找到颜色的网值,然后在 owacolors.css 样式表中查找此值。

实际上,所有的 Outlook Web Access 对象都有一个与之相关的样式类。 在查看 owacolors.css 文件时,某些样式类会比其他样式类更明显。 可能需要几次尝试才能找到您要添加到背景中的类名称。

通常,添加背景图像的级联样式表语法与以下示例相似。

Classname
{
     Background-image:url(/exchweb/themes/yourtheme/imagename.gif)
}

例如,要将棕榈树图像添加到自定义主题中的 Outlook Web Access 页面背景中,请修改 msgViewermsgViewerContmsgViewerGroupCont 类的规则。 以下示例显示了这种修改。

.msgViewer, .msgViewerCont, .msgViewerGroupCont
{
     Background-image:url(/exchweb/themes/orange/viewpalm.gif)
}

下图显示了修改后的结果。

OWA UI 佛罗里达主题的棕榈树背景

尽管有 200 多类可供挑选,但是您可能只有兴趣将其中的几个类更改为背景图像。 下表显示了这些类。

 

类名称 描述

.notebody

所有项目类型(消息、会议请求、任务)。

.treefolder, .nbTreeProgress

文件夹树控件。

.dlgBody

几个通用对话框包括: 移动、复制、新建文件夹、地址名称解析、消息选项。

.previewBody, .vwPrvwTD

预览窗格主体和背景。

.bdyOptions

Outlook Web Access 选项页面。

.bdySpell

拼写检查器功能对话框

.bdyRules

规则选项和编辑器。

.msgViewer, .msgViewerCont, .msgViewerGroupCont

Outlook Web Access 项目视图列表。

本部分将讨论默认主题图像。 更改主题目录之外的图像会影响所有主题。 Outlook Web Access 在 Exchange Server 2003 中使用 500 多幅不同的图像。Outlook Web Access 默认主题仅使用一些特定的图像。 如果决定更改核心图像,请避免更改图像大小(像素高度和宽度)。

虽然该主题只讨论 owacolors.css 中的样式更改,但在 ..exchweb/versionnumber/controls 目录中还有其他一些内部使用的样式表,包括 OWAStyle.css。通常,尽管这些文件中的类定义可能会重复,但 OWAStyle.css 中定义的元素将不会出现在 owacolors.css 中。如果尝试在您的主题样式表中重新定义其中的一个元素,您将不会看到任何变化,因为最新的元素定义具有优先级,并且在浏览器所看到的 HTML 中最后呈现 OWAStyle.css。

添加了主题之后,还有几种其他方式可用于在组织中使用主题。

默认情况下,当您按照本主题中的说明进行操作时,所有用户都将能够使用您的主题。 某些组织可能希望将其 Outlook Web Access 安装标准化,并指定所有用户都可以看到的自定义主题。 通过将 DefaultTheme 添加到 Outlook Web Access 注册表设置,并将其值定义为您已创建的自定义主题的值,可以设置默认主题。

设置 DefaultTheme
  1. 在您的后端服务器上,运行注册表编辑器。

  2. 转到以下注册表项:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  3. 在“主题”子项下,创建名为 DefaultTheme 的新的 DWord 值。

  4. 指定 DefaultTheme 值作为要设置为默认主题的主题 ID。

note注意:
指定 DefaultTheme 后,所有用户都看到同一主题,且无法再指定其他主题。 要使用户可以选择自己的主题,请删除 DefaultTheme 值。

以下资源提供了可帮助您创建新 Outlook Web Access 主题的更多信息。

OWATheme.htm 文件生成主题中使用的所有颜色和类的列表。 要使用该文件,请将您在检查时感兴趣的主题 owacolors.css 文件复制到 OWATheme.htm 所在的同一目录。打开 OWATheme.htm 时,它将读取 owacolors.css 文件并生成主题的颜色和类表。

OWATheme.htm 文件包含在有关该主题的 optional downloadable file(英文网页)中。

默认的简化 Outlook Web Access 调色板包含在 optional downloadable file(英文网页)中。

已与 Xbox 团队一起为 Outlook Web Access 创建了一个 Xbox 主题。

使用 Xbox 主题
  1. Download the optional file for the theme(英文网页).

  2. 将文件内容解压缩并将其复制到 themes\xbox 目录。

  3. 运行注册表编辑器并转到以下注册表项:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  4. 在“主题”子项下,添加值 xbox

  5. 将该值设置为:

    Id=100;path=xbox;title=Xbox;bgcolor=#000000

    note注意:
    可能需要更改 ID,以与服务器兼容。

下表列出了默认主题中使用的所有颜色。 每个条目都包含一个颜色样本、一个与 Web 等效的代码、一个 RGB 代码,以及所有使用 owacolor.css 文件中的颜色的 Outlook Web Access 类。

 

OWA 调色板上的颜色示例

dlgBody noteBody bdyOptions bdySpell bdyRules bdyFontEdit bdyDatePkr bdyView tabselected tabdiv srchBody notification galBody galInputArea galButtons gallBody gallClsTable gallClsTextField enBody enClsTable rmndrBODY rmndrICell btnSig btnSig btnSig btnSig btnEnc btnEnc btnEnc btnEnc

OWA 调色板上的颜色示例

mainBody cbToolbar fldrTitleBar vwTbl THeader nbTableMain dailyAllDayCell dailyAllDayContainer

OWA 调色板上的颜色示例

msgViewer msgViewerCont msgViewerGroupCont recipWell recipBox tbButtonDown:hover cbSubmenu cbSubmenu cbSubmenu cbSubmenu viewBody tblMsgBody txtBody grpLEFT grpRIGHT grpTop grpBottom tabselected tabselected tabselected tabsunselected tabsunselected tabsnone tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrSrtd vwHdrSrtd vwHdrSrtd attachList divCtxtMenu divCtxtMenu previewBody rulesHeader rulesHeader selRow trSelItem nbDropMenu nbDropMenu treeFolder nbTreeProgress dlgTree dlgTree dlgTree rowselected divgaltable rmndrRowSel groupHdr groupHdr ctxtMenu ctxtMenu ctxtMenu ctxtMenu cpMainTable dailyAppt weeklyMainTable weeklyAlldayAppointment weeklySelectedDateHeader monthlyNextPrevDateHeader monthlySelectedDateHeader monthlyDateBody monthlyNextPrevDateBody monthlyAlldayAppointment fbbodyLTR fbbodyLTR fbbodyLTR fbbodyLTR fbbodyRTL fbbodyRTL fbbodyRTL fbbodyRTL recip hrdivbottom btnSigPreview btnSigPreview btnSigPreview btnSigPreview btnEncPreview btnEncPreview btnEncPreview btnEncPreview btnSigHover btnSigHover btnSigDown btnSigDown

OWA 调色板上的颜色示例

msgHeader previewHdr rnSecBar fldDisabled unselRow trUnselItem rowunselected UNKNOWN fb_splitter_behavior fb_span_div fbtable fbbodyLTR fbbodyRTL tr sigInfoInput sigInfoTable

OWA 调色板上的颜色示例

recipWell ipFlat ipFlat ipFlat ipFlat recipBox recipBox recipBox recipBox MSGBODY MSGBODY MSGBODY MSGBODY txtBody txtBody txtBody txtBody attachList attachList attachList attachList

OWA 调色板上的颜色示例

cbToolbar FORMATBAR nbTglTD nbTglQLTD

OWA 调色板上的颜色示例

tbDivider tbDivider tbDivider tbDivider apptTdDatePicker apptTdDatePicker nbLabel

OWA 调色板上的颜色示例

tbButton tbButtonDown tbButtonRaise cbSubmenuItem cbSubmenu rnProgressBar divRcpResRIn divRcpResROut divRcpResCIn divRcpResCOut divRcpResC unselRow shdwRow ctxmnuMnu trUnselItem nbHref treeFolder nbTreeProgress fldName rowunselected divgaltable divgaltable divgaltable divgaltable rmndrCol1hd rmndrCol1hd crdHeader groupHdr cpMainTable cpMainTable cpMainTable cpMainTable cpTopRow cpActiveDateCell cpSelectedDateCell cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 dailyViewCell dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer7 dailyContainer7 dailyContainer7 dailyContainer7 dailyAppt dailyAppt dailyAppt dailyAppt weeklyMainTable weeklyMainTable weeklyMainTable weeklyMainTable weeklyDateCell weeklyDateCell weeklyDateCell weeklyDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklySelectedAppointment weeklySelectedAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyNextPrevDateHeader monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlySelectedAppointment monthlySelectedAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment

OWA 调色板上的颜色示例

tbButtonDown tbButtonRaise tbButtonRaise tbButton A:hover tbButton:hover cbSubmenuItem A:hover cbSubmenuItem:hover

OWA 调色板上的颜色示例

tbButtonDown:hover

OWA 调色板上的颜色示例

cbSubmenuItem cbSubmenuItem cbSubmenuItem cbSubmenuItem fbButton fbButton fbButton fbButton cbSubmenu divContextMenu divCtxtMenu ctxmnuBar nbDropMenu ctxtMenu dailyRow monthlyDayHeader

OWA 调色板上的颜色示例

tblMsgBody tblMsgBody vwHdrSrtd vwHdrSrtd vwHdrBrdr3 divCtxtMenu nbDropMenu dlgTree dlgTree btnSigHover btnSigHover btnSigDown btnSigDown

OWA 调色板上的颜色示例

tblMsgBody tblMsgBody tabselected tabsunselected tabsunselected tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrBrdr2 divCtxtMenu rulesTableContainer rulesTableContainer rulesHeader rulesHeader nbDropMenu groupHdr groupHdr

OWA 调色板上的颜色示例

rnStatusBar

OWA 调色板上的颜色示例

rnStatusBar

OWA 调色板上的颜色示例

rnProgressBar

OWA 调色板上的颜色示例

tabsunselected

OWA 调色板上的颜色示例

tabBkgd

OWA 调色板上的颜色示例

vwHdrSrtd

OWA 调色板上的颜色示例

vwHdrTR vwHdr tblHdr rulesHeader shdwRow gallistheading crdHeader groupHdr cpTopRow cpSelectedDateCell calDateHeadingCell dailyAllDayCell dailyAllDayAppointment dailySelectedAllDayAppointment calDateHeadingText1 calDateHeadingText2 calDateHeadingText3 calDateHeadingText4 calDateHeadingText5 calDateHeadingText6 calDateHeadingText7 dailyHoursCell dailyMinsCell

OWA 调色板上的颜色示例

vwHdrBrdr1

OWA 调色板上的颜色示例

divRcpUnresRIn divRcpUnresROut divRcpUnresCIn divRcpUnresCOut divRcpUnresC ruleBroken cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell tblSigInvalid tblSigInvalid

OWA 调色板上的颜色示例

purpleFlg

OWA 调色板上的颜色示例

orangeFlg

OWA 调色板上的颜色示例

greenFlg

OWA 调色板上的颜色示例

yellowFlg

OWA 调色板上的颜色示例

blueFlg

OWA 调色板上的颜色示例

redFlg

OWA 调色板上的颜色示例

completeFlg vwFldrTtl vwName THeader rulesTableContainer

OWA 调色板上的颜色示例

noFlg

OWA 调色板上的颜色示例

previewBody previewBody previewBody previewBody

OWA 调色板上的颜色示例

vwSortCol

OWA 调色板上的颜色示例

vwPrvwTD

OWA 调色板上的颜色示例

vwItemSep

OWA 调色板上的颜色示例

ruleNotSupported

OWA 调色板上的颜色示例

DLCertMissing tr tr tr tr

OWA 调色板上的颜色示例

selRow trSelItem rowselected rmndrRowSel ctxtMenu cpDayLettersCell cpWeekNumberCell dailySelectedAllDayAppointment weeklySelectedAppointment weeklySelectedAlldayAppointment weeklySelectedDateHeader monthlySelectedDateHeader monthlySelectedAppointment monthlySelectedAlldayAppointment

OWA 调色板上的颜色示例

fldset

OWA 调色板上的颜色示例

ctxmnuBar

OWA 调色板上的颜色示例

ctxmnuMnu nbHref:hover nbTglHref:hover aQL:hover aFU:hover

OWA 调色板上的颜色示例

nbLabel nbLabel nbLabel nbLabel

OWA 调色板上的颜色示例

nbTglTD nbTglTD nbTglTD nbTglTD nbTglQLTD nbTglQLTD nbTglQLTD nbTglQLTD

OWA 调色板上的颜色示例

treeFolder treeFolder treeFolder treeFolder nbTreeProgress nbTreeProgress nbTreeProgress nbTreeProgress

OWA 调色板上的颜色示例

fldUrdCt

OWA 调色板上的颜色示例

fldCntCt divMins divMins divMins divMins

OWA 调色板上的颜色示例

rmndrWarning

OWA 调色板上的颜色示例

cpInactiveDateCell colorFree row

OWA 调色板上的颜色示例

dailyViewCell dailyBackgroundTable colAM

OWA 调色板上的颜色示例

dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyHoursCell dailyHoursCell dailyHoursCell dailyHoursCell dailyMinsCell dailyMinsCell dailyMinsCell dailyMinsCell dailyApptCell dailyApptCell dailyApptCell dailyApptCell dailyCellEven

OWA 调色板上的颜色示例

dailyCellWorking colPM

OWA 调色板上的颜色示例

colorBusy

OWA 调色板上的颜色示例

colorTentative

OWA 调色板上的颜色示例

colorOOF

OWA 调色板上的颜色示例

weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyDayTitlesCell

OWA 调色板上的颜色示例

weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlyDateCell monthlyDateCell monthlyDateCell monthlyDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell

OWA 调色板上的颜色示例

monthlyNextPrevDateBody

OWA 调色板上的颜色示例

monthlyWeekendDateCell

OWA 调色板上的颜色示例

fbtime tdUsrBkgd

OWA 调色板上的颜色示例

fb_color_div

OWA 调色板上的颜色示例

recipBg dvAllAttend

OWA 调色板上的颜色示例

busy busyClr

OWA 调色板上的颜色示例

tent tentClr

OWA 调色板上的颜色示例

oof oofClr

OWA 调色板上的颜色示例

unknownClr

OWA 调色板上的颜色示例

tblSigWarning tblSigWarning

下表列出了颜色、对应的十六进制值,以及这些颜色在简单调色板中的使用位置。

 

颜色和十六进制值 对应于
OWA 调色板上的颜色示例

1. 对话框和注释背景

OWA 调色板上的颜色示例

2. 框架背景

OWA 调色板上的颜色示例

3. 工具栏背景

OWA 调色板上的颜色示例

4. 导航栏、标签背景、工具栏分隔器颜色

OWA 调色板上的颜色示例

5. 菜单背景

OWA 调色板上的颜色示例

6. 3D 边框颜色: 暗

OWA 调色板上的颜色示例

7. 3D 边框颜色: 正常,视图表头渐变(第二行 -- 应该比第 15 行稍微暗些)

OWA 调色板上的颜色示例

8. 信息栏背景

OWA 调色板上的颜色示例

9. 信息栏文本

OWA 调色板上的颜色示例

10. S/MIME 进程标识符背景

OWA 调色板上的颜色示例

11. 未选中的选项卡背景(应该比 1 稍微暗些)

OWA 调色板上的颜色示例

12. 选项卡背景(应该比 11 稍微暗些)

OWA 调色板上的颜色示例

13. 在视图表头中排序列

OWA 调色板上的颜色示例

14. 视图表头背景,视图中选中的行(阴影)

OWA 调色板上的颜色示例

15. 视图表头渐变(第一行 -- 应该比第 14 行稍微暗些)

OWA 调色板上的颜色示例

16. 预览窗格背景

OWA 调色板上的颜色示例

17. 选定的项目

OWA 调色板上的颜色示例

18. 字段集边框(应该比 1 暗些)

OWA 调色板上的颜色示例

19. 上下文菜单左侧栏背景色

OWA 调色板上的颜色示例

20. 按钮悬停背景

OWA 调色板上的颜色示例

21. 已按下按钮

OWA 调色板上的颜色示例

22. 导航栏标签边框颜色

OWA 调色板上的颜色示例

23. 树状控件边框颜色

OWA 调色板上的颜色示例

24. 日历抬头背景

OWA 调色板上的颜色示例

25. 日历抬头边框(应该比 23 稍微亮些)

OWA 调色板上的颜色示例

26. 空闲/忙碌控件背景

OWA 调色板上的颜色示例

27. 空闲/忙碌控件背景(收件人)

OWA 调色板上的颜色示例

28. 树状控件边框

OWA 调色板上的颜色示例

29. 预览窗格背景(无项目)

 
显示: