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

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

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

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

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

    影像

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

    影像

    注意

    若要了解如何在管道編輯器中將文字覆蓋新增至資產,請參閱文字覆蓋

  3. 從AEM實例 — >工具 — > CRXDE Lite​導航到CRXDE Lite。

  4. 您必須在/apps/settings/wcm/designs/<your-project>/中建立自訂設計,例如,在此例中,導覽至/apps/settings/wcm/designs/customstyle/

    影像

  5. 建立​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);
     }
    

    影像

  6. 將路徑複製到您的專案,在此情況下,路徑將是/apps/settings/wcm/designs/customstyle

  7. 導覽至標題為​DemoBrand​的管道(在步驟(1)中建立),並在選取管道後,從動作列按一下​屬性

  8. 導覽至「進階」標籤,並檢查「設計」欄位。
    影像

    注意

    預設情況下,Design​欄位會顯示指向libs資料夾中設計的路徑。

  9. 使用專案資料夾的路徑更新​Design​欄位。 在此情況下,會是/apps/settings/wcm/designs/customstyle

    影像

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

    重要

    您可以選擇覆蓋現有的Screens範本,依預設插入您自己的設計,或完全建立您自己的範本。 如需詳細資訊,請參閱下列步驟。

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

    1. 覆蓋/apps/screens/core/templates/sequencechannel中的/libs/screens/core/templates/sequencechannel
    2. 修改/apps/screens/core/templates/sequencechannel/jcr:content中的​cq:designPath​屬性以指向新設計。
  12. 若要完全建立您自己的範本:

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

更新ACL

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

  1. 導覽至使用者管理員,選擇screens-<project>-devices group並授予其自訂設計路徑的讀取權限。

  2. 提供screens-<project>-administrators群組對此路徑的讀取和修改權限。

查看結果

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

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

  1. 導覽至標題為​customstyle —> Channels —> DemoBrand​的AEM Screens專案。 選取通道,然後按一下動作列中的​Edit​以開啟編輯器。

  2. 由於您現在已將設計新增至​Designs​欄位,如上所述,請按一下​Preview​以檢視包含文字覆蓋之影像上的目前樣式。

    影像

  3. 以CRXDE Lite導覽至您的​static.css​檔案,並將字型(例如font-family: "Lucida Console", Courier, monospace;)新增至此檔案,如下所示。
    影像

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

    影像

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

  6. 您將在預覽中檢視更新的變更,將文字覆蓋新增至影像。

    影像

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

本頁內容