1     文档说明

  • 本文旨在描述如何自定义Exchange Server 2013 OWA访问界面,以具体事例作为本文档的主要描述对象。

1.1   参考网页

本文主要参考的网页由以下连接提供:


How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013

网页链接:http://careexchange.in/how-to-customize-the-outlook-web-app-owasign-in-page-in-exchange-2013/

Customize the Outlook Web App Sign-In, Language Selection, and ErrorPages

网页链接:http://technet.microsoft.com/en-us/library/ee633483(v=exchg.150).aspx

如何修改网页标题

网页链接:http://zhidao.baidu.com/question/118711669.html

CSS background 属性

网页链接:http://www.w3school.com.cn/css/pr_background.asp

CSS background-repeat 属性

网页链接:http://www.w3school.com.cn/css/pr_background-repeat.asp

CSS background-position 属性

网页链接:http://www.w3school.com.cn/css/pr_background-position.asp

CSS text-align 属性

网页链接:http://www.w3school.com.cn/css/pr_text_text-align.asp

CSS margin-left 属性

网页链接:http://www.w3school.com.cn/css/pr_margin-left.asp

CSS width 属性

网页链接:http://www.w3school.com.cn/css/pr_dim_width.asp

注:本文档下文中会涉及到以上参考网页,请按照①②进行对应,本文档将不会描述出处。

2     OWA自定义访问界面

2.1   OWA访问界面修改内容

How to Customize the Outlook Web App (OWA)Sign-In page in Exchange2013中内容描述中可以看见OWA自定义界面只可以修改网页框中的3张图片,如下图所示

Exchange 2013 OWA页面自定义_第1张图片

本文文档中主要修改OWA界面的以下内容:

1.        网页窗口标签页标题(outlook web app)wKioL1YwiqWQcaSNAAAQBcbJ4VU339.jpg修改;

2.        网页白色背景中的标题(outlook web appwKioL1Ywiv3DPF5qAAAPuCXmBUs845.jpg修改;

3.        网页蓝色背景中白色outlook图片wKioL1Ywiy3gEfBKAAAReStkWHY261.jpg修改;

4.        网页白色背景中添加背景图片wKiom1Ywi1KDSZ-CAAAM9kujzlI422.jpg

5.        网页中白色背景中的登录图标修改wKiom1Ywi2vir-OiAAANEuLTUo8463.jpg

6.        下图中紫色框wKiom1Ywi4XwMNk8AAANWTEcXb0055.jpg中居中,并且【域\用户名】及【密码】与文字输入框左对齐。

7.        其他修改,颜色值及颜色背景边界修改。

Exchange 2013 OWA页面自定义_第2张图片

下面我们依次修改相关信息

2.2   网页窗口标签页标题(outlookweb app)修改

如何修改网页标题中答案描述来看是在<span style="font-family:'宋体';">网页标题</span>中间更改。

打开exchange安装目录默认目录:【C:\Program Files\Microsoft\ExchangeServer\V15\FrontEnd\HttpProxy\owa\auth

找到logon.aspx并以文本的形式打开

注:修改之前请先做备份,如未备份造成问题,本文档概不负责。

Exchange 2013 OWA页面自定义_第3张图片

在打开的文本中打开【查找】(键盘Ctrl+F)输入【title】找到【<%=PageTitle%>】更改中间的【<%=PageTitle %>】,例如输入【I Can Not Fly】保存该文件。

Exchange 2013 OWA页面自定义_第4张图片

查看下修改效果

注:如未更新请刷新网页:F5或者Ctrl+F5

Exchange 2013 OWA页面自定义_第5张图片

2.3   网页白色背景中的标题(outlookweb app)修改

此部分修改内容很简单,只要找到对应的图片更改对应的名称替换掉就可以,主要依据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图片文件。

Exchange 2013 OWA页面自定义_第6张图片

找个厉害的美工去修改你想要的图片(透明底的),本事例随便弄一个图片更改为此名称【owa_Text_Blue.png】→替换当前使用的图片,看下结果:

Exchange 2013 OWA页面自定义_第7张图片

2.4   网页蓝色背景中白色outlook图片修改

这也是找到对应的图片更改对应的名称替换掉就可以,主要依据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】图片文件。

Exchange 2013 OWA页面自定义_第8张图片

2.5   网页白色背景中添加背景图片修改

找厉害的网页编程人员修改下级联样式表,添加下背景图片。

打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到级联样式表logon.css

Exchange 2013 OWA页面自定义_第9张图片

以文本格式打开logon.css文件。找到【body, .mouse, .twide, .tnarrow, form

Exchange 2013 OWA页面自定义_第10张图片

在大括号里面最后一行中输入:【background:#fbfbfb url(owa_bg.png)no-repeat right center;】如下图所示:

Exchange 2013 OWA页面自定义_第11张图片

其中:

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】目录下,看结果:

Exchange 2013 OWA页面自定义_第12张图片

2.6   网页中白色背景中的登录图标修改

这也是找到对应的图片更改对应的名称替换掉就可以,主要依据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】在该文件夹中找到【Sign_in_arrow.png】图片文件,并替换它。

Exchange 2013 OWA页面自定义_第13张图片


2.7   登录框中居中,并且【域\用户名】及【密码】与文字输入框左对齐

2.7.1  登录框居中

打开exchange 2013安装目录【C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.620\themes\resources】在该文件夹中找到级联样式表logon.css并打开,找到【.logonDiv

wKiom1YwkxySAq-fAAAZMvhu9_Y833.jpg

修改大括号中的【text-align:left;】为【text-align:center;】,并保存该文件

wKiom1Ywk36grFCkAAAUoIhWoto066.jpg

查看结果

Exchange 2013 OWA页面自定义_第14张图片

2.7.1  【域\用户名】及【密码】与文字输入框左对齐

logon.css文件中找到【.signInInputLabel

wKioL1YwlGex2UbrAABU8P6fcAg574.jpg

在大括号中输入下列参数,并保存该文件,查看结果

text-align:left;

margin-left:81px;

Exchange 2013 OWA页面自定义_第15张图片

2.8   其他修改(颜色值及颜色背景边界)

在logon.css文件中找到【body, .mouse,.twide, .tnarrow, form】,修改【#fbfbfb】为【#0F1021】,保存该文件

Exchange 2013 OWA页面自定义_第16张图片

查看结果

Exchange 2013 OWA页面自定义_第17张图片

找到【.sidebar】修改背景颜色值【#0072C6】为【#fbfbfb

wKioL1YwlVLhlcs_AAAdZ2SRxfA481.jpg

查看结果

Exchange 2013 OWA页面自定义_第18张图片

找到【.mouse.sidebar, .twide .sidebar】修改宽度值【width:332px为【width:600px

Exchange 2013 OWA页面自定义_第19张图片

原图

Exchange 2013 OWA页面自定义_第20张图片

       结果图

Exchange 2013 OWA页面自定义_第21张图片

3   结束语

本文档只是一个简单的测试文档,其中只包含了一部分内容,仅供查考。

 

【完】