创建和使用主题

简介

您可以创建并应用主题，将自适应表单或交互式通信风格化。 主题包含组件和面板的样式详细信息。 样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。 应用主题时，指定的样式会反映在相应的组件上。 主题是独立管理的，不引用自适应表单或交互通信。

您可以：

• 创建主题
• 编辑和复制现有主题
• 下载现有主题并将其上传到AEM Forms服务器
• 管理主题的依赖项

创建、下载或上传主题

通过AEM Forms，您可以创建、下载或上传主题。 主题的创建方式与表单、文档和字母等其他资产类似。 主题将另存为单独的实体，并带有表单等元属性。 主题是独立的实体，允许在多个自适应表单和交互通信中重复使用。 您还可以将一个主题移到另一个AEM Forms实例并重用它。

创建主题

请执行以下步骤以创建主题：

1. 单击​Adobe Experience Manager，单击​Forms，然后单击​主题。

2. 在主题页中，单击​创建>主题。

   将启动一个用于创建主题的向导。

3. 在“创建主题”向导的“基本”选项卡中，提供主题的​标题​和​名称。 这些是必填字段。

4. 在“高级”选项卡中，您将看到两个字段：

   • Clientlib位置:存储主题的clientlibs的存储库中的位置。
   • Clientlib类别:提供一个文本字段，用于输入主题的clientlib类别名称。

5. 单击​创建，然后单击​编辑​以在主题编辑器中打开主题，或单击​完成​以返回主题页面。

下载主题

您可以将主题导出为zip文件，并在其他项目或AEM实例中使用这些文件。 下载主题：

1. 单击​Adobe Experience Manager，单击​Forms，然后单击​主题。

2. 在主题页面中，选择一个主题，然后单击​下载。 此时将显示一个包含主题详细信息的对话框。

3. 单击​下载。 主题将下载为zip文件。

上传主题

您可以将创建的主题与项目上的样式预设结合使用。 您可以通过将其他人创建的主题包上传到您的项目来导入这些主题包。

要上传主题，请执行以下操作：

1. 单击​Adobe Experience Manager，单击​Forms，然后单击​主题。

2. 在主题页中，单击​创建>文件上传。

3. 在“文件上传”提示中，浏览并选择计算机上的主题包，然后单击​上传。

   上传的主题在主题页面中可用。

主题的元数据

主题的元属性列表（可在主题的属性页面中找到）。

ID	名称	可编辑	属性描述
1.	标题	是	显示主题的名称。
2.	描述	是	主题说明。
3.	类型	否	资产的类型。 值始终为主题。
4.	创建时间	否	主题创建日期
5.	作者姓名	是	主题的作者。 在主题创建时计算。
6.	上次修改日期	否	上次修改主题的日期。
7.	状态	否	主题的状态（已修改／已发布）。
8.	按时发布	是	自动发布主题的时间。
9.	发布结束时间	是	自动取消发布主题的时间。
10.	标记	是	附加到主题以用于标识的标签，用于改进搜索。
11.	引用	链接	包含“引用者”部分。 列表使用主题的表单。 由于主题不指任何其他资产，因此没有“引用”部分。
12.	Clientlib 位置	是	“/etc”中的用户定义存储库路径，其中存储与此主题对应的clientlibs。 默认值- '/etc/clientlibs/fd/主题+主题资产的相对路径。 如果位置不存在，则会自动生成文件夹层次结构。 更改此值后，clientlib节点结构将移至输入的新位置。 注意： 如果更改默认的clientlib位置，则在CRXDE存储库中 crx:replicate, rep:write, rep:glob:*, rep:itemNames:: js.txt, jcr:read 将 forms-users 其分配到 crx:replicate新位 jcr:read fd-service 置中，并指定到新位置。还可通过为forms-user添加deny jcr:addChildNodes来附加另一个ACL
13.	Clientlib 类别名称	是	此主题的用户定义的clientlib类别名。 如果某些其他现有主题已使用该名称，则显示错误。 默认值——使用主题位置计算。 更改此值后，类别名会在相应的clientlib节点上更新。 不需要在jsp文件中更新Clientlib类别名，因为引用使用clientlib类别名。

关于主题编辑器

