建立和使用主題

簡介

您可以建立並套用主題，使最適化表單或互動式通訊風格化。 主題包含元件和面板的樣式詳細資料。 樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。 應用主題時，指定的樣式會反映在相應的元件上。 主題是獨立管理的，不參考最適化表單或互動式通訊。

您可以：

• 建立主題
• 編輯和複製現有主題
• 下載現有主題並上傳至AEM Forms伺服器
• 管理主題的相依性

建立、下載或上傳主題

使用AEM Forms，您可以建立、下載或上傳主題。 主題的建立方式與其他資產（如表單、檔案和信函）相同。 主題會儲存為個別實體，並包含表單等中繼屬性。 主題是獨立的實體，可在多種最適化表單和互動式通訊中重複使用。 您也可以將主題移至AEM Forms的不同例項，並加以重複使用。

建立主題

執行下列步驟以建立主題：

1. 按一下​Adobe Experience Manager，按一下​Forms，然後按一下​主題。

2. 在「主題」頁中，按一下「建立」>「主題」。

   啟動建立主題的精靈。

3. 在「建立主題」嚮導的「基本」頁簽中，提供主題的​Title​和​名稱。 這些是必填欄位。

4. 在「進階」標籤中，您會看到兩個欄位：

   • Clientlib位置:儲存主題之clientlib的存放庫位置。
   • Clientlib類別:提供文本欄位以輸入主題的clientlib類別名稱。

5. 按一下「建立」，然後按一下「編輯」以開啟主題編輯器中的主題，或按一下「完成」以返回主題頁。

下載主題

您可以將主題匯出為zip檔案，並在其他專案或AEM例項中使用這些主題。 若要下載主題：

1. 按一下​Adobe Experience Manager，按一下​Forms，然後按一下​主題。

2. 在「主題」頁中，選擇主題，然後按一下​Download。 此時將顯示一個對話框，其中包含主題的詳細資訊。

3. 按一下「下載」。 主題會以zip檔案的形式下載。

上傳主題

您可以在專案上使用具有樣式預設集的已建立主題。 您可以在您的專案上上傳其他人建立的主題套件，借此匯入這些套件。

上傳主題：

1. 按一下​Adobe Experience Manager，按一下​Forms，然後按一下​主題。

2. 在「主題」頁中，按一下「建立>檔案上載」。

3. 在「檔案上載」提示符中，瀏覽並選擇電腦上的主題包，然後按一下​Upload。

   已上傳的主題可在主題頁面中使用。

主題的元資料

主題的元屬性清單（可在主題的屬性頁面中找到）。

關於主題編輯器

AEM Forms隨附主題編輯器。 它是商務使用者和網頁設計人員/開發人員友好的介面，提供所需的功能，以便輕鬆指定各種最適化表單和互動式通訊元素的樣式。 當您建立主題時，主題會儲存為單獨的實體，例如表單、互動式通訊、信函、檔案片段和資料字典。

主題編輯器可讓您自訂主題中已設定樣式的元件樣式。 您可以自訂表單或互動式通訊在裝置上的外觀。

主題編輯器分為兩個面板：

• 畫布 — 顯示在右側。它會顯示範例最適化表單或互動式通訊，讓所有樣式變更都能立即反映。 您也可以直接從畫布選取物件，以尋找與物件相關聯的樣式，並編輯這些樣式。 頂部的設備解析度標尺控制畫布。 從尺標中選擇解析度斷點顯示示例表單的預覽或相應解析度的交互通信。 畫布在🔗下方詳細討論。

