自定义创建通信UI

上次更新: 2023-11-01

概述

通信管理允许您重新品牌化其解决方案模板,以获得更好的品牌价值并遵守贵组织的品牌标准。 重新品牌化用户界面包括更改组织徽标,该徽标显示在创建通信UI的左上角。

您可以在创建通信UI中使用您组织的徽标更改徽标。

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

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

更改创建通信UI中的徽标

要设置您选择的徽标图像,请执行以下操作:

  1. 创建适当的 CRX中的文件夹结构.

  2. 上传新的徽标文件 (在您已在CRX中创建的文件夹中)。

  3. 设置CSS 在CRX上引用新徽标。

  4. 清除浏览器历史记录并 刷新创建通信UI.

创建所需的文件夹结构

创建文件夹结构(如下所述),用于托管自定义徽标图像和样式表。 根文件夹/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/

      匹配节点类型: 已选中

      覆盖节点路径

      注意

      请勿更改 /libs 分支。 您所做的任何更改都可能会丢失,因为每当您:

      * 在实例上升级
      * 应用热修复程序
      * 安装功能包
      
    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. 单击​确定

      注意

      您还可以在/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呈现徽标

自定义徽标图像需要在内容上下文中加载其他样式表。

使用以下步骤可创建样式表,以便通过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文件夹的图像名称。

      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
    4. 单击​全部保存

刷新创建通信UI,以便您可以看到自定义徽标

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

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

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

在此页面上