AEM Forms推出主题编辑。 它是一个商业用户和Web设计人员／开发人员友好界面，它提供所需的功能，以便轻松指定各种自适应表单和交互式通信元素的样式。 创建主题时，它将作为单独的实体进行存储，如表单、交互通信、字母、文档片段和数据字典。

通过主题编辑器可自定义主题中设置样式的组件的样式。 您可以自定义表单或交互式通信在设备上的外观。

主题编辑器分为两个面板：

• 画布 -显示在右侧。它显示一个示例自适应表单或交互式通信，其中所有样式更改都会立即反映出来。 您还可以直接从画布中选择对象，以查找与其关联的样式，并编辑这些样式。 顶部的设备分辨率标尺用于控制画布。 从标尺中选择分辨率断点会显示示例表单的预览或针对相应分辨率的交互式通信。 画布在下面详细讨论。

• 提要栏-显示在左侧。它包含以下项目：

  • 选择器： 显示为样式选择的组件及其可设置样式的属性。选择器表示类型的所有组件。 如果您在主题中选择一个文本框组件来设置样式，则表单或交互式通信中的所有文本框都会继承样式。 选择器允许您选择通用组件或特定组件进行样式设置。 例如，字段组件是通用组件，文本框是特定组件。

    样式通用组件：

    字段可以是数字框字段（如年龄）或文本框字段（如地址）。

    设置字段样式时，将设置所有字段的样式，如年龄、名称、地址。

    样式特定组件:

    特定组件会影响特定类别的对象。 设置主题中数字框组件的样式时，只有样式中的数字框对象继承该样式。

    例如，文本框字段（如地址）的长度较长，而数字框字段（如年龄）的长度较短。 您可以选择一个数字框字段，缩短其长度并应用于表单。 表单中所有数字框字段的宽度都会缩小。

    自定义具有特定背景颜色的所有字段组件时，所有字段（如年龄、名称和地址）都会继承背景颜色。 当您选择数字框（如年龄）并减小其宽度时，所有数字框（如年龄）的宽度会减少，家庭中的人数也会减少。 文本框的宽度未更改。

  • 状态： 允许您在特定状态中自定义对象的样式。例如，您可以指定对象处于默认、焦点、禁用、悬停或错误状态时的外观。

  • 属性类别 符：样式属性按不同类别划分。例如Dimension和位置、文本、背景、边框和效果。 在每个类别下，您提供样式信息。 例如，在“背景”下，可以提供“背景颜色”以及“图像和渐变”。

  • 高级： 允许您向对象添加自定义CSS，这会覆盖在存在重叠时定义的属性可视控件。

  • 视图CSS:允许您视图所选组件的CSS

  此外，在提要栏中，底部还有箭头。 单击箭头时，您还可以看到两个选项：模拟成功​和​模拟错误。 这些选项以及上述选项在下面进行了详细 讨论。

  A. 提要 栏B. Canvas

样式组件

您可以在多个自适应表单和交互式通信中使用主题，这将导入您在主题中指定的组件格式。 您可以设置各种组件的样式，如标题、说明、面板、字段、图标和文本框。 使用构件在主题中配置组件属性。 虽然“CSS重写”部分允许您编写CSS代码或提供自定义选择器，但并不要求您事先掌握CSS或LESS知识，而是需要掌握。 在提要栏中选择组件时，将显示“CSS重写”部分。

边栏中的选项，允许您选择不同的组件并设置其样式。

单击提要栏中某个组件对应的编辑按钮将选择画布中的组件，并允许您使用提要栏中的选项设置组件样式。

某些组件（如文本框、数字框、单选按钮和复选框）被分类为“字段”等通用组件。 例如，您要自定义单选按钮的样式。 要选择用于样式的单选按钮，请选择​字段>构件>单选按钮。

单击提要栏中的​展开所有​以视图、选择未在前面可见的分类组件并设置样式。

样式面板布局

AEM Forms的主题支持在表单和交互式通信中为面板布局中的元素设置样式。 支持现成布局和自定义布局中的元素样式。

现成面板包括：

• 左侧选项卡

• 顶部选项卡

• 折叠

• 响应

• 向导

• 移动布局

  • 标题中的面板标题
  • 标题中没有面板标题

