文本叠加图的自定义品牌和样式 creating-custom-branding-styling

创建一个AEM Screens项目。 此示例通过创建名为的项目来展示功能 customstyle 和一个标题为 DemoBrand ，如下图所示。

在编辑器中，拖放图像并将文本覆盖添加到资源。

从AEM实例导航到CRXDE Lite>工具> CRXDE Lite.

在中创建自定义设计 /apps/settings/wcm/designs/<your-project>/例如，在本例中，导航到 /apps/settings/wcm/designs/customstyle/

创建 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);
 }

将路径复制到项目，在本例中，路径为 /apps/settings/wcm/designs/customstyle.

导航到标题为 DemoBrand (在步骤(1)中创建)并单击 属性 从操作栏中选择渠道。

导航至 高级 制表符并检查 设计 字段。

更新 设计 包含项目文件夹路径的字段。 在这种情况下，它是 /apps/settings/wcm/designs/customstyle.

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

要叠加现有Screens模板以默认注入您自己的设计，请执行以下操作：

1. 叠加 /libs/screens/core/templates/sequencechannel 在 /apps/screens/core/templates/sequencechannel.
2. 修改 cq:designPath 中的属性 /apps/screens/core/templates/sequencechannel/jcr:content 因此它指向了新设计。

要创建您自己的模板，请执行以下操作：

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

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

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

AEM Screens导航到标题为 customstyle > 渠道 > DemoBrand. 单击渠道，然后单击 编辑 从操作栏中。

由于您现在已将该设计添加到 设计 字段，如上所述，单击 预览 用于查看带文本覆盖的图像上的当前样式。

导航到 static.css 文件，并添加CRXDE Lite，例如 font-family: "Lucida Console", Courier, monospace; 添加到此文件，如下所示。

在保存更改并重新加载预览时，您会看到文本覆盖字体的更新，如下图所示。

此外，您还可以从删除最后两个代码块 static.css 文件以移除文本覆盖周围的盒装样式。

在预览中查看更新后的更改，其中文本覆盖将添加到图像。

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