• 側欄 — 顯示在左側。它有下列項目：

  • 選取器： 顯示為樣式選取的元件，及其您可設定樣式的屬性。選取器代表類型的所有元件。 如果您在主題中選擇樣式的文本框元件，則窗體或互動通信中的所有文本框都將繼承樣式。 選取器可讓您選取一般元件或樣式的特定元件。 例如，欄位元件是一般元件，文字方塊是特定元件。

    樣式通用元件：

    欄位可以是數值方塊欄位（如年齡），或文字方塊欄位（如地址）。

    當您設定欄位樣式時，所有欄位（如年齡、名稱、地址）都會設定樣式。

    樣式特定元件:

    特定元件會影響特定類別的對象。 在主題中設定數字框元件的樣式時，只有中的數字框對象會繼承樣式。

    例如，文本框欄位（如地址）的長度較長，而數字框欄位（如年齡）的長度較短。 您可以選取數值方塊欄位、縮短欄位長度並套用至表單。 所有數字方塊欄位的寬度會以您的形式縮小。

    使用特定背景顏色自訂所有欄位元件時，所有欄位（如年齡、名稱和地址）都會繼承背景顏色。 選擇數字框（如年齡）並減小其寬度時，所有數字框（如年齡）的寬度、家庭中的人數都會減少。 文本框的寬度未更改。

  • 狀態： 可讓您自訂特定狀態中物件的樣式。例如，您可以指定物件處於預設、焦點、停用、暫留或錯誤狀態時的外觀。

  • 屬性類別： 樣式屬性會分成不同類別。例如「Dimension與位置」、「文字」、「背景」、「邊框」和「效果」。 在每個類別下，您提供樣式資訊。 例如，在「背景」下，可以提供「背景顏色」、「影像和漸層」。

  • 進階： 可讓您新增自訂CSS至物件，以覆寫有重疊時視覺控制項定義的屬性。

  • 檢視CSS:可讓您檢視所選元件的CSS

  此外，在側欄底部會顯示箭頭。 按一下箭頭時，您還會看到兩個選項：模擬成功​和​模擬錯誤。 以下將詳細說明這些選項以及上述 選項。

  A.側 欄 B.畫 布

樣式元件

您可以在多個最適化表單和互動式通訊中使用主題，這會匯入您在主題中指定的元件格式。 您可以設定各種元件的樣式，例如標題、說明、面板、欄位、圖示和文字方塊。 使用小工具集在主題中配置元件屬性。 雖然「CSS覆寫」區段可讓您編寫CSS程式碼或提供自訂選取器，但您並不需要CSS或LESS的先前知識。 當您在側欄中選取元件時，「CSS覆蓋」區段便會出現。

邊欄中的選項，可讓您選取不同元件並設定其樣式。

對側欄中的元件按一下「編輯」按鈕，可在畫布中選取元件，並讓您使用側欄中的選項來設定元件的樣式。

文字方塊、數值方塊、選項按鈕和核取方塊等特定元件會分類在「欄位」等一般元件下。 例如，您要自訂選項按鈕的樣式。 要選擇樣式的單選按鈕，請選擇「欄位>介面工具集>單選按鈕」。

按一下側欄中的​展開全部 ，檢視、選取預先無法顯示的分類元件，並設定其樣式。

樣式面板佈局

AEM Forms中的主題支援表單面板版面中的元素樣式和互動式通訊。 支援現成可用配置和自訂配置中的元素樣式。

現成可用的面板包括：

• 左側的索引標籤

• 索引標籤在頂端

• 折疊式面板

• 回應式

• 精靈

• 行動版面

  • 標題中的面板標題
  • 標題中沒有面板標題

每個版面的選取器不同。
來自主題編輯器的樣式自訂配置涉及：

• 為可設定樣式的版面定義元件，並為唯一識別這些元件的CSS選取器
• 定義可套用在這些元件上的CSS屬性
• 從使用者介面以互動方式定義這些元件的樣式

不同螢幕大小的不同樣式

案頭和行動版面的樣式可能稍有或完全不同。 對於行動裝置，平板電腦和手機共用的版面與元件大小不同。

使用主題編輯器斷點為不同螢幕大小定義替代樣式。 您可以選取開始建立主題的基本裝置或解析度，並自動產生其他解析度的樣式變數。 您可以明確修改所有解析度的樣式。

樣式屬性上下文在選擇對象時在側欄中更改

在畫布中選取元件時，其樣式屬性會列在側欄中。 選取物件類型及其狀態，然後提供其樣式。

主題編輯器中最近使用的樣式