选择器因每个布局而异。
从主题编辑器设置自定义布局的样式涉及：

• 为可设置样式的布局定义组件，为唯一标识这些组件而定义CSS选择器
• 定义可应用于这些组件的CSS属性
• 从用户界面以交互方式定义这些组件的样式

不同屏幕大小的不同样式

桌面和移动版面的样式可能略有差异或完全不同。 对于移动设备，除组件大小外，平板电脑和手机共享类似的布局。

使用主题编辑器断点为不同屏幕大小定义替代样式。 您可以选择开始构建主题的基本设备或分辨率，并自动生成其他分辨率的样式变化。 您可以显式修改所有分辨率的样式。

在选择对象时，提要栏中样式属性上下文会发生更改

在画布中选择组件时，其样式属性会列在提要栏中。 选择对象类型及其状态，然后提供其样式。

主题编辑器中最近使用的样式

主题编辑器最多可缓存应用于组件的10种样式。 您可以将缓存的样式与主题的其他组件一起使用。 最近使用的样式在提要栏中选定组件的正下方作为列表框提供。 最初，最近使用的样式列表为空。

设置组件样式时，样式将缓存并列在列表框中。 在此示例中，文本框的标签将设置样式以更改字体大小和颜色。 您可以按照类似的步骤选择图像或更改颜色以设置组件样式。 观察更改字段标签样式时如何缓存样式并在列表框中列出样式。

在此示例中，字段标签的样式已更改，当为样式选择响应式面板描述时，资产库中会添加一个列表条目。 资源库中的条目可用于更改响应式面板描述的样式。

当样式添加到资产库中时，其他主题可以使用该样式，在表单编辑器或交互式通信编辑器UI的样式模式中也可以使用该样式。 同样，当您使用表单编辑器或交互式通信编辑器UI的样式模式来设置组件样式时，该样式也会进行缓存，并以主题形式可用。

通过资产库的加号按钮，您可以永久保存带有您提供的名称的样式。 加号按钮保存样式，即使您不单击提要栏中的“保存”按钮将样式应用于组件也是如此。 样式模式中不提供用于保存样式以供以后使用的加号按钮。

当您为样式提供自定义名称时，该样式将绑定到主题，不再对其他主题可用。 要删除保存的样式，请执行以下操作：

1. 在“画布”工具栏上，单击​主题选项 > 管理样式。

2. 在“管理样式”对话框中，选择保存的样式，单击​删除。

   

实时预览、保存和放弃更改

样式中所做的修改会立即反映在画布中加载的表单或交互式通信中。 实时预览允许您交互定义和查看样式的影响。 更改组件的样式时，提要栏中会启用​完成​按钮。 要保留更改，请使用​完成​按钮。

具有其他自适应形式或交互式通信的主题

创建主题时，会使用随主题编辑器一起提供的表单进行创建。 您可以在此表单中为组件提供样式。 您可以选择表单或您选择的交互式通信，以提供样式并预览其结果，而不是随主题编辑器一起提供的表单。

要替换主题编辑器画布中的当前表单或交互式通信，请执行以下操作：

1. 在“主题编辑器”面板中，单击“主题选项”​>“配置”。

2. 在“常规”选项卡中，浏览并选择​自适应表单/文档​字段的表单或交互式通信。

重做／撤消

您可以撤消或重做意外发生的不需要的更改。 使用画布中的重做／撤消按钮。

图：画 布中的撤消／重做按钮

在主题编辑器中设置组件样式时，将显示重做／撤消按钮。

使用主题编辑器

通过主题编辑器，您可以编辑您创建或上传的主题。 导航到​Forms和文档>主题，选择一个主题并将其打开。 主题将在主题编辑器中打开。

如上所述，主题编辑器有两个面板：提要栏和画布。

在主题编辑器中自定义文本框构件组件的成功状态样式。 组件在画布中处于选中状态，并在提要栏中处于选中状态。 提要栏中可用的样式选项用于自定义组件的外观。

使用画布

主题是使用现成表单创建的，或者使用您选择的表单或交互式通信创建的。 画布显示用于创建主题的表单或交互式通信的预览，主题中指定了自定义项。 表单上方的标尺用于根据设备的显示大小确定布局。

