自訂建立通訊UI customize-create-correspondence-ui
概觀 overview
通訊管理可讓您重新品牌化其解決方案範本,以獲得更好的品牌價值,並遵守您組織的品牌標準。 品牌重塑使用者介面包括變更組織標誌,其顯示在「建立通訊UI」的左上角。
您可以在建立通訊UI中使用您組織的標誌變更標誌。
建立通訊UI中的自訂圖示
變更建立通訊UI中的標誌 changing-the-logo-in-the-create-correspondence-ui
若要設定您所選擇的標誌影像,請執行下列步驟:
-
建立適當的 CRX中的資料夾結構.
-
上傳新的標誌檔 ,位於您已在CRX中建立的資料夾中。
-
設定CSS 在CRX上,以參照新的標誌。
-
清除瀏覽器歷程記錄並 重新整理建立通訊UI.
建立所需的檔案夾結構 creatingfolderstructure
建立檔案夾結構(如下所述),以託管自訂標誌影像和樣式表。 具有根資料夾/apps的新資料夾結構類似於/libs資料夾的結構。
如有任何自訂內容,請在/apps分支中建立平行資料夾結構,如下所述。
此 /apps
分支(資料夾結構):
- 如果系統有更新,請確保您的檔案是安全的。 若有升級、功能套件或Hot Fix,
/libs
分支會更新,而如果您將變更託管於/libs
分支,它們會被覆寫。 - 協助您避免打擾現有的系統/分支,如果您使用預設位置來儲存自訂檔案,您可能會意外解除打擾。
- 協助您的資源在AEM搜尋資源時獲得更高的優先順序。 AEM已設定為搜尋
/apps
先分支,然後分支/libs
分支以尋找資源。 此機制表示系統使用您的覆蓋(以及其中定義的自訂)。
使用以下步驟,在中建立所需的檔案夾結構 /apps
分支:
-
前往
https://'[server]:[port]'/[ContextPath]/crx/de
並以管理員身分登入。 -
在應用程式資料夾中,建立名為的資料夾
css
路徑/結構類似於css資料夾(在ccrui資料夾中)。建立css資料夾的步驟:
-
用滑鼠右鍵按一下 css 資料夾並選取「 」 覆蓋節點:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
-
請確定「覆蓋節點」對話方塊是否具備下列值:
路徑:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
重疊位置:
/apps/
符合節點型別: 已核取
note note NOTE 請勿變更 /libs
分支。 您所做的任何變更都可能會遺失,因為每當您:code language-none * 在您的執行個體上升級 * 套用Hot Fix * 安裝Feature Pack
-
按一下 「確定」。css資料夾是在指定的路徑中建立。
-
-
在應用程式資料夾中,建立名為的資料夾
imgs
路徑/結構類似於imgs
資料夾(在ccrui資料夾中)。-
用滑鼠右鍵按一下 影像 資料夾並選取「 」 覆蓋節點:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
-
請確定「覆蓋節點」對話方塊是否具備下列值:
路徑: /libs/fd/cm/ccr/gui/components/admin/clientlibs/crui/imgs
覆蓋位置: /apps/
符合節點型別: 已核取
-
按一下 「確定」。
note note NOTE 您也可以手動在/apps資料夾中建立資料夾結構。
-
-
按一下 全部儲存 將變更儲存在伺服器上。
將新標誌上傳至CRX uploadlogo
將您的自訂標誌檔案上傳至CRX。 標準HTML規則控管標誌的呈現。 支援的影像檔案格式取決於您用來存取AEM Forms的瀏覽器。 所有瀏覽器都支援JPEG、GIF和PNG。 如需詳細資訊,請參閱瀏覽器特定的檔案,瞭解受支援的影像格式。
- 標誌影像的預設尺寸為48畫素 * 48畫素 確保影像類似於此大小或大於48畫素 * 48畫素
- 如果您的標誌影像高度超過50畫素,則「建立通訊」使用者介面會將影像縮放至最大高度50畫素,因為這是標頭的高度。 縮小影像時,「建立對應」使用者介面會維持影像的外觀比例。
- 建立通訊使用者介面不會將影像放大(如果影像太小),因此請確定您使用高度至少為48畫素的標誌影像,且寬度足以使影像清晰。
使用以下步驟,將自訂標誌檔案上傳至CRX:
-
前往
https://'[server]:[port]'/[contextpath]/crx/de
。如有必要,請以管理員身分登入。 -
在CRXDE中,以滑鼠右鍵按一下 影像 資料夾並選取「 」 「建立」>「建立檔案」:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
-
在「建立檔案」對話方塊中,以CustomLogo.png格式輸入檔案名稱(或您的標誌檔案名稱)。
-
按一下 「儲存全部」。
在您建立的新檔案(此處CustomLogo.png)下,會出現jcr:content屬性。
-
按一下資料夾結構中的jcr:content。
jcr:content的屬性會出現。
-
按兩下 jcr:data 屬性。
「編輯jcr:data」對話方塊隨即顯示。
現在按一下newlogo.png資料夾,然後按兩下jcr:content (dim選項)並設定型別nt:resource。 如果不存在,請以名稱jcr:content建立屬性。
-
在「編輯jcr:data」對話方塊中,按一下 瀏覽 並選取您要做為標誌的影像檔案(此處CustomLogo.png)。
支援的影像檔案格式取決於您用來存取AEM Forms的瀏覽器。 所有瀏覽器都支援JPEG、GIF和PNG。 如需詳細資訊,請參閱瀏覽器特定的檔案,瞭解受支援的影像格式。
範例:CustomLogo.png做為自訂標誌
-
按一下 「儲存全部」。
建立CSS以使用UI呈現標誌 createcss
自訂標誌影像需要在內容內容內容中載入額外的樣式表。
使用下列步驟來建立樣式表,以透過UI呈現標誌:
-
前往
https://'[server]:[port]'/[contextpath]/crx/de
。如有必要,請以管理員身分登入。 -
在下列位置建立名為customcss.css的檔案(不能使用不同的檔案名稱):
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
建立customcss.css檔案的步驟:
-
用滑鼠右鍵按一下 css 資料夾並選取 「建立」>「建立檔案」.
-
在「新增檔案」對話方塊中,將CSS的名稱指定為
customcss.css
(您無法使用其他檔案名稱),然後按一下 確定. -
將下列程式碼新增至新建立的css檔案。 在程式碼的content:url中,指定您已上傳至CRXDE中imgs資料夾的影像名稱。
code language-css .logo, .logo:after { content:url("../imgs/CustomLogo.png"); }
-
按一下 「儲存全部」。
-
重新整理建立通訊UI,以便您可以檢視自訂標誌 refreshccrui
清除瀏覽器快取,然後在瀏覽器中開啟Create Correspondence UI執行個體,以便您檢視自訂標誌。
建立通訊UI中的自訂圖示