主題編輯器快取最多10種套用至元件的樣式。 您可以將快取樣式與主題的其他元件搭配使用。 最近使用的樣式位於側欄中所選元件的正下方，作為清單框。 最初，最近使用的樣式清單為空。

設定元件的樣式時，樣式會快取並列在清單方塊中。 在此示例中，文本框的標籤已設定樣式以更改字型大小和顏色。 您可以依照類似步驟選擇影像或變更顏色以設定元件樣式。 當欄位標籤樣式變更時，觀察樣式快取和列在清單方塊中的方式。

在此範例中，欄位標籤的樣式已變更，而為樣式選取「回應式面板說明」時，資產資料庫中會新增清單項目。 資產資料庫中的項目可用來變更回應式面板說明的樣式。

在資產資料庫中新增樣式時，其他主題和表單編輯器或互動式通訊編輯器UI的樣式模式中都可使用樣式。 同樣地，使用表單編輯器或互動式通訊編輯器UI的樣式模式來設定元件的樣式時，會快取樣式，並可在主題中使用。

資產資料庫的加號按鈕可讓您以您提供的名稱永久儲存樣式。 即使您未按一下側邊欄中的「儲存」按鈕將樣式套用至元件，加號按鈕仍會儲存樣式。 樣式模式中不提供保存樣式以供以後使用的加號按鈕。

當您為樣式提供自訂名稱時，樣式會系結至主題，而不再適用於其他主題。 要刪除保存的樣式：

1. 在「畫布」工具欄上，按一下「主題選項」 >​管理樣式」。

2. 在管理樣式對話框中，選擇保存的樣式，按一下​刪除。

   

即時預覽、儲存和捨棄變更

在樣式中所做的修改會立即反映在畫布中載入的表單或互動式通訊中。 即時預覽可讓您以互動方式定義及查看樣式的影響。 變更元件的樣式時，側欄中會啟用​Done​按鈕。 要保留更改，請使用​Done​按鈕。

具有其他自適應形式或交互通信的主題

當您建立主題時，會使用主題編輯器附帶的表單建立主題。 您在此表單中提供元件的樣式。 您可以選取您選擇的表單或互動式通訊，以提供樣式並預覽結果，而不是主題編輯器隨附的表單。

要在主題編輯器畫布中替換當前表單或互動式通信：

1. 在「主題編輯器」面板中，按一下「主題選項 >配置」。

2. 在「常規」頁簽中，瀏覽並選擇​適用性表單/文檔​欄位的表單或互動式通信。

重做/還原

您可以還原或重做意外發生的不適當變更。 在畫布中使用重做/還原按鈕。

圖： 畫布中的還原/重做按鈕

在主題編輯器中設定元件樣式時，重做/還原按鈕會出現。

使用主題編輯器

主題編輯器可讓您編輯您建立或上傳的主題。 導覽至「Forms與檔案>主題」，然後選取主題並開啟。 主題在主題編輯器中開啟。

如上所述，主題編輯器有兩個面板：側欄和畫布。

在主題編輯器中自訂文字方塊Widget元件的成功狀態樣式。 元件在畫布中選取，其狀態在側欄中選取。 側欄中可用的樣式選項可用於自訂元件的外觀。

使用畫布

主題是使用現成可用的表單建立，或使用您所選擇的表單或互動式通訊。 畫布會顯示用於建立主題的表單或互動式通訊的預覽，以及主題中指定的自訂項目。 表單上方的尺標用於根據裝置的顯示大小決定版面。

在畫布工具列中，您會看到：

• 切換「側 :讓您顯示或隱藏側欄。

• 主題 :提供三個選項

  • 配置：提供選項，用於選擇預覽表單或互動式通信、基本clientlib和typekit配置。
  • 查看主題CSS:為所選主題生成CSS。
  • 管理樣式：提供管理文字和影像樣式的選項
  • 說明：執行主題編輯器的影像引導導覽。

• ​​:模擬不同顯示大小的主題外觀。在模擬器中，顯示大小被視為斷點。 可以選擇斷點並為其指定樣式。 例如，案頭和平板電腦是兩個中斷點。 可以為每個斷點指定不同的樣式。

