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

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

从编辑器中，拖放图像并向资源添加文本叠加。

从AEM实例导航到CRXDE Lite> tools > 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. 在/apps/screens/core/templates/sequencechannel中叠加/libs/screens/core/templates/sequencechannel。
2. 修改/apps/screens/core/templates/sequencechannel/jcr:content中的​ cq:designPath ​属性，使其指向新设计。

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

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

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

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

导航到标题为​ customstyle > 渠道 > 演示品牌 ​的AEM Screens项目。 单击频道，然后单击操作栏中的​ 编辑。

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

导航到CRXDE Lite为​ static.css ​的文件，并将字体（如font-family: "Lucida Console", Courier, monospace;）添加到该文件中，如下所示。

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

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

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

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