在画布工具栏中，您会看到：

• 切换侧 :用于显示或隐藏提要栏。

• 主题 :提供三个选项

  • 配置：提供选项以选择预览表单或交互式通信、基clientlib和typekit配置。
  • 视图主题CSS:为所选主题生成CSS。
  • 管理样式：提供用于管理文本和图像样式的选项
  • 帮助：运行主题编辑器的图像导览。

• 模 :模拟不同显示大小的主题外观。在模拟器中将显示大小视为断点。 您可以选择断点并为其指定样式。 例如，桌面和平板电脑是两个断点。 您可以为每个断点指定不同的样式。

在画布中选择组件时，组件工具栏顶部会显示该组件。 组件工具栏允许您选择组件或切换到通用组件。 例如，在面板中选择一个数字文本框。 组件工具栏中显示以下选项：

• 数字框构件:允许您选择组件以在提要栏中自定义其外观。

• 字段构件:允许您选择用于样式的通用组件。在此示例中，所有文本输入组件（文本框／数字框／数字步进器／日期输入）都被选定用于样式。

• :允许您切换到通用组件进行样式设置。如果选择数字框并点按此图标，则会选择字段组件。 如果选择字段组件并点按此图标，则面板将处于选中状态。 如果您继续点按此图标进行选择，则最终将选择样式布局。

图：画 布中数字框上的组件工具栏

使用提要栏

主题编辑器中的提要栏提供了自定义主题中组件样式和使用选择器的选项。 选择器允许您选择一组组件或单个组件，并可在提要栏中搜索选择器。 您可以为自定义组件编写选择器。

当您从提要栏中的画布或选择器中选择组件时，提要栏会显示允许您为其自定义样式的所有选项。
以下是您在选择组件时在提要栏中看到的选项：

• 状态
• 属性表
• 模拟错误／成功

状态

状态是用户与组件交互的指标。 例如，当用户在文本框中输入错误数据时，文本框的状态将变为错误状态。 通过主题编辑器，可以指定特定状态的样式。

自定义状态样式的选项因不同组件而异。

属性表

属性	用法
尺寸及位置	允许您设置主题中组件的对齐方式、大小、位置和置入样式。 您的选项包括显示设置、填充、边距、宽度、高度和Z索引。
文本	用于自定义主题组件中的文本样式。 例如，您希望更改在文本框中输入的文本的外观。 您的选项包括字体系列、权重、颜色、大小、行高、文本对齐、字母间距、文本缩进、下划线、斜体、文本变换、垂直对齐、基线和方向。
背景	允许您使用图像或颜色填充组件的背景。
边框	允许您选择组件边框的外观。 例如，您希望文本框具有带有虚线的深红色粗边框。 您的选项是边框的宽度、样式、半径和颜色。
效果	允许您向不透明度、混合模式和阴影等组件添加特殊效果。
高级	允许您添加： ::before和::after伪元素的属性，用于在选择器中默认内容之后或之前添加内容，并设置其样式。 请参 阅CSS伪元素。 嵌入到组件的自定义CSS代码并编写自定义选择器。 添加自定义CSS代码时，它将覆盖使用提要栏中的选项添加的自定义。

模拟错误／成功

“模拟错误”和“成功”选项位于提要栏底部。 您可以使用侧栏底部可见的显示／隐藏箭头查看它们。 使用主题编辑器，您可以设置组件的各种状态的样式。

例如，在表单中添加一个数字字段，并在主题编辑器中指定其样式。 当用户在字段中键入字母数字值时，您希望文本框的背景颜色发生变化。 在主题中选择数字字段，然后使用提要栏中的状态选项。 在提要栏中选择“错误”状态，并将背景颜色更改为红色。 要预览行为，您可以使用提要栏中提供的“模拟错误”选项。 “模拟错误”和“成功”选项的详细说明如下：

• 模拟成功:

  允许您在为成功状态指定组件样式时查看组件的外观。 例如，在表单中，客户设置口令。 用户可以根据您提供的准则设置密码。 当用户根据您提供的所有准则键入密码时，文本框将变为绿色。 文本框变为绿色时，处于成功状态。 您可以为处于成功状态的组件指定样式，并使用“模拟成功”选项模拟其外观。