在畫布中選取元件時，元件工具列上方會顯示該元件。 元件工具列可讓您選取元件或切換至一般元件。 例如，您可在面板中選取數值文字方塊。 您會在元件工具列中看到下列選項：

• 數值方塊Widget:可讓您選取元件以自訂側欄的外觀。

• 欄位介面工具集:可讓您選取樣式的一般元件。在此示例中，為樣式選擇所有文本輸入元件（文本框/數字框/數字步進器/日期輸入）。

• :可讓您切換為樣式的一般元件。如果您選取數值方塊並點選此圖示，則會選取欄位元件。 如果您選取欄位元件並點選此圖示，則會選取面板。 如果您繼續點選此圖示以進行選取，最後會選取樣式的版面。

圖： 畫布中數值方塊上的元件工具列

使用側欄

主題編輯器中的側欄提供可自訂主題中元件的樣式和使用選擇器的選項。 選取器可讓您選取一組元件或個別元件，並可在側邊欄中搜尋選取器。 您可以為自訂元件編寫選取器。

當您從側欄的畫布或選取器中選取元件時，側欄會顯示所有選項，讓您自訂元件的樣式。
以下是選取元件時，您在側邊欄中看到的選項：

• 狀態
• 屬性表
• 模擬錯誤/成功

狀態

狀態是使用者與元件互動的指標。 例如，當使用者在文字方塊中輸入錯誤資料時，文字方塊的狀態會變更為錯誤狀態。 主題編輯器可讓您指定特定狀態的樣式。

自訂狀態樣式的選項會因元件而異。

屬性表

模擬錯誤/成功

模擬錯誤和成功選項位於側欄底部。 您可以使用側欄底部顯示的顯示/隱藏箭頭來查看它們。 使用主題編輯器，您可以設定元件的各種狀態樣式。

例如，您在表單中新增數值欄位，並在主題編輯器中指定其樣式。 當用戶在欄位中鍵入字母數字值時，您希望文本框的背景顏色更改。 您可以在主題中選取數值欄位，然後在側欄中使用狀態選項。 在側欄中選取「錯誤」狀態，然後將背景顏色變更為紅色。 若要預覽行為，您可以使用側邊欄中的「模擬錯誤」選項。 「模擬錯誤」和「成功」選項的詳細說明如下：

• 模擬成功:

  如果您為成功狀態指定其樣式，可讓您查看元件的外觀。 例如，在表單中，客戶設定密碼。 用戶可以根據您提供的准則設定密碼。 當使用者依照您提供的所有准則輸入密碼時，文字方塊會變成綠色。 文字方塊變成綠色時，就會處於成功狀態。 您可以為處於成功狀態的元件指定樣式，並使用「模擬成功」選項來模擬其外觀。

• 模擬錯誤:

  如果您為錯誤狀態指定其樣式，可讓您查看元件的外觀。 例如，在表單中，客戶設定密碼。 用戶可以根據您提供的准則設定密碼。 當用戶鍵入的密碼不符合您提供的所有准則時，文本框將變為紅色。 文字方塊變成紅色時，會處於錯誤狀態。 您可以為處於錯誤狀態的元件指定樣式，並使用「模擬錯誤」選項來模擬其外觀。

設定元件的樣式

例如，在您的表單中，您有兩種文字方塊：僅接受數值，而接受英數字值的。 您可以為僅接受數值的文字方塊（數值方塊）自訂樣式。

執行下列步驟來自訂特定元件的樣式（此範例中為數值方塊）:

1. 在主題編輯器中，在畫布中選取數值方塊。

2. 選取數值方塊時，您會看到包含三個選項的元件工具列：

   • 數值方塊Widget

   • 欄位Widget

   • 

3. 選擇​數字框Widget。

4. 側欄標題變更為「數值框小部件」，並顯示自定義其外觀的選項。

   在側邊欄中使用​Dimension和位置​選項來自訂元件的大小。 確保狀態為​Default。

選擇元件工具欄中的​欄位介面工具集，並執行上述步驟，而不選擇​數字框介面工具集。 當您為​欄位介面工具集​選項選擇維度時，除數字框外的所有文本框都具有相同的大小。

