請參照本頁面,了解如何針對套用至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範本,以依預設插入您自己的設計:
/apps/screens/core/templates/sequencechannel
中的/libs/screens/core/templates/sequencechannel
。/apps/screens/core/templates/sequencechannel/jcr:content
中的cq:designPath屬性以指向新設計。若要完全建立您自己的範本:
/libs/screens/core/templates/sequencechannel
複製到/apps/customstyle/templates/styled-sequencechannel
。/apps/customstyle/templates/styled-sequencechannel/jcr:content
中的cq:designPath屬性以指向新設計。您必須更新這些設計的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檔案中移除程式碼的最後兩個區塊,以移除文字覆蓋周圍的盒裝樣式。
您將在預覽中檢視更新的變更,將文字覆蓋新增至影像。
現在您已準備好更新新增至資產之文字覆蓋的品牌和自訂樣式。