文本叠加图的自定义品牌和样式

请阅读本页内容,了解如何对在AEM Screens渠道中应用于您的资产的文本叠加应用自定义品牌和样式。

为文本叠加创建自定义品牌和样式

请按照以下步骤为文本叠加创建自定义品牌和样式:

  1. 创建AEM Screens项目。 此示例通过创建名为​customstyle​的项目和名为​DemoBrand​的渠道来显示功能,如下图所示。

    图像

  2. 从编辑器中拖放图像,并向资产中添加文本叠加。

    图像

    注意

    要了解如何在渠道编辑器中向资产添加文本叠加,请参阅文本叠加

  3. 导航到AEM实例中的CRXDE Lite—>工具 — > CRXDE Lite

  4. 例如,您必须在/apps/settings/wcm/designs/<your-project>/中创建自定义设计,在这种情况下,请导航到/apps/settings/wcm/designs/customstyle/

    图像

  5. 创建​static.css​文件并设置以下css规则。 此外,还以css规则下图中的示例所示。

     //global styles
     cq-Screens-textOverlay {
     padding: 1em;
     font-size: 3rem;
     line-height: 1em;
      }
     //authoring overrides
    .aem-AuthorLayer-Edit .cq-Screens-textOverlay {
     display: none;
     padding: 0;
     font-size: 1rem;
     }
      // light text variant
     .cq-Screens-textOverlay-color--light {
      background-color: rgba(0, 0, 0, .6);
      }
      // dark text variant
      .cq-Screens-textOverlay-color--dark {
       background-color: rgba(255, 255, 255, .6);
     }
    

    图像

  6. 复制项目的路径,在这种情况下,路径将为/apps/settings/wcm/designs/customstyle

  7. 导航到标题为​DemoBrand​的渠道(在步骤(1)中创建),然后在选择渠道后,从操作栏中单击​属性

  8. 导航到​Advanced​选项卡,并检查​Design​字段。
    图像

    注意

    默认情况下,Design​字段显示指向libs文件夹中设计的路径。

  9. 使用项目文件夹的路径更新​Design​字段。 在这种情况下,将为/apps/settings/wcm/designs/customstyle

    图像

  10. 单击​保存并关闭​以更新设计路径。

    重要

    您可以选择覆盖现有的Screens模板,以默认插入您自己的设计或完全创建您自己的模板。 有关更多详细信息,请参阅以下步骤。

  11. 默认情况下,要叠加现有的Screens模板以插入您自己的设计,请执行以下操作:

    1. /apps/screens/core/templates/sequencechannel中叠加/libs/screens/core/templates/sequencechannel
    2. 修改/apps/screens/core/templates/sequencechannel/jcr:content中的​cq:designPath​属性,以指向新设计。
  12. 要完全创建您自己的模板,请执行以下操作:

    1. /libs/screens/core/templates/sequencechannel复制到/apps/customstyle/templates/styled-sequencechannel
    2. 修改/apps/customstyle/templates/styled-sequencechannel/jcr:content中的​cq:designPath​属性,以指向新设计。

更新ACL

您必须更新这些设计的ACL,以便播放器能够下载它们。

  1. 导航到用户管理员并选择screens-<project>-devices group ,并为其授予自定义设计路径的读取权限。

  2. 提供screens-<project>-administrators组对此路径的读取和修改权限。

查看结果

完成上述步骤后,您可以从​CRXDE Lite​更新​statis.css​文件,从而查看已添加到资产的文本叠加的更新。

请按照以下步骤查看更新后的设计以进行文本叠加:

  1. 导航到标题为​customstyle —> 渠道 —> DemoBrand​的AEM Screens项目。 选择渠道,然后单击操作栏中的​编辑​以打开编辑器。

  2. 由于您现在已将设计添加到​设计​字段中(如上所述),因此单击​预览​可查看带有文本叠加的图像的当前样式。

    图像

  3. 导航到CRXDE Lite中的​static.css​文件,然后将font-family: "Lucida Console", Courier, monospace;之类的字体添加到此文件,如下所示。
    图像

  4. 保存更改并重新加载预览后,您将看到文本叠加字体的更新,如下图所示。

    图像

  5. 此外,您还可以从​static.css文件中删除最后两个代码块,以删除文本叠加周围的盒装样式。
    图像

  6. 您将在预览中查看更新后的更改,在该更改中,文本叠加将添加到图像中。

    图像

    现在,您可以为添加到资产中的文本叠加更新品牌和自定义样式。

在此页面上