• 模拟错误:

  允许您在为错误状态指定其样式时查看组件的外观。 例如，在表单中，客户设置口令。 用户可以根据您提供的准则设置密码。 当用户键入的口令不符合您提供的所有准则时，文本框将变为红色。 当文本框变为红色时，它处于错误状态。 您可以为处于错误状态的组件指定样式，并使用“模拟错误”选项模拟其外观。

设置组件的样式

例如，在表单中，您有两种类型的文本框：一个仅接受数字值，另一个只接受字母数字值。 您可以为仅接受数字值的文本框（一个数字框）自定义样式。

执行以下步骤以自定义特定组件（本例中的数字框）的样式：

1. 在主题编辑器中，选择画布中的数字框。

2. 选择数字框时，您可以看到包含三个选项的组件工具栏：

   • 数值框小组件

   • 字段小工具

   • 

3. 选择​数字框构件。

4. 侧栏标题将更改为数字框构件，并显示自定义其外观的选项。

   使用提要栏中的​Dimension和位置​选项自定义组件的大小。 确保状态为​Default。

不选择​数字框构件，而是在组件工具栏中选择​字段构件，然后执行上述步骤。 当您为​字段构件​选项选择尺寸时，除数字框外的所有文本框大小都相同。

给定状态的样式字段

通过组件工具栏，您还可以为不同状态指定组件的样式。 例如，如果某个组件处于禁用状态，则它处于禁用状态。 您可以在主题编辑器中设置样式的组件的常用状态有：默认、焦点、禁用、错误、成功和悬停。 您可以在画布中选择组件，然后使用提要栏中的状态选项来自定义其外观。

执行以下步骤以自定义特定状态中组件的样式：

1. 在画布中选择一个组件，然后从组件工具栏中选择相应的选项。

   提要栏显示用于自定义组件样式的选项。

2. 在提要栏中选择一个状态。 例如，错误状态。

3. 使用提要栏中的​边框、背景​等选项自定义组件的外观。

4. 使用提要栏底部的​模拟错误​选项查看样式在编辑中的显示效果。

在指定组件状态后自定义组件的样式时，仅针对指定状态显示组件的自定义。 例如，如果您在选择悬停状态时自定义组件的样式。 当您在已渲染的表单或应用主题的交互式通信中将指针移到组件上时，将显示组件的自定义。

要模拟除错误和成功之外的状态行为，请使用预览模式。 要使用预览模式，请单击页面工具栏中的​预览。

小屏幕的样式布局

使用画布中的标尺为显示较小的设备选择断点。 单击“画布”中的模拟器以视图标尺和断点。 断点允许您预览表单或交互式通信，以显示与手机和平板电脑等不同设备相关的大小。 主题编辑器支持多种显示大小。

为不同断点设置组件样式：

1. 在画布中，选择标尺上方的断点。

   断点表示移动设备及其显示大小。

2. 使用提要栏为所选显示大小自定义主题中表单或交互式通信组件的样式。

3. 确保保存自定义。

您可以为多个设备设计表单或交互式通信组件的样式。 适用于台式机和移动设备的表单和交互式通信组件可能具有完全不同的样式。

在主题中使用Web字体

您现在可以通过自适应表单或交互式通信使用Web服务中提供的字体。 开箱即用Typekit是Adobe的Web字体服务，可用作配置。 要使用Typekit，请在其中创建套件和字体，并从Typekit网站获取套件ID。

执行以下步骤在AEM中配置Typekit:

1. 在创作实例中，单击Adobe Experience Manager>工具​​部署>Cloud Services。

2. 在​Cloud Services​页面上，导航到​第三方服务 > Typekit，然后单击Typekit下的​立即配置。 如果某个配置已可用，请单击​+​按钮以创建新实例。

3. 在​创建配置​对话框中，指定配置的标题，然后单击​创建。

   您将被重定向到配置页面。

4. 在显示的编辑组件对话框中，提供您的工具包ID并单击​确定。

请执行以下步骤来配置主题以使用TypeKit配置：

1. 在创作实例中，在主题编辑器中打开一个主题。

2. 在主题编辑器中，导航到​主题选项 > 配置。

