创建和使用主题

简介

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

您可以:

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

创建、下载或上传主题

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

创建主题

请执行以下步骤来创建主题:

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

  2. 在“主题”页中,单击​创建>主题
    将启动用于创建主题的向导。

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

  4. 在“高级”选项卡中,您将获得两个字段:

    • Clientlib位置:存储主题的clientlibs的存储库中的位置。

    • Clientlib类别:提供一个文本字段,用于输入主题的clientlib类别名称。

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

下载主题

您可以将主题导出为zip文件,并在其他项目或AEM实例中使用这些文件。 要下载主题,请执行以下操作:

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

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

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

注意

如果您下载的主题具有与其关联的自适应表单,且关联的自适应表单基于自定义模板,则还应下载自定义模板。 当您将下载的主题和自适应表单上传到AEM Forms服务器时,也会上传相关的自定义模板。

上传主题

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

要上传主题,请执行以下操作:

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

  2. 在“主题”页中,单击​创建>文件上载

  3. 在“文件上载”提示中,浏览并选择计算机上的主题包,然后单击​上载
    已上载主题可在“主题”页面中使用。

主题的元数据

列表主题的元属性(可在主题的属性页中找到)。

ID

名称 可编辑 属性描述
1. 标题 显示主题的名称。
2. 描述 有关主题的说明。
3. 类型
  • 资产的类型。
  • 值始终为Theme。
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:replicatejcr:read fd-service 到新位置。还可以通过为forms-user添加deny jcr:addChildNodes来连接另一个ACL
13. Clientlib 类别名称
  • 此主题的用户定义的clientlib类别名称。
  • 如果某个名称已被其他一些现有主题使用,则会显示错误。
  • 默认值 — 使用主题位置计算。
  • 更改此值后,类别名称将在相应的clientlib节点上更新。 不需要在jsp文件中更新Clientlib类别名,因为引用使用了clientlib类别名。

