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

請依照本頁面進行,瞭解如何針對套用至AEM畫面頻道中資產的「文字覆蓋」套用自訂品牌和樣式。

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

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

  1. 建立AEM Screens專案。 此範例會建立名為​customstyle​的專案和名為​DemoBrand​的頻道,以展示其功能,如下圖所示。

    影像

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

    影像

    注意

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

  3. 從您的AEM實例—> tools —> 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. 按一下「儲存並關閉」以更新設計路徑。

    重要

    您可以選擇覆蓋現有的「畫面」範本,依預設插入您自己的設計,或完全建立您自己的範本。 請參閱以下步驟以取得詳細資訊。

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

    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. 導覽至您的AEM Screens專案,標題為​customstyle —> Channels —> DemoBrand。 選擇該通道,然後按一下操作欄中的​編輯​以開啟編輯器。

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

    影像

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

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

    影像

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

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

    影像

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

本頁內容