文档AEM 6.5用户指南

自定义创建通信UI customize-create-correspondence-ui

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

概述 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 分支（文件夹结构）：

  • 如果系统有更新，确保文件的安全。 如果有升级、功能包或修补程序， /libs 分支将更新，如果您将更改托管在 /libs 分支，它们将被覆盖。
  • 有助于避免打扰现有的系统/分支，如果您使用默认位置存储自定义文件，则可能会错误地解除干扰。
  • 帮助您的资源在AEM搜索资源时获得更高的优先级。 AEM配置为搜索 /apps 先分支，然后分支 /libs 分支以查找资源。 此机制意味着系统使用您的叠加（以及其中定义的自定义项）。

使用以下步骤在中创建所需的文件夹结构 /apps 分支：

  1. 转到 https://'[server]:[port]'/[ContextPath]/crx/de 并以管理员身份登录。

  2. 在apps文件夹中，创建一个名为 css 路径/结构与css文件夹（在crui文件夹中）类似。

    创建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 
      * 在实例上升级
* 应用热修复程序
* 安装功能包

    3. 单击 确定. css文件夹在指定的路径中创建。

  3. 在apps文件夹中，创建一个名为 imgs 路径/结构与 imgs 文件夹（在ccrui文件夹中）。

    1. 右键单击 imgs 路径下的文件夹并选择 覆盖节点： /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中，右键单击 imgs 路径下的文件夹并选择 “创建”>“创建文件”：

    /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

清除浏览器缓存，然后在浏览器中打开创建通信UI实例，以便您可以看到自定义徽标。

使用自定义徽标创建通信用户界面

创建通信UI中的自定义图标

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