建立 Outlook Web App 的主題

  • 發行項

 

適用版本： Exchange Server 2010 SP2, Exchange Server 2010 SP3

上次修改主題的時間： 2016-11-28

本主題說明如何建立 Microsoft Office Outlook Web App 的自訂主題。主題是媒體檔案和階層式樣式表 (.css 檔案) 的集合，可以控制 Outlook Web App 的外觀。

當您在執行 Microsoft Exchange Server 2010 的電腦上安裝 Client Access server role 時，預設會安裝多個主題。

  • .css 檔 -- 定義色彩、漸層及字型。

  • 圖像 (.png) 檔 -- 提供圖示和其他圖形元素。如果您要編輯任何圖示，請不要變更其大小。如果您變更任何圖形元素的大小，請測試您所做的變更，以確認這些元素仍可以正確地互相搭配。

這些檔案儲存在 Client Access Server 上安裝目錄的 \Client Access\OWA\<version>\themes 中。每一個主題都儲存在 themes 的子目錄中。您可以複製現有主題並且修改複本來建立其他主題。

注意事項附註：
Light 版 Outlook Web App 不支援主題。

建議

許多的 Outlook Web App 主題元素都可以加以變更。為避免造成 Outlook Web App 不穩定，建議您只變更與自訂主題直接相關的檔案。

以下這些指導方針提供您一些最佳作法：

  • 編輯檔案之前，務必先製作原始檔案的備份複本。

  • 在您將升級或 Hotfix 套用至擁有自訂主題的 Client Access Server 之前，請先製作這些主題的備份複本。

  • 一次只進行一項或兩項變更，並且在進行其他變更之前先測試變更。

  • 請勿變更 \Client Access\OWA\<version>\themes\resources 中的檔案。Outlook Web App 中的每一個主題都會使用這些檔案所定義的字型和其他設定。因此變更這些檔案勢必會影響每一個主題。

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

要尋找與自訂 Outlook Web App 的外觀相關的其他管理工作嗎？請參閱自訂 Outlook Web App 登入及登出頁面。

您想要做什麼？

  • 建立新的 Outlook Web App 主題

  • 為您的自訂主題命名

  • 為您的主題建立自訂圖示

  • 建立自訂標頭

  • 使用 Internet Explorer 開發人員工具決定色彩

  • 變更主題中的色彩

  • 變更主題中的圖示和標誌

  • 設定預設 Outlook Web App 主題

建立新的 Outlook Web App 主題

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

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

  2. 在 \Client Access\OWA\<version>\themes 中，尋找使用接近您想要的色彩配置的主題，然後複製該主題。

  3. 為您剛剛建立的複本提供一個簡短名稱，且該名稱類似您要為主題命名的名稱。

  4. 除了您需要變更以建立主題的其他檔案之外，在您的新主題資料夾中建立下列檔案的備份複本。如果您需要復原變更，這些複本將保留您的原始設定：

    • premium.css

    • csssprites.png

    • csssprites2.png

    • headerbgmain.png

    • headerbgright.png

  5. 遵循下列各節的步驟，修改新主題資料夾中的檔案以建立您的主題。

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

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

為您的自訂主題命名

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

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

  2. 尋找主題的 displayname 值，然後將這個值變更為您要為主題命名的名稱。

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

  3. 變更 sortorder 值可將您的主題放到 Outlook Web App 的主題選擇器中您想要的位置。

    範例：若要將您的主題設定為第一個出現，檔案名稱應該為 sortorder = 1。

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

  5. 開啟 [命令提示字元] 視窗並使用命令 iisreset/noforce，即可在 Client Access Server 上停止及啟動 IIS。

  6. 若要測試變更，請登入 Outlook Web App，按一下 [選項]，然後在主題選擇器中尋找您的新主題。如果未列出您的主題，請使用 Microsoft Internet Explorer 中的 [網際網路選項] 刪除暫存檔，然後重新整理瀏覽器，並且再次嘗試檢視主題選擇器。

為您的主題建立自訂圖示

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

若要為您的主題建立自訂圖示，則必須編輯 themepreview.png 檔。這個檔案是 Outlook Web App 的主題選擇器中您主題的圖示。

  1. 在影像編輯工具中開啟 themepreview.png，並且進行變更。請勿修改維度。影像是 32x32 像素。

  2. 若要測試變更，請登入 Outlook Web App，按一下 [選項]，然後在主題選擇器中尋找您的新主題。如果您未看見新圖示，請使用 Internet Explorer 中的 [網際網路選項] 刪除暫存檔，然後重新整理瀏覽器，並且再次嘗試檢視主題選擇器。

建立自訂標頭

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

若要變更 Outlook Web App 中的標頭，您必須編輯位於 Outlook Web App 頂端，用來建立標頭的下列檔案：

  • headerbgmain.png

  • headerbgright.png

  • headerbgmainrtl.png (如果您支援由右向左的語言，則只需要編輯這個檔案)。

  1. 在影像編輯工具中開啟 .png 檔，並且進行變更。請勿修改維度。

  2. 若要變更標誌，請使用支援透明背景的影像編輯工具 (例如 Paint.NET 或 Photoshop) 開啟及修改 csssprites.png。這個檔案擁有透明背景。請不要移動或變更檔案中影像的大小，因為 Outlook Web App 會從 csssprites.png 上的特定位置取用每個圖示或標誌。當您編輯檔案中的某個內容時，必須準確地將新影像排列在要取代的影像上方。

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

  4. 若要測試您對自訂主題所做的變更，請登入 Outlook Web App，按一下 [選項]，然後從主題選擇器選取您的主題。如果未看見您的新主題，請使用 Internet Explorer 中的 [網際網路選項] 刪除暫存檔，然後重新整理瀏覽器，並且再次嘗試選取您的自訂主題。

