自訂建立通訊UI customize-create-correspondence-ui

概觀 overview

通訊管理可讓您重新品牌化其解決方案範本,以獲得更好的品牌價值,並遵守您組織的品牌標準。 品牌重塑使用者介面包括變更組織標誌,其顯示在「建立通訊UI」的左上角。

您可以在建立通訊UI中使用您組織的標誌變更標誌。

建立通訊UI中的自訂圖示

建立通訊UI中的自訂圖示

變更建立通訊UI中的標誌 changing-the-logo-in-the-create-correspondence-ui

若要設定您所選擇的標誌影像,請執行下列步驟:

  1. 建立適當的 CRX中的資料夾結構.

  2. 上傳新的標誌檔 ,位於您已在CRX中建立的資料夾中。

  3. 設定CSS 在CRX上,以參照新的標誌。

  4. 清除瀏覽器歷程記錄並 重新整理建立通訊UI.

建立所需的檔案夾結構 creatingfolderstructure

建立檔案夾結構(如下所述),以託管自訂標誌影像和樣式表。 具有根資料夾/apps的新資料夾結構類似於/libs資料夾的結構。

如有任何自訂內容,請在/apps分支中建立平行資料夾結構,如下所述。

/apps 分支(資料夾結構):

  • 如果系統有更新,請確保您的檔案是安全的。 若有升級、功能套件或Hot Fix, /libs 分支會更新,而如果您將變更託管於 /libs 分支,它們會被覆寫。
  • 協助您避免打擾現有的系統/分支,如果您使用預設位置來儲存自訂檔案,您可能會意外解除打擾。
  • 協助您的資源在AEM搜尋資源時獲得更高的優先順序。 AEM已設定為搜尋 /apps 先分支,然後分支 /libs 分支以尋找資源。 此機制表示系統使用您的覆蓋(以及其中定義的自訂)。

使用以下步驟,在中建立所需的檔案夾結構 /apps 分支:

  1. 前往 https://'[server]:[port]'/[ContextPath]/crx/de 並以管理員身分登入。

  2. 在應用程式資料夾中,建立名為的資料夾 css 路徑/結構類似於css資料夾(在ccrui資料夾中)。

    建立css資料夾的步驟:

    1. 用滑鼠右鍵按一下 css 資料夾並選取「 」 覆蓋節點/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      覆蓋節點

    2. 請確定「覆蓋節點」對話方塊是否具備下列值:

      路徑: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      重疊位置: /apps/

      符合節點型別: 已核取

      覆蓋節點路徑

      note note
      NOTE
      請勿變更 /libs 分支。 您所做的任何變更都可能會遺失,因為每當您:
      code language-none
      * 在您的執行個體上升級
      * 套用Hot Fix
      * 安裝Feature Pack
      
    3. 按一下​ 「確定」。css資料夾是在指定的路徑中建立。

  3. 在應用程式資料夾中,建立名為的資料夾 imgs 路徑/結構類似於 imgs 資料夾(在ccrui資料夾中)。

    1. 用滑鼠右鍵按一下 影像 資料夾並選取「 」 覆蓋節點/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

    2. 請確定「覆蓋節點」對話方塊是否具備下列值:

      路徑: /libs/fd/cm/ccr/gui/components/admin/clientlibs/crui/imgs

      覆蓋位置: /apps/

      符合節點型別: 已核取

    3. 按一下​ 「確定」

      note note
      NOTE
      您也可以手動在/apps資料夾中建立資料夾結構。
  4. 按一下 全部儲存 將變更儲存在伺服器上。

將您的自訂標誌檔案上傳至CRX。 標準HTML規則控管標誌的呈現。 支援的影像檔案格式取決於您用來存取AEM Forms的瀏覽器。 所有瀏覽器都支援JPEG、GIF和PNG。 如需詳細資訊,請參閱瀏覽器特定的檔案,瞭解受支援的影像格式。

  • 標誌影像的預設尺寸為48畫素 * 48畫素 確保影像類似於此大小或大於48畫素 * 48畫素
  • 如果您的標誌影像高度超過50畫素,則「建立通訊」使用者介面會將影像縮放至最大高度50畫素,因為這是標頭的高度。 縮小影像時,「建立對應」使用者介面會維持影像的外觀比例。
  • 建立通訊使用者介面不會將影像放大(如果影像太小),因此請確定您使用高度至少為48畫素的標誌影像,且寬度足以使影像清晰。

使用以下步驟,將自訂標誌檔案上傳至CRX:

  1. 前往 https://'[server]:[port]'/[contextpath]/crx/de。如有必要,請以管理員身分登入。

  2. 在CRXDE中,以滑鼠右鍵按一下 影像 資料夾並選取「 」 「建立」>「建立檔案」

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

    在imgs資料夾中建立新節點

  3. 在「建立檔案」對話方塊中,以CustomLogo.png格式輸入檔案名稱(或您的標誌檔案名稱)。

    CustomLogo.png作為新節點

  4. 按一下​ 「儲存全部」

    在您建立的新檔案(此處CustomLogo.png)下,會出現jcr:content屬性。

  5. 按一下資料夾結構中的jcr:content。

    jcr:content的屬性會出現。

    jcrcontentproperties

  6. 按兩下 jcr:data 屬性。

    「編輯jcr:data」對話方塊隨即顯示。

    現在按一下newlogo.png資料夾,然後按兩下jcr:content (dim選項)並設定型別nt:resource。 如果不存在,請以名稱jcr:content建立屬性。

  7. 在「編輯jcr:data」對話方塊中,按一下 瀏覽 並選取您要做為標誌的影像檔案(此處CustomLogo.png)。

    支援的影像檔案格式取決於您用來存取AEM Forms的瀏覽器。 所有瀏覽器都支援JPEG、GIF和PNG。 如需詳細資訊,請參閱瀏覽器特定的檔案,瞭解受支援的影像格式。

    自訂標誌檔案範例

    範例:CustomLogo.png做為自訂標誌

  8. 按一下​ 「儲存全部」

建立CSS以使用UI呈現標誌 createcss

自訂標誌影像需要在內容內容內容中載入額外的樣式表。

使用下列步驟來建立樣式表,以透過UI呈現標誌:

  1. 前往 https://'[server]:[port]'/[contextpath]/crx/de。如有必要,請以管理員身分登入。

  2. 在下列位置建立名為customcss.css的檔案(不能使用不同的檔案名稱):

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/

    建立customcss.css檔案的步驟:

    1. 用滑鼠右鍵按一下 css 資料夾並選取 「建立」>「建立檔案」.

    2. 在「新增檔案」對話方塊中,將CSS的名稱指定為 customcss.css(您無法使用其他檔案名稱),然後按一下 確定.

    3. 將下列程式碼新增至新建立的css檔案。 在程式碼的content:url中,指定您已上傳至CRXDE中imgs資料夾的影像名稱。

      code language-css
      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
    4. 按一下​ 「儲存全部」

重新整理建立通訊UI,以便您可以檢視自訂標誌 refreshccrui

清除瀏覽器快取,然後在瀏覽器中開啟Create Correspondence UI執行個體,以便您檢視自訂標誌。

使用自訂標誌建立通訊使用者介面

建立通訊UI中的自訂圖示

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2