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

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined

瞭解如何在AEM Screens頻道中，針對套用至資產的文字覆蓋圖套用自訂品牌和樣式。

建立文字覆蓋圖的自訂品牌和樣式 steps-custom-branding

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

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

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

note note
NOTE
若要瞭解如何在管道編輯器中將文字覆蓋新增至您的資產，請參閱文字覆蓋。

從您的AEM執行個體>工具> CRXDE Lite 瀏覽到CRXDE Lite。
在/apps/settings/wcm/designs/<your-project>/中建立自訂設計，例如，在此案例中，瀏覽至/apps/settings/wcm/designs/customstyle/

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

code language-shell

code language-shell
`//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); }`

 //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)中建立)的頻道，然後在選取頻道後，從動作列按一下內容。

導覽至進階標籤，並檢查設計欄位。

note note
NOTE
根據預設，設計欄位會顯示指向libs資料夾中設計的路徑。

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

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

note important
IMPORTANT
您可以選擇覆蓋現有的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 updating-acls

更新這些設計的ACL，讓播放器可以下載。

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

檢視結果 viewing-the-result

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

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

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