Exchange 2013 OWA頁面自定義1 文檔說明 2 OWA自定義通路界面 3 結束語

本文旨在描述如何自定義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>

下面我們依次修改相關資訊

如何修改網頁标題③中答案描述來看是在&lt;title&gt;網頁标題&lt;/title&gt;中間更改。

打開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】找到【&lt;title&gt;&lt;%=PageTitle%&gt;&lt;/title&gt;】更改中間的【&lt;%=PageTitle %&gt;】，例如輸入【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