Show Menu
主题×

自定义创建对应UI

概述

通信管理允许您重新品牌化其解决方案模板,以实现更高的品牌价值并遵守组织的品牌标准。 重新设定用户界面的品牌包括更改组织徽标,该徽标显示在“创建对应UI”的左上角。
您可以在创建对应UI中使用贵组织的徽标更改徽标。
创建对应UI中的自定义图标

在创建对应UI中更改徽标

要设置您选择的徽标图像,请执行以下操作:
  1. 在CRX中创建相 应的文件夹结构
  2. 在CRX上设置CSS ,以引用新徽标。
  3. 清除浏览器历史记录并 刷新“创建对应UI”

创建所需的文件夹结构

创建用于托管自定义徽标图像和样式表的文件夹结构,如下所述。 根文件夹/apps的新文件夹结构与/libs文件夹的结构类似。
对于任何自定义,请在/apps分支中创建一个并行文件夹结构,如下所述。
/apps分支(文件夹结构):
  • 确保文件在系统更新时是安全的。 如果是升级、功能包或热修复,则/libs分支会更新,如果您在/libs分支中存放更改,则这些更改会被覆盖。
  • 帮助您不干扰当前系统/分支,如果您使用默认位置存储自定义文件,则可能会误解该分支。
  • 帮助您的资源在AEM搜索资源时获得更高的优先级。 AEM配置为先搜索/apps分支,然后搜索/libs分支以查找资源。 此机制意味着系统使用您的叠加(以及在此定义的自定义)。
使用以下步骤在/apps分支中创建所需的文件夹结构:
  1. 转到并 https://'[server]:[port]'/[ContextPath]/crx/de 以管理员身份登录。
  2. 在apps文件夹中,创建一个名为的文件夹, 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/
      匹配节点类型: 已选中
      请勿在/libs分支中进行更改。 您所做的任何更改都可能会丢失,因为只要您:
      • 在实例上升级
      • 应用热修复
      • 安装功能包
    3. 单击​ 确定 。css文件夹是在指定路径中创建的。
  3. 在apps文件夹中,创建一个名为的文件夹, imgs 其路径/结构与imgs文件夹(位于ccrui文件夹中)类似。
    1. 右键单击以下路 径的 “图像”文件夹,然后选择“ 叠加节点” : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
    2. 确保“叠加节点”对话框具有以下值:
      路径: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
      叠加位置: /apps/
      匹配节点类型: 已选中
    3. 单击​ 确定
      您还可以手动在/apps文件夹中创建文件夹结构。
  4. 单击 全部保存 ,以在服务器上保存更改。

创建CSS以将徽标与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中的自定义图标