共用方式為

如何建立 Outlook Web Access 的佈景主題

  • 發行項

 

適用版本： Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007

上次修改主題的時間： 2007-09-12

本主題說明如何建立 Microsoft Office Outlook Web Access 的自訂主題。主題是檔案與樣式表的集合，可控制 Outlook Web Access 的外觀。當您在執行 Microsoft Exchange Server 2007 的電腦上安裝 Client Access server role 時，預設會安裝兩個主題。這兩個主題就是「天藍」和「碳黑」。

僅有 Outlook Web Access (高階) 支援自訂主題。您無法為 Outlook Web Access (基本) 建立自訂主題。

Exchange 2007 SP1 中的新功能

Outlook Web Access 在 Exchange Server 2007 Service Pack 1 (SP1) 加入了兩個額外的主題。這兩個主題是 Xbox 和 Zune。

主題中包含的項目

主題是媒體檔案和階層式樣式表 (.css 檔案) 的集合。這些檔案儲存在 Client Access Server 之安裝目錄的 \Client Access\OWA\version\themes 中。每一個主題都儲存在 themes 的子目錄中。

.css 檔定義色彩、漸層及字型。影像檔 (.gif 檔) 提供圖示及其他圖形元素。如果您有編輯任何圖示，請不要變更其大小。如果您變更其他圖形元素的大小，請測試所做的變更，以確認這些元素仍可以正確地互相搭配。

預設主題 (天藍) 是基礎主題，您可以在 \themes\base 中找到它。base 資料夾中含有定義主題的所有必要檔案。其中包括色彩、字型、圖示及圖形。

您可以將選取的檔案複製到新目錄中並加以修改，以建立符合您組織需求的其他主題。在 Outlook Web Access 使用者介面中，主題稱為色彩配置。當使用者選取自訂主題時，會先使用自訂主題目錄中的元素，而尚未自訂的任何必要元素則從基礎主題取得。例如，如果您建立新主題的方式是只將標題圖形複製到新主題並加以修改，則當使用者選取該主題時，標題圖形將來自新主題，而其餘主題內容將來自基礎主題。

主題儲存在每一台 Client Access Server 上。如果您有多台 Client Access Server，且想要在所有伺服器上使用自訂主題，則必須將主題複製到每一台 Client Access Server 的 themes 目錄。

建議

許多的 Outlook Web Access 主題元素都可以加以變更。為避免 Outlook Web Access 產生不穩定性，建議您一開始只變更標題、登入和登出頁面，以及用於選取和強調顯示的色彩。

如果想要進行更複雜的變更，請先了解 .css 檔案的運作方式。在充分了解階層式樣式表之後，請一次只變更少數元素並進行測試，以確定結果與您的預期相同。

建議的最佳作法是使用下列指導方針：

  • 開始編輯檔案之前，尤其是在編輯 \themes\base 目錄中的檔案時，請務必建立原始檔案的備份。
  • 請勿刪除 \Client Access\OWA\version\themes\base 資料夾或其中的任何檔案。
  • 請勿變更郵件頂端顯示的資訊列，其作用是在警告使用者，郵件中可能含有有害的內容、網路釣魚攻擊、病毒以及遭到封鎖或遺失的內容。

下圖說明含有兩個資訊列的 Outlook Web Access 行事曆要求。

Outlook Web Access 資訊列

開始之前

若要執行下列程序，您必須登入主控 Outlook Web Access 的伺服器，且您使用的帳戶必須已獲委派本機 Administrators 群組的成員資格。

建立主題

下列程序提供為 Outlook Web Access 建立自訂主題的一般步驟。下列各節包含了在 Outlook Web Access 主題中變更個別元素的特定程序。

建立新的 Outlook Web Access 主題

  1. 在主控 Outlook Web Access 的 Client Access Server 上，開啟 Windows 檔案總管，然後尋找 Exchange 伺服器安裝目錄。

  2. 在 \Client Access\OWA\<version>\themes 中，建立一個新資料夾。

  3. 將基礎主題中的 premium.css 和 owafonts.css 檔案複製到新資料夾中。

  4. 將基礎主題中要變更來建立主題的檔案複製到您所建立的新資料夾中。

  5. 修改新主題資料夾中的檔案以建立您的主題。

  6. 使用 iisreset/noforce 命令，重新啟動網際網路資訊服務 (IIS)。

  7. 登入 Outlook Web Access 並選取新的主題，以測試新的主題。

