文字覆蓋的自訂品牌和樣式

請參照本頁面，了解如何針對套用至AEM Screens管道中資產的文字覆蓋，套用自訂品牌和樣式。

建立文字覆蓋的自訂品牌和樣式

請依照下列步驟，為文字覆蓋建立自訂品牌和樣式：

建立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)中建立)，並在選取管道後，從動作列按一下屬性。
導覽至「進階」標籤，並檢查「設計」欄位。

注意

預設情況下，Design欄位會顯示指向libs資料夾中設計的路徑。
使用專案資料夾的路徑更新Design欄位。在此情況下，會是/apps/settings/wcm/designs/customstyle。
按一下儲存並關閉以更新設計路徑。

重要

您可以選擇覆蓋現有的Screens範本，依預設插入您自己的設計，或完全建立您自己的範本。如需詳細資訊，請參閱下列步驟。
若要覆蓋現有的Screens範本，以依預設插入您自己的設計：
1. 覆蓋/apps/screens/core/templates/sequencechannel中的/libs/screens/core/templates/sequencechannel。
2. 修改/apps/screens/core/templates/sequencechannel/jcr:content中的cq:designPath屬性以指向新設計。
若要完全建立您自己的範本：
1. 將/libs/screens/core/templates/sequencechannel複製到/apps/customstyle/templates/styled-sequencechannel。
2. 修改/apps/customstyle/templates/styled-sequencechannel/jcr:content中的cq:designPath屬性以指向新設計。

更新ACL

您必須更新這些設計的ACL，以便播放器下載。

導覽至使用者管理員，選擇screens-<project>-devices group並授予其自訂設計路徑的讀取權限。
提供screens-<project>-administrators群組對此路徑的讀取和修改權限。

查看結果

完成上述步驟後，您就可以從CRXDE Lite更新statis.css檔案，然後檢視已新增至資產的文字覆蓋的更新。

請依照下列步驟，檢視已更新的設計以覆蓋文字：

導覽至標題為customstyle —> Channels —> DemoBrand的AEM Screens專案。選取通道，然後按一下動作列中的Edit以開啟編輯器。
由於您現在已將設計新增至Designs欄位，如上所述，請按一下Preview以檢視包含文字覆蓋之影像上的目前樣式。
以CRXDE Lite導覽至您的static.css檔案，並將字型（例如font-family: "Lucida Console", Courier, monospace;）新增至此檔案，如下所示。
儲存變更並重新載入預覽後，您會看到文字覆蓋字型的更新，如下圖所示。
此外，您也可以從static.css檔案中移除程式碼的最後兩個區塊，以移除文字覆蓋周圍的盒裝樣式。
您將在預覽中檢視更新的變更，將文字覆蓋新增至影像。

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