自己打造个性化Exchange OWA 登录/注销界面
2010-01-02 11:54:49
标签： owa Exchange
前言
看到论坛很多朋友对如何定制OWA 2007登陆/注销界面比较感兴趣，大家就这个话题也发起了很多帖子，看来爱美之心人皆有之。
尽管OWA2007比OWA2003界面漂亮了不少，但是看久了难免会厌倦。所以今天我就先来抛块砖，和大家分享一下如何DIY我们的OWA界面，希望大家会喜欢！
（站长lianggj曾有一篇针对OWA 2003主页自定义的精华文章，有需要的朋友可以查看如下链接: 《 自定义OWA主页》）
操作
1.其实，个性化OWA web界面很简单，本质上是修改如下的一些文件（1个CSS样式文件和9个gif图片）：
logon.css
lgnbotl.gif
lgnbotm.gif
lgnbotr.gif
lgnexlogo.gif
lgnleft.gif
lgnright.gif
lgntopl.gif
lgntopm.gif
lgntopr.gif
这些文件位于CAS服务器上的C:\Program Files\Microsoft\Exchange Server\ClientAccess\Owa\8.1.240.5\themes\base目录中。
（注：8.1.240.5这个目录可能会和大家的有所不同，这个和当前Exchange的版本号相同，因为我的Exchange是2007 SP1，所以显示是8.1，
请按照自己的实际情况更换路径，包括更换Exchange的安装路径）
2.为了直观显示各个图片的位置，方便大家对照修改，特贴出如图1的图片：
（图1）
3.以上的gif文件就不多说了，我想说一下logon.css的作用。它主要定义了登录页、语言选择页和注销页所使用的文本样式、
颜色和背景颜色等。
4.好了，现在可以进入实际操作阶段。将以上的gif图片找到，按照相同的大小和格式使用图像编辑工具设计好自己喜欢的图片
或者直接修改原图片并替换之。至于能设计到哪个程度，得看你的美术天赋了。我的艺术细胞不多，只能在这里向大家献丑了。
其实我主要目的还是想和大家分享一下从技术层面上如何实现我们的需求，要说美工水平自己都不敢恭维自己：（
（注：
a. 在进行所有修改之前，请备份好要修改的文件，如果觉得备份指定文件比较麻烦，可以直接将前面路径中的base目录复制另存一份，
反正这个目录占用空间挺小的。
b. 为了保持整个页面的简单和视觉上的协调，建议对所有图像中的背景使用纯色，这样比较漂亮，别扔砖头！我是外行人在说内行话！
因为Exchange 2007 OWA默认也是纯色，英雄所见果然一般！
5.图片文件修改好后，接下来的工作是修改logon.css这个文件。估计前面的图片设计已经花费了你不少的时间吧，
当你庆幸以为图片改好了、工作快结束了时，我可要泼你冷水了：高兴什么呢？！还早着呢！如果你的审美要求比较高、
如果你是一个注重完美的人，那么修改logon.css这个文件一定会让你头疼不已。
6.前面我已经说过，logon.css它主要定义了登录页、语言选择页和注销页所使用的文本样式、颜色和背景颜色等。
经过前面的修改后，你会发现OWA界面不但没有按照我们预期的想法修改好，反而被我们改得不伦不类了：
自己修改好的图片和OWA自带的默认图片混杂在一起，真是难看得很！其实我们只要简单修改一下这个logon.css文件就可以了。
打开base目录下的logon.css，查找字符串“background: #7f90b1” ，如图2所示：
（图2）
将#7f90b1替换为你想要的值，如我在这个演示中就将其替换为#f5c38c，大小写无所谓。这个#f5c38c代表的是和前面图片颜色比较配套的橘黄色。
修改完以后，打开浏览器，输入OWA站点的URL测试，此时是不是整体颜色都协调多了？！
（注：
a．此处和后面的查找内容我都用引号引起来了，实际输入查找的时候请不要输入引号。
b．#f5c38c表示的RGB颜色的十六进制数值，每两个数据分别代表着红、绿、蓝三原色。
c．一般用photoshop可以直接取到十进制的颜色数据，然后再可以使用系统自带的计算器或者第三方小工具将其转化为十六进制，
例如十进制的255使用计算器转换为十六进制就是FF。再如255，255，255转换成十六进制就是FFFFFF，也就是代表纯白色。）
看到论坛很多朋友对如何定制OWA 2007登陆/注销界面比较感兴趣，大家就这个话题也发起了很多帖子，看来爱美之心人皆有之。
尽管OWA2007比OWA2003界面漂亮了不少，但是看久了难免会厌倦。所以今天我就先来抛块砖，和大家分享一下如何DIY我们的OWA界面，希望大家会喜欢！
（站长lianggj曾有一篇针对OWA 2003主页自定义的精华文章，有需要的朋友可以查看如下链接: 《 自定义OWA主页》）
操作
1.其实，个性化OWA web界面很简单，本质上是修改如下的一些文件（1个CSS样式文件和9个gif图片）：
logon.css
lgnbotl.gif
lgnbotm.gif
lgnbotr.gif
lgnexlogo.gif
lgnleft.gif
lgnright.gif
lgntopl.gif
lgntopm.gif
lgntopr.gif
这些文件位于CAS服务器上的C:\Program Files\Microsoft\Exchange Server\ClientAccess\Owa\8.1.240.5\themes\base目录中。
（注：8.1.240.5这个目录可能会和大家的有所不同，这个和当前Exchange的版本号相同，因为我的Exchange是2007 SP1，所以显示是8.1，
请按照自己的实际情况更换路径，包括更换Exchange的安装路径）
2.为了直观显示各个图片的位置，方便大家对照修改，特贴出如图1的图片：
（图1）
3.以上的gif文件就不多说了，我想说一下logon.css的作用。它主要定义了登录页、语言选择页和注销页所使用的文本样式、
颜色和背景颜色等。
4.好了，现在可以进入实际操作阶段。将以上的gif图片找到，按照相同的大小和格式使用图像编辑工具设计好自己喜欢的图片
或者直接修改原图片并替换之。至于能设计到哪个程度，得看你的美术天赋了。我的艺术细胞不多，只能在这里向大家献丑了。
其实我主要目的还是想和大家分享一下从技术层面上如何实现我们的需求，要说美工水平自己都不敢恭维自己：（
（注：
a. 在进行所有修改之前，请备份好要修改的文件，如果觉得备份指定文件比较麻烦，可以直接将前面路径中的base目录复制另存一份，
反正这个目录占用空间挺小的。
b. 为了保持整个页面的简单和视觉上的协调，建议对所有图像中的背景使用纯色，这样比较漂亮，别扔砖头！我是外行人在说内行话！
因为Exchange 2007 OWA默认也是纯色，英雄所见果然一般！
5.图片文件修改好后，接下来的工作是修改logon.css这个文件。估计前面的图片设计已经花费了你不少的时间吧，
当你庆幸以为图片改好了、工作快结束了时，我可要泼你冷水了：高兴什么呢？！还早着呢！如果你的审美要求比较高、
如果你是一个注重完美的人，那么修改logon.css这个文件一定会让你头疼不已。
6.前面我已经说过，logon.css它主要定义了登录页、语言选择页和注销页所使用的文本样式、颜色和背景颜色等。
经过前面的修改后，你会发现OWA界面不但没有按照我们预期的想法修改好，反而被我们改得不伦不类了：
自己修改好的图片和OWA自带的默认图片混杂在一起，真是难看得很！其实我们只要简单修改一下这个logon.css文件就可以了。
打开base目录下的logon.css，查找字符串“background: #7f90b1” ，如图2所示：
（图2）
将#7f90b1替换为你想要的值，如我在这个演示中就将其替换为#f5c38c，大小写无所谓。这个#f5c38c代表的是和前面图片颜色比较配套的橘黄色。
修改完以后，打开浏览器，输入OWA站点的URL测试，此时是不是整体颜色都协调多了？！
（注：
a．此处和后面的查找内容我都用引号引起来了，实际输入查找的时候请不要输入引号。
b．#f5c38c表示的RGB颜色的十六进制数值，每两个数据分别代表着红、绿、蓝三原色。
c．一般用photoshop可以直接取到十进制的颜色数据，然后再可以使用系统自带的计算器或者第三方小工具将其转化为十六进制，
例如十进制的255使用计算器转换为十六进制就是FF。再如255，255，255转换成十六进制就是FFFFFF，也就是代表纯白色。）
| 7.按照以上步骤修改完成以后，你会发现尽管整体颜色、风格都比较协调了，但是总感觉哪里仍看上去比较别扭。 不错，那是因为主界面中的字体颜色和图片仍不太协调、和背景色仍不太匹配。例如，我在实验的时候将背景色修改为了橘黄色， 而OWA页面中的某些警告文本也是淡黄色的，这样一看就非常刺眼，很不美观、对比度也不高。在解决这个问题前，请先耐着性子看看图片3： 
（图3）8.上面的图片是什么意思呢？其实，上面用红线标记出来的文本都可以通过logon.css来定制它们的显示颜色， 包括分割线的颜色也是可以修改的。如默认的“主体文本”的颜色是白色。如果你的OWA界面颜色偏淡，那么“主体文本” 的颜色还用白色的话就不太妥当了，可能看都看不见！怎么办呢？在logon.css中改呗！前面我之所以说修改这个文件 很让人头疼是因为没有现成的资料告诉我们图3中的每个文本都对应logon.css中哪些颜色值的设置，需要我们神农尝 百草般的自己去反复试验，直到满足我们的要求才行。 9.为了方便大家，我将自己尝试得到的一些结果和大家分享一下，免得太浪费时间了。大家只要按照前面介绍的方法查找替换相应的值即可。 a. “background: #7f90b1;” --> 整体背景色 b.” select, table{color:#ffffff;}” --> 主体文本颜色 c.“.txt{color:#000000” --> 输入用户名密码的字体颜色 d.” #A9AAc4” --> 分割线颜色 e.“.wrng{color:#F8D328;}.” --> 警告文本颜色 f.”.disBsc{color:#C8D3E3;}” --> 使用OWA基本客户端主体文本颜色 g.“.expl{color:#C8D3E3;}” --> 显示/隐藏说明主体文本颜色 h.“padding:0;color:#ffffff;” --> 已连接到Exchange文本颜色 i.” {color:#FFE052;text-decoration” --> 安全性旁边的显示/隐藏说明四个字本身的颜色 其实，能够定义颜色的地方还有很多很多，例如还可以定义输入用户名密码后的“登录”按钮的前、背景色。也正因为有太多颜色值， 所以我不可能一一介绍，更多的需要自己反复测试。我前面提供的应该能满足大部分需求了。 10.OK,到这里就临近尾声了，独乐乐不如众乐乐。我来秀秀我定制的OWA登录/注销界面，如图4和5. 相对Exchange OWA的默认界面应该还不错吧，至少能给你公司同事耳目为之一新的感觉吧。 
(图4) 
（图5）
11.最后还补充两点: a.为了便于大家学习和测试，我会在文章结束后将自己修改好的一套图片和logon.css文件都发上来和大家共享 b.在测试的时候，如果遇到修改不生效的情况，请清空IE缓存下来的临时文件后再重试。 结束语 整个演示到此就Over了，原本还准备自定义一个主题出来的，无奈美工水平实在不咋滴，故只好作罢。 其实修改主题的思路和前面的操作都是大同小异的。看了我定制的OWA2007登录/注销页面，你是不是也动心了呢？ 那赶快行动起来吧！完了千万不要吝啬和大家分享你的DIY成果哦！如果对本文有任何意见或问题，欢迎指正！ 最后附上我修改好的图片和对应的CSS文件: http://www.5dmail.net/pic/owa.rar |