給定狀態的樣式欄位

使用元件工具欄，還可以為元件的不同狀態指定元件的樣式。 例如，如果元件已停用，則會處於停用狀態。 在主題編輯器中可設定樣式的元件的常用狀態為：預設、焦點、停用、錯誤、成功和暫留。 您可以在畫布中選取元件，然後使用側欄中的「狀態」選項來自訂其外觀。

執行以下步驟來自定義特定狀態下元件的樣式：

1. 在畫布中選取元件，然後從元件工具列中選取適當的選項。

   側欄顯示可自訂元件樣式的選項。

2. 在側欄中選取狀態。 例如，錯誤狀態。

3. 在側邊欄中使用​邊框、背景​等選項來自訂元件的外觀。

4. 使用側欄底部的​模擬錯誤​選項，查看樣式在編輯中的外觀。

在指定元件狀態後自訂元件的樣式時，只會針對指定狀態顯示元件的自訂。 例如，如果您在選取暫留狀態時自訂元件的樣式。 當您在已轉譯的表單或您套用主題的互動式通訊中，將指標移至元件上時，元件便會顯示自訂。

若要模擬錯誤和成功以外的狀態行為，請使用「預覽」模式。 若要使用「預覽」模式，請按一下頁面工具列中的​預覽。

小型顯示器的樣式配置

在畫布中使用尺標可為顯示較小的設備選擇斷點。 按一下畫布中的模擬器以查看尺標和斷點。 中斷點可讓您預覽表單或互動式通訊，以顯示與不同裝置（例如手機和平板電腦）相關的大小。 主題編輯器支援多種顯示大小。

要為不同斷點設定元件樣式：

1. 在畫布中，在標尺上方選擇斷點。

   斷點表示移動設備及其顯示大小。

2. 使用邊欄，針對所選顯示大小在主題中自定義表單或互動式通信元件的樣式。

3. 確保已儲存自訂。

您可以為多部裝置設定表單或互動式通訊元件的樣式。 適用於桌上型電腦和行動裝置的表單和互動式通訊元件可能有完全不同的樣式。

在主題中使用Web字型

您現在可以透過最適化表單或互動式通訊，使用網路服務中可用的字型。 現成可用的TypekitAdobe的Web字型服務可作為配置使用。 要使用Typekit，請在其中建立套件和字型，然後從Typekit網站獲取套件ID。

執行下列步驟以在AEM中設定Typekit:

1. 在製作例項中，按一下「Adobe Experience Manager>工具​>部署>Cloud Services」。

2. 在​Cloud Services​頁面，導覽至​第三方服務 > Typekit ，然後按一下Typekit下的​立即配置 。 如果配置已可用，請按一下​+​按鈕以建立新實例。

3. 在​建立配置​對話框中，指定配置的標題，然後按一下​建立。

   系統會將您重新導向至設定頁面。

4. 在顯示的「編輯元件」對話框中，提供您的套件ID，然後按一下​OK。

執行以下步驟來配置主題以使用TypeKit配置：

1. 在製作例項上，在主題編輯器中開啟主題。

2. 在主題編輯器中，導覽至「主題選項 > 設定」。

3. 在「Typekit配置」欄位中，選擇一個工具包，然後按一下「保存」。

   現在，您可以看到主題的font-family屬性中添加了字型。

在主題編輯器中列出和選擇字型

您可以使用主題配置服務向主題編輯器添加更多字型。 執行以下步驟來添加字型：

1. 以管理權限登入AEM Web Console。 AEM Web控制台的URL為https://[server]:[port]/system/console/configMgr。

2. 開啟​適用性表單主題配置服務。

   

3. 按一下+，指定字型名稱，然後按一下​Save。 此字型會新增，並可在主題編輯器中使用。

在主題編輯器中選擇字型

您可以使用+按鈕來新增字型。 新增字型時，會列在側欄中。

除了主題配置選項之外，您還可以從主題編輯器本身添加字型。 在側欄下方的字型系列欄位中輸入您要使用的字型，然後在鍵盤上按回車鍵。