3. 在​Typekit Configuration​字段中，选择一个工具包，然后单击​保存。

   现在，您可以看到这些字体添加到主题的font-family属性中。

在主题编辑器中列出和选择字体

您可以使用主题配置服务向主题编辑器添加更多字体。 请执行以下步骤来添加字体：

1. 以管理权限登录到AEM Web Console。 AEM Web控制台的URL为https://[server]:[port]/system/console/configMgr。

2. 打开​自适应表单主题配置服务。

   

3. 单击+，指定字体的名称，然后单击​保存。 该字体在主题编辑器中添加并可用。

在主题编辑器中选择字体

您可以使用+按钮添加字体。 添加字体时，该字体会列在提要栏中。

除了主题配置选项之外，您还可以从主题编辑器本身添加字体。 在提要栏下方的字体系列字段中键入您要使用的字体，然后按键盘上的回车键。

当您选择一种字体时，它将添加在字体系列列表下。 您可以使用主题编辑器中的“蒙版”选项来禁用或启用列出的字体。

您可以看到组件字体的更改。

字体系列字段支持多种字体。 键入字体时，浏览器会查找字体并将其应用于选定的组件。 如果浏览器找不到字体，它会在系列中查找该字体旁边的字体。 您可以开始键入要查找的特定字体。 如果找不到要使用的字体，您可以在系列中键入通用字体并使用它。

在主题编辑器中应用的蒙版样式

您可以遮住在主题中应用的样式。 在主题编辑器提要栏中，可以使用图标禁用已应用的样式。 例如，如果您以表单或交互式通信的形式更改维度组件，则可以使用属性左侧的遮罩按钮禁用它。 保存主题时，将保留选定的蒙版选项。

以下示例显示了主题中的遮罩和未遮罩样式。

将主题应用于表单或交互式通信

要将主题应用于自适应表单，请执行以下操作：

1. 在编辑模式下打开表单。 要在编辑模式下打开表单，请选择一个表单，然后单击​打开。

2. 在编辑模式下，选择一个组件，单击 > 自适应表单容器，然后单击。

   您可以在提要栏中编辑表单的属性。

3. 在提要栏中，单击​样式。

4. 从​自适应表单主题​下拉菜单中选择您的主题，然后单击​完成 。

要将主题应用于交互式通信，请执行以下操作：

1. 在编辑模式下打开您的交互式通信。 要在编辑模式下打开交互通信，请选择一个表单，然后单击​打开。

2. 在编辑模式下，选择一个组件，单击 >文档容器，然后单击。

   您可以在提要栏中编辑表单的属性。

3. 在提要栏中，在​Basic​下，从​Theme​下拉列表中选择您的主题，然后单击​Done 。

在运行时更改表单的主题

一个主题样式表单的不同组件。 您可以使用themeOverride属性动态更改表单的主题。 表单的典型URL是：

https://<server>:<port>/content/forms/af/test.html

可以使用themeOverride参数在运行时应用主题。

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

使用themeOverride选项可提供主题的路径。 它更改表单的主题，并使用更新的样式刷新表单。

使用主题获取特定外观

有了AEM Forms，再加上默认的现成画布主题，还有许多其他主题。 如果要使用其他主题设计表单或交互式通信以及进行其他更改，请从“主题库”文件夹复制主题。 将复制的主题粘贴到“主题库”文件夹外，然后根据需要的更改编辑复制的主题。

要复制主题，请执行以下步骤：

1. 在创作实例中，导航到​Adobe Experience Manager>Forms>主题。
2. 打开“主题库”文件夹。
3. 在“主题库”文件夹中，将指针悬停在相应的现成主题上，然后点按​复制。
4. 将复制的主题粘贴到“主题库”文件夹外。
5. 自定义复制的主题。

自定义主题后，将其应用于表单或交互式通信。

对其他自适应表单使用案例的影响

• 发布／取消发布表 单：发布表单时，也会发布应用到的主题（如果尚未发布）
• 导入／导出表单：导 入或导出表单时，其关联的主题也会自动导入或导出。
• 表单的引用：表 单引用中的引用部分包含主题的额外条目。
• 表单的上次修改时间：在 更改相关主题时更新。
• A/B测试： 在A/B测试中，您可以将不同的主题应用于表单的两个版本。两个主题的信息单独地存储在两个引导容器上。