关于主题编辑器

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

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

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

  • 画布 — 显示在右侧。它显示了一个示例自适应表单或交互式通信,所有样式更改都可即时反映。 您还可以直接从画布中选择对象,以查找与其关联的样式,并编辑这些样式。 顶部的设备分辨率标尺用于控制画布。 从标尺中选择分辨率断点可显示示例表单的预览或针对相应分辨率的交互式通信。 在](…/…/forms/using/themes.md#using-canvas)下面将详细讨论画布。[

  • 侧栏 — 显示在左侧。它有以下项目:

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

      样式通用组
      件:字段可以是数字框字段(如年龄)或文本框字段(如地址)。设置字段样式时,所有字段(如年龄、名称、地址)都会设置样式。

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

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

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

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

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

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

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

    此外,在侧栏中,底部还有箭头。 单击箭头时,您还可以获得两个选项:模拟成功​和​模拟错误。 下文将详细讨论这些选项以及上述 选项

高亮显示边栏和画布的主题编辑器。 A.提栏B. Canvas

样式组件

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

提要栏中的可设置样式的组件

可让您选择不同组件并设置不同组件样式的提要栏中的选项。

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

某些组件(如文本框、数字框、单选按钮和复选框)被分类到“字段”等通用组件下。 例如,您希望自定义单选按钮的样式。 要选择用于样式的单选按钮,请选择​“字段”>“构件”>“单选按钮”

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

样式面板布局

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

现成面板包括:

  • 左侧选项卡

  • 顶部选项卡

  • 折叠

  • 响应

  • 向导

  • 移动布局

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

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

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

不同屏幕大小的不同样式

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

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

注意

该主题首先使用表单或交互式通信创建,然后应用于不同的表单或交互式通信。 主题创建中使用的断点可以不同于应用主题的表单或交互式通信。 CSS媒体查询基于在主题创建中使用的表单或交互式通信,而不是基于应用主题的表单或交互式通信。

选择对象时,侧栏中的样式属性上下文会发生变化

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

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

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

资源库

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

为可用于其他组件的组件缓存的字体样式

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

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

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

为资源库提供自定义样式名称

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

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

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

    删除保存的样式

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

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

注意

在字段中输入无效字符时,字段边界颜色将变为红色,屏幕左上角将显示错误消息。 例如,如果在接受数字字符作为输入的文本框中输入字母,则输入框边界颜色将更改为红色。 如果不解决顶部显示的错误,则无法保存此主题。

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

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

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

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

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

重做/撤消

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

重做和撤消操作

画布中的撤消/重做按钮

当您在主题编辑器中设置组件样式时,会显示重做/撤消按钮。

使用主题编辑器

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

如上所述,主题编辑器有两个面板:侧栏和画布。
主题编辑器

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

使用画布

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

在画布工具栏中,您会看到:

  • 切换侧 面板切换侧面板:可显示或隐藏提要栏。

  • 主题 选项主题选项:提供三个选项

    • 配置:提供选项,用于选择预览表单或交互式通信、基clientlib和Adobe Fonts配置。
    • 视图主题CSS:为所选主题生成CSS。
    • 管理样式:提供用于管理文本和图像样式的选项
    • 帮助:运行主题编辑器的图像导览。
  • 拟器标尺:模拟不同显示大小的主题外观。在模拟器中将显示大小视为断点。 您可以选择断点并为其指定样式。 例如,桌面和平板电脑是两个断点。 您可以为每个断点指定不同的样式。

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

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

  • 字段小部件:允许您选择用于样式的通用组件。在此示例中,所有文本输入组件(文本框/数字框/数字步进器/日期输入)都将被选定用于样式。

  • field-level:允许您切换到通用组件进行样式设置。如果您选择数字框并点按此图标,则会选择字段组件。 如果您选择字段组件并点按此图标,则会选择面板。 如果您继续点按此图标进行选择,则最后将选择布局进行样式设置。

注意

组件工具栏中的可用选项因您选择的组件而异。

组件工具栏

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

使用提要栏

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

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

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

状态

状态是用户与组件交互的指示符。 例如,当用户在文本框中输入错误数据时,文本框的状态将更改为错误状态。 主题编辑器允许您指定特定状态的样式。

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

属性表

属性 用法

尺寸及位置

允许您设置主题中组件的对齐方式、大小、位置和置入样式。

您的选项包括显示设置、填充、边距、宽度、高度和Z索引。

您还可以使用布局模式通过简单的拖放界面定义组件的宽度。 有关详细信息,请参阅使用布局模式调整组件大小

文本

用于自定义主题组件中的文本样式。

例如,您希望更改在文本框中输入的文本的外观。

您的选项包括字体系列、权重、颜色、大小、行高、文本对齐、字母间距、文本缩进、下划线、斜体、文本变换、垂直对齐、基线和方向。

背景

允许您使用图像或颜色填充组件的背景。

边框

允许您选择组件边框的外观。 例如,您希望文本框具有带虚线的深红色粗边框。

您的选项是边框的宽度、样式、半径和颜色。

效果

允许您向不透明度、混合模式和阴影等组件添加特殊效果。

高级

允许您添加:

  • ::before::after伪元素的属性,用于在选择器中默认内容之后或之前添加内容,并设置其样式。
    请参 阅CSS伪元素
  • 嵌入到组件的自定义CSS代码并编写自定义选择器。

添加自定义CSS代码时,它将覆盖您使用侧栏中的选项添加的自定义内容。

模拟错误/成功

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

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

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

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

设置组件的样式

例如,在表单中,您有两种类型的文本框:一个仅接受数字值,另一个接受字母数字值。 您可以为仅接受数值(一个数字框)的文本框自定义样式。

请执行以下步骤来自定义特定组件(本例中的数字框)的样式:

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

  2. 选择数字框时,您会看到组件工具栏包含三个选项:

    • 数值框小组件
    • 字段 Widgetfield级别
  3. 选择​数字框Widget

  4. 侧栏标题将更改为数字框Widget,并显示自定义其外观的选项。
    使用侧栏中的​Dimension和位置​选项自定义组件的大小。 确保状态为​Default

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

给定状态的样式字段

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

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

  1. 在画布中选择一个组件,然后从组件工具栏中选择相应的选项。
    侧栏显示用于自定义组件样式的选项。
  2. 在提要栏中选择状态。 例如,错误状态。
  3. 使用提要栏中的​边框、背景​等选项自定义组件的外观。
  4. 使用侧栏底部的​模拟错误​选项查看样式在编辑中的显示效果。

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

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

小屏幕的样式布局

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

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

  1. 在画布中,选择标尺上方的断点。
    断点表示移动设备及其显示大小。
  2. 使用提要栏,根据选定的显示大小自定义主题中表单或交互式通信组件的样式。
  3. 确保保存自定义。

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

在主题中使用Web字体

您现在可以在自适应表单或交互式通信中使用Web服务中提供的字体。 现成的Adobe Fonts是Adobe的Web字体服务,可用作配置。 要使用Adobe Fonts,请创建工具包,在它中添加字体,并从Adobe Fonts获取工具包ID。

请执行以下步骤在AEM中配置Adobe Fonts:

  1. 在创作实例中,单击adobeexperiencemanagerAdobe Experience Manager >工具hammer >部署>Cloud Services。

  2. 在​Cloud Services​页面上,导航到并打开​Adobe Fonts​选项。 打开配置文件夹,然后单击​创建

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

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

  4. 在出现的“编辑组件”对话框中,提供您的工具包ID,然后单击​确定

请执行以下步骤配置主题以使用Adobe Fonts配置:

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

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

  3. 在​Adobe Fonts配置​字段中,选择一个工具包,然后单击​保存

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

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

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

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

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

    theme-config

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

在主题编辑器中选择字体

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

主题编辑器中列出的新字体

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

在主题编辑器中键入和选择字体

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

多字体

您可以看到组件字体的变化。

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

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

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

主题编辑器提要栏中可用的蒙版选项

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

蒙版和未蒙版的样式

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

将主题应用于自适应表单:

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

  2. 在编辑模式下,选择一个组件,然后单击字段级别 > 自适应表单容器,然后单击cmpr

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

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

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

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

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

  2. 在编辑模式下,选择一个组件,然后单击字段级别 >文档容器,然后单击cmpr

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

  3. 在提要栏中,在​基本​下,从​主题​下拉菜单中选择您的主题,然后单击​完成 复选框

在运行时更改表单的主题

主题样式表单的不同组件。 可以使用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. 自定义复制的主题。

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

注意

请勿修改“主题库”文件夹中的可用主题。 此文件夹中包含系统主题。 安装AEM Forms的较新版本或热修复时,您对这些主题所做的任何更改都会被覆盖。

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

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

CSS生成序列

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

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

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

调试样式

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

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

  • 视图 CSSoption在提要栏中:当您在主题中选择组件时,您可以在提要栏中看到视图 CSS选项。它显示生成的CSS,包括::before::after伪元素的CSS。
  • 视图主 题画布工具栏中的CSS选项:在“画布”工具栏中,单 击“主题选项” > “视图主题CSS”。您可以查看在主题编辑器中定义的属性生成的整个主题CSS。

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

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

    编辑主题时,您可以浏览并添加来自其他主题的资产(如图像)。 例如,您正在编辑页面的背景。 例如,当您选择​Page edit-button> > > Add > Image​时,您会看到一个对话框,通过该对话框可以浏览和添加其他主题中的图像。

  • 如果从其他主题添加资产,而其他主题被移动或删除,则您可能会遇到当前主题的问题。 建议您避免浏览和添加来自其他主题的资源。

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

    • 基clientlib:

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

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

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

    • 主题编辑器:

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

    • 内联样式:

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

  • 使用客户端库

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

  • 更改容器面板布局宽度

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

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

    如果要使用字体样式、背景和透明度等样式选项设置页眉和页脚的样式,请使用主题编辑器。
    如果要提供诸如徽标图像、页眉中的公司名称以及页脚中的版权信息等信息,请使用表单编辑器选项。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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