本文旨在描述如何自定义Exchange Server 2013 的OWA访问界面,以具体事例作为本文档的主要描述对象。
本文主要参考的网页由以下连接提供:
①How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013
②Customize the Outlook Web App Sign-In, Language Selection, and ErrorPages
③如何修改网页标题
④CSS background 属性
⑤CSS background-repeat 属性
⑥CSS background-position 属性
⑦CSS text-align 属性
⑧CSS margin-left 属性
⑨CSS width 属性
注:本文档下文中会涉及到以上参考网页,请按照①②进行对应,本文档将不会描述出处。
在How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013中内容描述中可以看见OWA自定义界面只可以修改网页框中的3张图片,如下图所示
<a href="http://s3.51cto.com/wyfs02/M01/75/01/wKioL1YwiauiQZ1WAAJS809gnE0247.jpg" target="_blank"></a>
本文文档中主要修改OWA界面的以下内容:
7. 其他修改,颜色值及颜色背景边界修改。
<a href="http://s3.51cto.com/wyfs02/M00/75/04/wKiom1YwjAii8B2-AAIJNkBayJQ644.jpg" target="_blank"></a>
下面我们依次修改相关信息
如何修改网页标题③中答案描述来看是在<title>网页标题</title>中间更改。
打开exchange安装目录默认目录:【C:\Program Files\Microsoft\ExchangeServer\V15\FrontEnd\HttpProxy\owa\auth】
找到logon.aspx并以文本的形式打开
注:修改之前请先做备份,如未备份造成问题,本文档概不负责。
<a href="http://s3.51cto.com/wyfs02/M02/75/02/wKioL1YwjVCgzGSWAAGUJzCY6eg660.jpg" target="_blank"></a>
在打开的文本中打开【查找】(键盘Ctrl+F)输入【title】找到【<title><%=PageTitle%></title>】更改中间的【<%=PageTitle %>】,例如输入【I Can Not Fly】保存该文件。
<a href="http://s3.51cto.com/wyfs02/M01/75/02/wKioL1Ywjd7T4ZfTAAJVJxJd2W0648.jpg" target="_blank"></a>
查看下修改效果
注:如未更新请刷新网页:F5或者Ctrl+F5
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1Ywjm3AT2iUAACvyIHnrFk778.jpg" target="_blank"></a>
此部分修改内容很简单,只要找到对应的图片更改对应的名称替换掉就可以,主要依据How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013 ①为参考。
打开exchange 2013安装目录【C:\Program Files\Microsoft\ExchangeServer\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到【owa_Text_Blue.png】图片文件。
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1YwjvfDaC3rAAEJYbPqe6k522.jpg" target="_blank"></a>
找个厉害的美工去修改你想要的图片(透明底的),本事例随便弄一个图片更改为此名称【owa_Text_Blue.png】→替换当前使用的图片,看下结果:
这也是找到对应的图片更改对应的名称替换掉就可以,主要依据How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013 ①为参考。
打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到【Olk_logo_White.png】图片文件。
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1YwkDzBHIB8AAE786f5deQ477.jpg" target="_blank"></a>
找厉害的网页编程人员修改下级联样式表,添加下背景图片。
打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到级联样式表logon.css
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1YwkLOwtaM8AAG4L3v-XMY270.jpg" target="_blank"></a>
以文本格式打开logon.css文件。找到【body, .mouse, .twide, .tnarrow, form】
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1YwkRXAZs5PAAL0gkI7Fm4606.jpg" target="_blank"></a>
在大括号里面最后一行中输入:【background:#fbfbfb url(owa_bg.png)no-repeat right center;】如下图所示:
<a href="http://s3.51cto.com/wyfs02/M01/75/02/wKioL1YwkbyS9UptAAB3atCT3xU258.jpg" target="_blank"></a>
其中:
Background:简写属性在一个声明中设置所有的背景属性(请参考④);
#fbfbfb:代表颜色值;
url(owa_bg.png):url指定图片位置,owa_bg.png图片名称;
no-repeat:背景图像将仅显示一次。(请参考⑤)
right center:背景图位置右侧对齐,居中(请参考⑥)
找个厉害的美工去修改你想要的背景图片(当然透明底最好),本事例随便弄一个图片更改为此名称【owa_bg.png】→放在【C:\Program Files\Microsoft\ExchangeServer\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】目录下,看结果:
<a href="http://s3.51cto.com/wyfs02/M02/75/05/wKiom1YwkmmBBvrjAAF57K7vU-8110.jpg" target="_blank"></a>
打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到【Sign_in_arrow.png】图片文件,并替换它。
<a href="http://s3.51cto.com/wyfs02/M02/75/02/wKioL1YwkwGisPRgAAEKNAusbRc090.jpg" target="_blank"></a>
打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到级联样式表logon.css并打开,找到【.logonDiv】
<a href="http://s3.51cto.com/wyfs02/M00/75/05/wKiom1YwkxySAq-fAAAZMvhu9_Y833.jpg" target="_blank"></a>
修改大括号中的【text-align:left;】为【text-align:center;】,并保存该文件
<a href="http://s3.51cto.com/wyfs02/M02/75/05/wKiom1Ywk36grFCkAAAUoIhWoto066.jpg" target="_blank"></a>
查看结果
在logon.css文件中找到【.signInInputLabel】
<a href="http://s3.51cto.com/wyfs02/M02/75/03/wKioL1YwlGex2UbrAABU8P6fcAg574.jpg" target="_blank"></a>
在大括号中输入下列参数,并保存该文件,查看结果
text-align:left;⑦
margin-left:81px;⑧
<a href="http://s3.51cto.com/wyfs02/M00/75/03/wKioL1YwlHLgEOQUAACn_z1XaSE994.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M01/75/05/wKiom1YwlLeCnviWAABhBL1uFtY268.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M02/75/03/wKioL1YwlSvjcS3WAAFXDHPm9As876.jpg" target="_blank"></a>
找到【.sidebar】修改背景颜色值【#0072C6】为【#fbfbfb】
<a href="http://s3.51cto.com/wyfs02/M00/75/03/wKioL1YwlVLhlcs_AAAdZ2SRxfA481.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M01/75/06/wKiom1YwlUiixrXdAAFNCoyuIhQ459.jpg" target="_blank"></a>
找到【.mouse.sidebar, .twide .sidebar】修改宽度值【width:332px】⑨为【width:600px】
<a href="http://s3.51cto.com/wyfs02/M01/75/06/wKiom1Ywlc2iJCNGAABbkxTwSbo391.jpg" target="_blank"></a>
原图
<a href="http://s3.51cto.com/wyfs02/M02/75/06/wKiom1YwlfyDSPtmAAE7DRRJrmE339.jpg" target="_blank"></a>
结果图
<a href="http://s3.51cto.com/wyfs02/M02/75/03/wKioL1YwlkbxWpK8AAEocOH8TlY150.jpg" target="_blank"></a>
本文档只是一个简单的测试文档,其中只包含了一部分内容,仅供查考。
【完】
本文转自 zyliday 51CTO博客,原文链接:http://blog.51cto.com/itsoul/1707375