CSS生成序列

当您选择视图CSS时，主题编辑器会收集所有样式信息并构建CSS。 它按以下顺序收集信息：

1. 在主题的基本客户端库中定义的样式。
2. 用户定义的样式，使用提要栏中的属性指定。
3. 使用“CSS覆盖”选项提供的CSS样式。

例如，文本框在基本客户端库中的背景颜色为蓝色。 使用提要栏中的属性将其更改为粉红色。 生成CSS时，文本框的背景颜色将显示为粉红色。 使用属性更改背景颜色后，另一位作者使用CSS覆盖选项将背景颜色文本框更改为白色。 在生成CSS时，您会在生成的CSS中将背景颜色看作白色。

调试样式

在主题编辑器中指定组件样式时，将生成CSS。 设置通用组件样式时，其中包含的多个组件也会设置样式。 例如，设置字段样式时，其中的文本框和标签也会设置样式。 设置字段中文本框的样式时，它会获得自己的CSS。 如果要调试为字段和组件生成的CSS，主题编辑器提供了用于视图CSS的选项。

您可以使用以下选项查看生成的CSS:

• 视图 提要栏中的CSS选项：在“主题”中选择组件时，可以在提要栏中看到视图CSS选项。它显示生成的CSS，包括::before和::after伪元素的CSS。

• 视图主 题画布工具栏中的CSS选项：在画布工具栏中，单 ”> “视图主题CSS”。您可以看到在主题编辑器中定义的属性生成的整个主题CSS。

疑难解答、建议和最佳实践

• 避免使用其他主题的资源

  编辑主题时，您可以浏览并添加来自其他主题的资产（如图像）。 例如，您正在编辑页面的背景。 例如，当您选择​Page > “背景”>“添加”>“图像”​时，您会看到一个对话框，通过该对话框可以浏览和添加其他主题中的图像。

• 如果从其他主题添加资产，并且移动或删除了其他主题，则您会面临当前主题的问题。 建议您避免浏览和添加来自其他主题的资产。

• 使用基clientlib、主题编辑器和内联样式

  • 基clientlib:

    基本客户端库包含样式信息。 在主题的客户端库中使用样式信息。

    1. 导航到​Experience Manager>Forms>主题。
    2. 在主题页面中，选择一个主题并单击​视图属性。
    3. 在打开的“属性”页面中，单击​高级。
    4. 在“高级”选项卡的“Clientlib位置”字段中，浏览并选择要使用的客户端库。
    5. 单击​保存。

    您在客户端库中指定的样式将导入使用它的主题中。 例如，指定文本框、数字框的样式并在客户端库中切换。 在主题中导入客户端库时，将导入文本框、数字框和切换的样式。 然后，您可以使用主题编辑器设置其他组件的样式。
    您还可以创建主题、创建主题副本，然后修改复制主题中为类似用例提供的样式。

    请参阅使用主题获取特定外观

  • 主题编辑器:

    通过主题编辑器，您可以创建主题来设置表单或交互式通信的样式。 您可以在主题中指定组件的样式，从而在您开发的多个表单或交互式通信之间实现外观的一致性。 建议在主题中指定样式信息，然后将主题应用于表单。

  • 内联样式：

    处理表单时，您可以在表单或交互式通信多渠道编辑器中使用样式模式设置组件样式。 使用样式模式更改表单组件样式将覆盖在主题中指定的样式。 如果要更改特定表单的某些组件的样式，请参阅组件的内联样式。

• 使用客户端库

  如果要创建客户端库以导入样式信息，请参阅使用客户端库。 创建客户端库后，可以使用上述步骤将其导入主题中。

• 更改容器面板布局宽度

  不建议更改容器面板布局宽度。 指定容器面板的宽度时，该面板会变为静态并且不适应不同的显示。

• 何时使用表单编辑器或主题编辑器处理页眉和页脚

  如果要使用字体样式、背景和透明度等样式选项设置页眉和页脚的样式，请使用主题编辑器。

  如果要提供诸如徽标图像、页眉中的公司名称以及页脚中的版权信息等信息，请使用表单编辑器选项。