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

可查看本页以了解如何在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. 导航到​高级​选项卡并检查​设计​字段。
    图像

    注意

    默认情况下,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. 您将在将文本叠加添加到图像的预览中视图更新的更改。

    图像

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

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now