選取字型時，該字型會新增在字型系列清單下。 您可以使用主題編輯器中的「遮色片」選項來停用或啟用列出的字型。

您可以看到元件字型變更。

「字型系列」欄位支援多種字型。 輸入字型時，瀏覽器會尋找字型並將其套用至選取的元件。 如果瀏覽器找不到字型，它會在系列中查找該字型旁邊的字型。 首先，您可以輸入要尋找的特定字型。 如果找不到要使用的字型，可以在族中鍵入通用字型並使用它。

主題編輯器中應用的掩碼樣式

您可以遮罩主題中套用的樣式。 在主題編輯器側欄中，您可以使用圖示來停用套用的樣式。 例如，如果您以表單或互動式通訊方式變更元件的尺寸，則可以使用屬性左側的遮色片按鈕加以停用。 保存主題時，將保留所選掩碼選項。

以下範例顯示主題中的遮罩和未遮罩樣式。

將主題應用於表單或互動式通信

若要將主題套用至最適化表單：

1. 在編輯模式中開啟表單。 要在編輯模式下開啟表單，請選擇表單並按一下​開啟。

2. 在編輯模式中，選取元件，然後按一下 > 適用性表單容器，然後按一下。

   您可以在側邊欄中編輯表單的屬性。

3. 在側欄中，按一下​樣式。

4. 從​適用性表單主題​下拉式清單中選取主題，然後按一下​Done 。

要將主題應用於互動式通信，請執行以下操作：

1. 在編輯模式中開啟您的互動式通訊。 要在編輯模式下開啟互動式通信，請選擇一個表單並按一下​開啟。

2. 在編輯模式中，選擇元件，然後按一下 >文檔容器，然後按一下。

   您可以在側邊欄中編輯表單的屬性。

3. 在側欄的​Basic​下，從​Theme​下拉式清單中選擇主題，然後按一下​Done 。

在運行時更改表單主題

主題對表單的不同元件設定樣式。 您可以使用themeOverride屬性來動態變更表單的主題。 表單的一般URL為：

https://<server>:<port>/content/forms/af/test.html

您可以使用themeOverride參數在運行時應用主題。

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

themeOverride選項可讓您提供主題的路徑。 它會變更表單的主題，並以更新的樣式重新整理表單。

使用主題獲取特定外觀

有了AEM Forms以及預設的現成畫布主題，還有其他許多主題。 如果您想要使用其他主題來設計表單或互動式通訊，以及進行其他變更，請從「主題庫」資料夾複製主題。 將複製的主題貼到「主題庫」資料夾之外，並根據您想要的更改編輯複製的主題。

要複製主題，請執行以下步驟：

1. 在製作例項中，導覽至​Adobe Experience Manager > Forms >主題。
2. 開啟「主題庫」資料夾。
3. 在「主題庫」資料夾中，將指標暫留在對應的現成可用主題上，然後點選​Copy。
4. 將複製的主題貼到「主題庫」資料夾之外。
5. 自訂複製的主題。

自訂主題後，將其套用至您的表單或互動式通訊。

對其他最適化表單使用案例的影響

• 發佈/取消發佈表單： 發佈表單時，套用至的主題也會發佈（如果尚未發佈）
• 匯入/匯出表單： 匯入或匯出表單時，其相關主題也會自動匯入或匯出。
• 表單的參考： 表單參考中的「參考」區段包含主題的額外項目。
• 表單的上次修改時間： 變更相關主題時更新。
• A/B測試： 您可以在A/B測試中，將不同主題套用至兩個版本的表單。兩個主題的資訊分別儲存在兩個引導容器上。

CSS生成序列

選取檢視CSS時，主題編輯器會收集所有樣式資訊並建置CSS。 它會依下列順序收集資訊：

1. 在主題的基本用戶端程式庫中定義的樣式。
2. 用戶定義的樣式，使用側欄中的屬性指定。
3. 使用CSS覆蓋選項提供的CSS樣式。