命名自訂主題

自訂主題有兩種命名方式。第一種方式是對您的某個資料夾 (在該資料夾中建立新主題)，以您要的主題名稱來命名。例如，若要將自訂主題命名為 Fourth Coffee，請將您在某個檔案夾中建立新主題的資料夾，命名為 Fourth Coffee。

在命名自訂主題時，也可以從某個檔案夾 (您在該檔案夾中建立自訂主題) 的基礎主題中，複製 themeinfo.xml 檔案，然後編輯該檔案。您可以使用文字編輯器來編輯 themeinfo.xml 檔案，例如記事本，將主題顯示名稱變更為您要的主題名稱。

編輯 themeinfo.xml 檔案以命名自訂主題

  1. 從基礎主題資料夾中，將 themeinfo.xml 檔案複製到某個資料夾，您在該資料夾中建立自訂主題。

  2. 開啟自訂主題資料夾中的 themeinfo.xml 的複本。

  3. 找出主題 displayname 值，將此值變更為您要的主題名稱。

    範例：若要將主題命名為 Fourth Coffee，檔案名稱應該為 theme displayname = "Fourth Coffee"。

  4. 儲存變更，然後關閉 themeinfo.xml。

note附註：
如果變更主題的名稱，則必須停止並啟動 IIS，以讓變更生效。作法是開啟 [命令提示字元] 視窗，並使用 iisreset/noforce 命令。

建立自訂標頭

您可以自訂主要 Outlook Web Access 頁面的標頭。若要變更 Outlook Web Access 中的標頭，您需要下列檔案：

  • premium.css
  • owafonts.css
  • logopt.gif
  • logopb.gif
  • nbbkg.gif

Premium.css 和 owafonts.css 定義 Outlook Web Access 使用的字型和色彩。Logopt.gif、logopb.gif 及 nbbkg.gif 是在 Outlook Web Access 中用來建立頁首標頭的影像檔。

在影像編輯工具中開啟 .gif 檔案，了解如何在 Outlook Web Access 中用來建立標頭。

下圖說明建立「天藍」Outlook Web Access 主題的標頭所用的原始檔案。

Outlook Web Access 標頭檔案 建立自訂標頭

  1. 從基礎主題資料夾中，將 premium.css、owafonts.css、logopt.gif、logopb.gif 及 nbbkg.gif 複製到自訂主題資料夾。

  2. 在自訂主題資料夾中，使用文字編輯器 (例如記事本) 開啟 premium.css。

  3. 若要從標頭中移除 "Connected to Microsoft Exchange"，請找出 "background:url("logopb.gif") no-repeat;"，在後面加上 display:none;。

  4. 若要變更標誌，請使用影像編輯工具來開啟和修改 logopt.gif。

  5. 如果變更 logopt.gif 的背景色彩，請使用影像編輯工具來編輯 logopb.gif 和 nbbkg.gif，指定相同的背景色彩。

  6. 編輯檔案之後，儲存變更。

  7. 若要測試您對自訂主題所做的變更，請登入 Outlook Web Access，按一下 [選項]，然後按一下 [一般設定]，然後從 [外觀] 功能表中選取自訂主題。必須儲存變更，然後按一下 [重新整理 Internet Explorer]，才能看到新的主題。

變更主題的色彩