使用 Internet Explorer 開發人員工具決定色彩

Internet Explorer 8 和 Internet Explorer 9 納入開發人員工具，可讓您決定特定元素的色彩和字型，並且測試對這些值的修改。接著您就可以使用開發人員工具中的資訊在 .css 檔中尋找這些值，並且在檔案中進行修改以自訂主題。

  1. 登入 Outlook Web App 並選取任何主題。

  2. 移至顯示您要自訂之元素的模組。例如，如果您要自訂 [郵件] 中的反白色彩，請移至 [郵件]。

  3. 在 Internet Explorer 中，移至程式工具列，並選取 [工具] > [開發人員工具]，或按 F12。

  4. 排列您的視窗，不要讓 Outlook Web App 和 [開發人員工具] 視窗重疊。

  5. 在 [開發人員工具] 中，按一下工具列左邊的選取箭頭，或按 CTRL+B。

  6. 將指標移至您要自訂的 Outlook Web App 區段上方。指標經過每個元素上方時，會看見元素周圍出現外框。您要變更的元素周圍出現外框時，按一下滑鼠。

  7. 在 [開發人員工具] 視窗中尋找。您會看見用來建立頁面的程式碼，而您選取的元素會在左視窗中反白顯示。

  8. 查看右視窗中該元素的色彩。該色彩會是 RGB 值，以七個字元的字串表示，該字串開頭為 #，後面接著六個英數字元。例如，白色會以 #ffffff 表示。

  9. 如果您看不到 RGB 值，請重覆前述步驟並且再試一次。

  10. 看見 RGB 值時，請將它變更為您要的值，然後按 Enter。變更立刻會在 Outlook Web App 中顯示。這樣做不會變更主題，只會變更本機設定，而且僅適用於目前的工作階段。

  11. [開發人員工具] 的右窗格中會顯示該值位於哪個檔案中的哪個位置。

  12. 在您找到要變更的值之後，必須移至 Client Access Server 上您自訂主題的資料夾，並且於 premium.css 中修改該值。

注意事項附註：
若要尋找許多色彩的 HTML RGB 值，請參閱 MSDN Library 中的色彩表 (英文)。如果必須搭配特定的色彩，但在線上找不到相符的色彩，您可以使用影像編輯工具來取樣並決定 HTML RGB 值。[開發人員工具] 提供了一項實用的色彩選擇器工具。從功能表選取 [工具] > [顯示色彩選擇器]。若要判斷所需色彩的 RGB 值，請將滑鼠指標放到擁有該色彩的元素上方。

變更主題中的色彩

在您找到要變更的色彩並且判斷出要做為變更目標的 RGB 值之後，必須在 Client Access Server 上的高階樣式表 (premium.css) 中尋找該內容，並且以新值取代現有值。

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

  1. 使用文字編輯器 (例如 [記事本]) 開啟您自訂主題中的 premium.css 檔。

  2. 在檔案中，使用 Internet Explorer 工具搜尋您找到的值。

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

  4. 若要測試您對自訂主題所做的變更，請登入 Outlook Web App，按一下 [選項]，然後從主題選擇器選取您的主題。如果看不到您的變更，請使用 Internet Explorer 中的 [網際網路選項] 刪除暫存檔，然後重新整理瀏覽器，並且再次嘗試選取您的自訂主題。

變更主題中的圖示和標誌

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱 用戶端存取權限主題中的「圖形編輯器」項目。

若要變更主題中的圖示和標誌，請使用支援透明背景的影像編輯工具 (例如 Paint.NET 或 Photoshop) 開啟及修改 csssprites.png 和 csssprites2.png。這兩個檔案擁有透明背景，而透明背景必須保留，才能正確顯示個別元素。請勿移動或變更檔案中影像的大小，因為 Outlook Web App 會從檔案中的特定位置取得每個影像。當您編輯檔案中的某項內容時，必須將新影像精確地放置在要取代之影像的位置上。

若要變更影像：

  1. 使用支援透明背景的影像編輯工具開啟包含您要變更之圖形元素的檔案。

  2. 編輯您要變更的元素，務必要保留原始元素的位置和大小。

  3. 儲存後關閉檔案。

  4. 若要測試您對自訂主題所做的變更，請登入 Outlook Web App，按一下 [選項]，然後從主題選擇器選取您的主題。如果未看見您的變更，請使用 Internet Explorer 中的 [網際網路選項] 刪除暫存檔，然後重新整理瀏覽器，並且再次嘗試選取您的自訂主題。

設定預設 Outlook Web App 主題

設定預設主題時，只有之前尚未登入 Outlook Web App 並選取新主題的使用者才會強制使用預設主題。

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

使用命令介面設定 Outlook Web App 的預設主題

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱用戶端存取權限主題中的「Outlook Web App 虛擬目錄」項目。

此範例會設定 Outlook Web App 的預設主題，其中伺服器名稱為 "FourthCoffee"、虛擬目錄名稱為 "owa"、網站名稱為 "Default Web site"，且主題位於名為 "Custom" 的資料夾內。

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

如需詳細的語法及參數資訊，請參閱 Set-OwaVirtualDirectory。

使用命令介面停用 Outlook Web App 的主題選取功能

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱用戶端存取權限主題中的「Outlook Web App 虛擬目錄」項目。

此範例會停用 Outlook Web App 中的主題選取功能，其中伺服器名稱為 "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

如需詳細的語法及參數資訊，請參閱 Set-OwaVirtualDirectory。

其他工作

建立主題之後，您可能也想要自訂 Outlook Web App 登入及登出頁面。

 © 2010 Microsoft Corporation. 著作權所有，並保留一切權利。