文字覆蓋圖的自訂品牌和樣式 creating-custom-branding-styling

建立AEM Screens專案。 此範例透過建立名為的專案來展示功能 customstyle 和標題為的頻道 DemoBrand ，如下圖所示。

從編輯器中，拖放影像並將文字覆蓋新增至資產。

從您的AEM執行個體>工具>導覽至CRXDE Lite CRXDE Lite.

在中建立自訂設計 /apps/settings/wcm/designs/<your-project>/例如，在此案例中，導覽至 /apps/settings/wcm/designs/customstyle/

建立 static.css 並設定下列css規則。 亦顯示為css規則下圖的範例。

 //global styles
 cq-Screens-textOverlay {
 padding: 1em;
 font-size: 3rem;
 line-height: 1em;
  }
 //authoring overrides
.aem-AuthorLayer-Edit .cq-Screens-textOverlay {
 display: none;
 padding: 0;
 font-size: 1rem;
 }
  // light text variant
 .cq-Screens-textOverlay-color--light {
  background-color: rgba(0, 0, 0, .6);
  }
  // dark text variant
  .cq-Screens-textOverlay-color--dark {
   background-color: rgba(255, 255, 255, .6);
 }

複製專案的路徑，在此案例中，路徑為 /apps/settings/wcm/designs/customstyle.

瀏覽到標題為 DemoBrand (在步驟(1)中建立)，然後按一下 屬性 從動作列選取頻道後。

導覽至 進階 標籤並核取 設計 欄位。

更新 設計 包含專案資料夾路徑的欄位。 在此案例中，它是 /apps/settings/wcm/designs/customstyle.

按一下 儲存並關閉 以更新設計路徑。

若要依預設覆蓋現有的Screens範本以插入您自己的設計：

1. 覆蓋 /libs/screens/core/templates/sequencechannel 在 /apps/screens/core/templates/sequencechannel.
2. 修改 cq:designPath 中的屬性 /apps/screens/core/templates/sequencechannel/jcr:content 因此它指向新的設計。

完全建立您自己的範本：

1. 複製 /libs/screens/core/templates/sequencechannel 至 /apps/customstyle/templates/styled-sequencechannel.
2. 修改 cq:designPath 中的屬性 /apps/customstyle/templates/styled-sequencechannel/jcr:content 因此它指向新的設計。

導覽至使用者管理員，然後選擇 screens-<project>-devices group 並賦予其自訂設計路徑的讀取許可權。

提供 screens-<project>-administrators 群組讀取及修改此路徑的許可權。

導覽至您的AEM Screens專案，標題為 customstyle > 頻道 > DemoBrand. 按一下頻道，然後按一下 編輯 從動作列移除。

由於您現在已將設計新增至 設計 欄位，如上所述，按一下 預覽 在含有文字覆蓋的影像上檢視目前的樣式。

導覽至 static.css CRXDE Lite檔案，並新增字型，例如， font-family: "Lucida Console", Courier, monospace; 至此檔案，如下所示。

儲存變更並重新載入預覽時，您會看到文字覆蓋字型的更新，如下圖所示。

您也可以從移除程式碼的最後兩個區塊 static.css 檔案移除文字覆蓋周圍的盒裝樣式。

在影像中新增文字覆蓋的預覽中檢視更新的變更。

現在您已準備好更新您的品牌和新增至資產的文字覆蓋的自訂樣式。