例如，在基本客戶端庫中，文本框的背景顏色為藍色。 您可以使用側欄中的屬性將其變更為粉紅色。 產生CSS時，文字方塊的背景顏色會顯示為粉紅色。 使用屬性變更背景顏色後，另一個作者會使用CSS覆寫選項，將背景顏色文字方塊變更為白色。 當您產生CSS時，您會在產生的CSS中將背景顏色顯示為白色。

調試樣式

當您在主題編輯器中指定元件的樣式時，會產生CSS。 對通用元件進行樣式設定時，其中包含的多個元件也會進行樣式設定。 例如，當您設定欄位樣式時，其中的文字方塊和標籤也會設定樣式。 當您在欄位中設定文字方塊的樣式時，它會取得自己的CSS。 如果您想對為欄位和元件產生的CSS除錯，主題編輯器會提供可讓您檢視CSS的選項。

您可以使用下列選項來查看產生的CSS:

• 在邊 欄中查看CSS選項：當您在「主題」中選取元件時，可以在側欄中看到「檢視CSS」選項。它會顯示產生的CSS，包括::before和::after偽元素的CSS。

• 在畫布工 具列中檢視主題CSS選項：在畫布工具列中，按一 > 檢視主題CSS。您可以從主題編輯器中定義的屬性中看到整個主題CSS。

疑難排解、建議和最佳實務

• 避免資產出自其他主題

  編輯主題時，您可以瀏覽並新增其他主題的資產（例如影像）。 例如，您正在編輯頁面的背景。 例如，當您選擇​Page > Background > Add > Image​時，您會看到一個對話框，該對話框允許您瀏覽和添加其他主題中的影像。

• 如果從另一個主題新增資產，而移動或刪除另一個主題，您就會面臨目前主題的問題。 建議您避免瀏覽及新增其他主題中的資產。

• 使用基本clientlib、主題編輯器和內嵌樣式

  • 基clientlib:

    基本客戶端庫包含樣式資訊。 在主題中使用用戶端資料庫的樣式資訊。

    1. 導覽至​Experience Manager>Forms >主題。
    2. 在「主題」頁中，選擇主題並按一下​查看屬性。
    3. 在開啟的「屬性」頁面中，按一下​Advanced。
    4. 在「高級」頁簽的「Clientlib位置」欄位中，瀏覽並選擇您要使用的客戶端庫。
    5. 按一下「儲存」。

    您在用戶端程式庫中指定的樣式會匯入使用它的主題中。 例如，您可指定文字方塊、數值方塊的樣式，以及在用戶端程式庫中切換。 當您以主題匯入用戶端程式庫時，會匯入文字方塊、數值方塊和開關的樣式。 然後，您可以使用主題編輯器來設定其他元件的樣式。
    您也可以建立主題、建立主題的副本，然後修改複製主題中提供的樣式，以利於類似的使用案例。

    請參閱使用主題獲取特定外觀

  • 主題編輯器:

    主題編輯器可讓您建立主題，以設定表單或互動式通訊的樣式。 您可以在主題中指定元件的樣式，以在您開發的多個表單或互動式通訊之間維持外觀和風格的一致性。 建議在主題中指定樣式資訊，然後將主題套用至表單。

  • 內嵌樣式：

    處理表單時，您可以使用表單中的樣式模式或互動式通訊多頻道編輯器來設定元件的樣式。 使用樣式模式更改表單元件樣式將覆蓋主題中指定的樣式。 如果要更改特定表單中某些元件的樣式，請參閱元件的內嵌樣式。

• 使用用戶端程式庫

  如果要建立客戶端庫以導入樣式資訊，請參閱使用客戶端庫。 建立用戶端程式庫後，您可以使用上述步驟，將其匯入主題中。

• 變更容器面板版面寬度

  不建議變更容器面板配置寬度。 當您指定容器面板的寬度時，它會變成靜態，且不會適應不同的顯示。

• 使用表單編輯器或主題編輯器處理頁首和頁尾的時機

  如果要使用字型樣式、背景和透明度等樣式選項來設定頁眉和頁腳的樣式，請使用主題編輯器。

  如果您想要提供標誌影像、頁首中的公司名稱、頁尾中的版權資訊等資訊，請使用表單編輯器選項。