若要變更主題的色彩，您必須尋找高階樣式表 (premium.css) 中的值，然後決定您要使用的色彩的 HTML RGB 值。HTML RGB 色彩值是以七個字元的字串所定義，格式為數字記號 (#) 後面接著六個字元的字串。若要尋找許多色彩的 HTML RGB 值，請參閱 MSDN Library 中的色彩表 (英文)。如果必須搭配特定的色彩，但在線上找不到相符的色彩，您可以使用影像編輯工具來取樣並決定 HTML RGB 值。

變更巡覽列中所選模組的反白色彩

  1. 使用文字編輯器 (例如記事本) 開啟 premium.css。

  2. 在檔案中，找出下列項目：

    a.nbHiLt
{
       background-color:#FFEFB2;
}

  3. 以您要的色彩的 RGB 值取代此 RGB 值。

  4. 若要測試您對自訂主題所做的變更，請登入 Outlook Web Access，按一下 [選項]，然後按一下 [一般設定]，然後從 [外觀] 功能表中選取自訂主題。必須儲存變更，然後按一下 [重新整理]，才能看到新的主題。如果已有作用中的 Outlook Web Access 工作階段，請按 F5 來重新整理頁面，就能看到變更。

下圖說明 Outlook Web Access 巡覽列中反白「郵件」模組的區段。

反白顯示的模組 變更主要和次要清單選擇色彩

  1. 使用文字編輯器 (例如記事本) 開啟 premium.css。

  2. 尋找下列項目來變更主要選擇色彩：

    tr.sel, tr.srsel, tr.lrsel
{
      background-color: #FFEFB2;

  3. 尋找下列項目來變更次要選擇色彩：

    tr.shdw, tr.srshdw, tr.lrshdw
{
      background-color:#F8F0D2;

  4. 以您要的色彩 RGB 值取代主要和次要選擇色彩的 RGB 值。

  5. 若要測試自訂主題，請登入 Outlook Web Access，按一下 [選項]，然後按一下 [一般設定]，然後從 [外觀] 功能表中選取自訂主題。必須儲存變更，然後按一下 [重新整理]，才能看到新的主題。如果已有作用中的 Outlook Web Access 工作階段，請按 F5 來重新整理頁面，就能看到變更。

當焦點位於清單窗格時，主要選擇色彩可用來反白窗格中選取的項目。如果使用者接著將焦點移至預覽窗格或功能窗格，則會以次要選擇色彩來反白清單窗格中選取的項目。下圖說明 Outlook Web Access 中主要和次要選擇色彩的差異。

主要與次要醒目提示色彩

note附註：
您可以使用前一個程序的方法來變更其他主題元素的 RGB 值。

變更清單檢視的背景

從功能窗格選取 [郵件]、[連絡人]、[工作] 或 [公用資料夾] 時，Outlook Web Access 會顯示可在這些模組中取得之資料夾內的項目清單。

您可以修改 premium.css 中的設定來新增背景到清單檢視。

變更 Outlook Web Access 中清單檢視的背景

  1. 尋找或建立 .gif 格式的影像。

  2. 將影像檔案複製到自訂主題資料夾。

  3. 使用文字編輯器 (例如記事本) 開啟 premium.css。

  4. 尋找下列內容來變更背景影像：

    div#divLstV{width:100%;height:100%;}

  5. 將字串編輯為：

    div#divLstV{background-image: url(image file name);width:100%;height:100%;}

  6. 尋找下列內容來變更背景透明度，讓新影像能正確地顯示：

    td#tdIL{background-color: #FFFFFF;height:100%;vertical-align:top;}

  7. 將背景色彩值取代為值 transparent：

    td#tdIL{background-color:transparent;height:100%;vertical-align:top;}

  8. 若要測試自訂主題，請登入 Outlook Web Access，按一下 [選項]，然後按一下 [一般設定]，然後從 [外觀] 功能表中選取自訂主題。必須儲存變更，然後按一下 [重新整理]，才能看到新的主題。如果已有作用中的 Outlook Web Access 工作階段，請按 F5 來重新整理頁面，就能看到變更。

變更預設 Outlook Web Access 主題

利用 Set-OwaVirtualDirectory 指令程式，您可以將虛擬目錄的預設 Outlook Web Access 主題，從基礎主題變更為自訂主題。您也可以使用 Set-OwaVirtualDirectory 指令程式來停用 Outlook Web Access 中的主題選取選項。如果有多個 Outlook Web Access 虛擬目錄，您可以使用下列程序來設定每一個虛擬目錄的預設主題。

設定預設主題後，只有先前未登入 Outlook Web Access 並選取新主題的使用者，才會被強制使用預設主題。

若要強制所有使用者採用預設主題，除了設定新的預設主題，您還必須禁止選擇主題。

使用 Exchange 管理命令介面來設定 Outlook Web Access 的預設主題

  • 若要設定 Outlook Web Access 的預設主題 (其中伺服器名稱是 FourthCoffee、虛擬目錄名稱是 owa、網站名稱是 Default Web site，且主題位於 Custom 資料夾中)，請執行下列命令：

    set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

使用 Exchange 管理命令介面來停用 Outlook Web Access 中的主題選取功能

  • 若要停用 Outlook Web Access 中的主題選取功能 (其中伺服器名稱是 FourthCoffee、虛擬目錄名稱是 owa，網站名稱是 Default Web site)，請執行下列命令：

    set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

您也可以執行下列命令來一次完成這兩個命令：

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

自訂登入及登出頁面

Outlook Web Access 的登入、語言選擇及登出頁面，一律根據基礎主題資料夾中的圖形和 logon.css 檔案建立。因此，若要使用自訂的登入及登出頁面，您必須修改基礎主題資料夾中的檔案。您可以在 Exchange 安裝目錄的 \Client Access\OWA\version\themes\base 中找到基礎主題資料夾。

登入、語言選擇及登出頁面使用 logon.css 檔案來定義文字樣式和色彩。頁面的建立會結合上、下和左右框線的數個影像，也包括重複使用影像和角落來延長。下列檔案建立登入頁面：

  • logon.css
  • lgnbotl.gif
  • lgnbotm.gif
  • lgnbotr.gif
  • lgnexlogo.gif
  • lgnleft.gif
  • lgnright.gif
  • lgntopl.gif
  • lgntopm.gif
  • lgntopr.gif

使用純色建立新的外觀最簡單，因為同一組影像可用於這三個頁面：登入頁面、首次登入信箱時的語言選擇頁面，以及登出頁面。根據頁面的內容，頁面會依水平和垂直方向調整大小。

如果有多台 Client Access Server，且想要全部使用相同的登入和登出頁面，則必須將修改的登入和登出檔案複製到每一台 Client Access Server。

Caution請注意：
因為必須變更基礎主題中的檔案來建立自訂登入和登出頁面，在開始建立自訂登入和登出頁面之前，請先備份您要變更的所有檔案。

下圖說明當使用者按一下 [顯示說明] 並選取 [這是私人電腦] 和 [使用 Outlook Web Access (基本)] 時顯示的預設 Outlook Web Access 登入頁面。其中一個圖顯示建立頁面的圖形檔如何互相搭配。另一個圖顯示 logon.css 檔案如何決定登入頁面背景和文字的色彩。

預設登入頁面 Outlook Web Access 登入頁面文字選項

下圖說明預設 Outlook Web Access 登出頁面。其中一個圖顯示建立頁面的圖形檔如何互相搭配。另一個圖顯示 logon.css 檔案如何決定登出頁面背景和文字的色彩。

預設登出頁面 包含文字選項的 Outlook Web Access 登出頁面

測試登入和登出頁面的變更

在 Internet Explorer 中開啟 Outlook Web Access 登入或登出頁面之後，您可以直接測試變更，不必重設 IIS 或結束 Internet Explorer。

測試登入和登出頁面的變更

  1. 在 Internet Explorer 中開啟 Outlook Web Access 登入或登出頁面。

  2. 在工具列上，按一下 [工具]，然後按一下 [網際網路選項]。

  3. 在 [一般] 索引標籤上，按一下 [瀏覽歷程記錄] 下的 [刪除]。

  4. 在 [Temporary Internet Files] 下，按一下 [刪除檔案]，在詢問您是否確定刪除所有 Internet Explorer 暫存檔案時，按一下 [是]。

  5. 按一下 [確定]，關閉 [網際網路選項]。

  6. 按一下 [重新整理] 以查看變更。

每次變更登入或登出頁面檔案時，請重複這些步驟來查看變更。如果進行多項變更，您可以讓登入或登出頁面保持開啟，並重複步驟來查看變更。

變更標誌

若要自訂 Outlook Web Access，您可以將登入和登出頁面的 Outlook Web Access 標誌變更為您的組織標誌。

在 Outlook Web Access 中變更標誌

  1. 為您要變更的檔案建立複本，並儲存到安全的位置，必要時就能還原原始頁面。

  2. 使用影像編輯工具開啟 lgntopl.gif 檔案，修改檔案來建立您要使用的標誌。

  3. 儲存變更，然後按一下 [重新整理] 按鈕來查看變更。

    note附註：
    如果已變更 lgntopl.gif 的背景色彩，建議您將用來建立登入和登出頁面的剩餘檔案，修改為相符的色彩。

變更字型樣式和色彩

您可以編輯 logon.css 檔案，變更頁面使用的字型樣式和部分色彩。其中包括在登入頁面和語言選擇頁面中心的控制項背後的背景色彩。如果已變更這些頁面的色彩，建議您變更為相符的背景色彩。

若要變更登入、語言選擇及登出頁面的背景和字型色彩，您必須找出登入樣式表 (logon.css) 中的值，然後決定您要使用的色彩的 HTML RGB 值。HTML RGB 色彩值是以七個字元的字串所定義，格式為數字記號 (#) 後面接著六個字元的字串。若要尋找許多色彩的 HTML RGB 值，請參閱 MSDN Library 中的色彩表 (英文)。如果必須搭配特定的色彩，但在線上找不到相符的色彩，您可以使用影像編輯工具來取樣並決定 HTML RGB 值。

若要測試變更，請開啟 Internet Explorer，輸入 Outlook Web Access 的 URL。若是在主控 Outlook Web Access 虛擬目錄的 Client Access Server 上測試預設網站的變更，您可以開啟 Internet Explorer 並輸入 URL https://localhost/owa 來進行測試。

note附註：
使用者只有在第一次登入 Outlook Web Access 時才會看到語言選擇頁面。

下表列出登入和登出頁面的元素及每一個元素的描述。

登入和登出頁面元素及其描述

變更的元素 搜尋的字串 描述

背景色彩

Background: #7F90b1

登入和登出頁面的背景色彩。如果變更圖形檔的背景色彩，則應該變更為相符的背景色彩。

警告文字

wrng{color:#f8d328}

當使用者選取 [這是私人電腦] 時出現的警告文字的色彩。在現有的 Outlook Web Access 登入頁面上，此警告文字是黃色，在藍色背景上顯得十分突出。如果變更登入頁面的背景色彩，您也可能想要將警告文字的色彩變得更為明顯。

主要文字色彩

select, table {color:#ffffff;}

主要文字色彩是白色。代表 Outlook Web Access 登入頁面上可選取的選項和輸入欄位。例如使用者名稱和密碼欄位的標籤，以及安全性選項旁邊的文字。如果為登入頁面選擇深色，則白色仍適用於此文字。

顯示說明

a{color#ffe052;

登入頁面上的連結，使用者可按一下來顯示或隱藏私人和公用登入的說明。

Outlook Web Access (基本) 描述

disBis{color:#c8d3e3;}

當使用者選取 [使用 Outlook Web Access (基本)] 時，畫面會顯示 Outlook Web Access (基本) 的簡短說明。

已連接到 Microsoft Exchange

;color:#fffff;

登入和登出頁面的左下角會顯示「已連接到 Microsoft Exchange」字串。變更此值會變更這些字的文字色彩。

分割線

#A9AAc4

使用 logon.css 的三個頁面都以細線來分割為數個區段。這些頁面包括登入、登出及語言選擇。變更背景和字型色彩之後，您可能想要變更線條的色彩，讓線條雖然看得見，但不像文字那麼明顯。

在決定您要變更色彩的元素並確定這些元素將改為什麼 HTML RGB 值之後，請使用下列程序來變更以 .css 檔案定義的任何元素的色彩。

變更元素的色彩

  1. 開啟 logon.css。

  2. 請參考本主題稍早的登入和登出頁面元素表格，找出您要變更的元素的相符字串。

  3. 以您要在元素上使用的新的 HTML RGB 色彩值，取代您要變更的元素的 HTML RGB 色彩值。

  4. 儲存變更，關閉 logon.css。

  5. 開啟 Internet Explorer 並輸入 Outlook Web Access 登入頁面的 URL 來測試變更。

note附註：
如果已開啟 Outlook Web Access 登入 URL，您可以刪除網際網路暫存檔案並重新整理 Internet Explorer 來測試變更。作法是按一下 [工具]，然後按一下 [網際網路選項]。在 [一般] 索引標籤上，按一下 [瀏覽歷程記錄] 下的 [刪除]。在 [Temporary Internet Files] 下，按一下 [刪除檔案]，在詢問您是否確定刪除所有 Internet Explorer 暫存檔案時，按一下 [是]。按一下 [確定]，關閉 [網際網路選項]，然後按 F5 來重新整理登入頁面。

若要確保您目前閱讀的是最新資訊，並尋找其他的 Exchange Server 2007 說明文件，請造訪 Exchange Server 技術資源中心.