了解如何创建自定义主题、设计各个组件的样式以及在主题中使用Web字体
本教程是创建第一个自适应表单系列中的一个步骤。 建议按照时间顺序按照系列来了解、执行和演示完整的教程用例。
您可以使用主题为自适应表单提供独特的外观和样式。 您可以应用随自适应表单编辑器提供的现成主题,或创建您自己的自定义主题。 AEM Forms提供主题编辑器以创建自定义主题。 单个主题可以为在手机、平板电脑或桌面上打开的同一自适应表单提供不同的外观。 使用主题编辑器不需要任何CSS或LESS知识,但是是需要的。
在教程结束时,您将学习:
完成教程后,表单的外观将类似于以下内容:
在您的本地机器上下载标题样式和徽标图像,如下所示。 shipping-address-add-update-form
自适应表单的标题使用标题样式和徽标图像。 标题样式图像显示在标题的右侧。
自适应表单编辑器提供多种现成主题。 如果您计划不为自适应表单使用自定义样式,则还可以使用现成的主题发布自适应表单。 主题独立于自适应表单。 您可以将同一主题应用于多个自适应表单。 要将主题应用于自适应表单,请执行以下操作:
打开自适应表单进行编辑。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
打开自适应表单容器的属性。 在属性浏览器中,导航到基本 > 自适应表单主题。 自适应表单主题字段列表所有现成的和自定义的主题。 默认情况下,将应用画布主题。
从自适应表单主题字段中选择一个主题。 例如,调查主题。 点按以应用所选主题。
图:具 有默认主题的自适应表单
图:具 有调查主题的自适应表单
上面显示的设计需要更改现有自适应表单的占位符文本和徽标。 执行以下步骤以进行所需的更改:
更改标题的现有徽标和文本。 删除标志:
在表单编辑器中打开表单。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
点按header组件中的徽标图像,然后点按 属性。 在image属性中,点按X以删除现有标志图像。
点按upload,选择logo.png,然后点按以保存更改。 图像已下载到开始部分之前。
点按标题文本We.Retail
,然后点按 edit。 将标题文本更改为
we retail
。 仅对we retail
中的we
应用粗体格式。
删除标题并添加占位符文本:
点按客户ID字段,然后点按属性。
将标题字段的内容复制到占位符文本字段。
删除标题字段的内容,然后点按。
对表单中的所有文本框、数字框和电子邮件字段重复前三个步骤。
可以使用主题编辑器创建自定义主题。 主题编辑器是功能强大的WYSIWYG编辑器。 将CSS应用于自适应表单的各个组件是一种可视方法。 它为自适应表单的组件和面板提供了更精细的控制。
主题是独立的实体,如自适应表单。 它包含自适应表单的组件和面板的样式(CSS)。 样式包括CSS属性,如背景颜色、状态颜色、透明度、对齐方式和大小。 应用主题时,指定的样式将应用于自适应表单的相应组件。
在本教程中,您将设置页眉和页脚、文本和数字组件、附件组件和按钮的样式。 让我们开始创建主题:
登录到AEM作者实例,然后导航到Adobe Experience Manager > Forms > 主题。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。
点按创建并选择主题。 将显示创建主题页,其中包含创建主题所需的字段。 标题和名称字段是必填字段:
点按创建。将创建一个主题并显示一个用于打开表单进行编辑的对话框。 点按打开以在新选项卡中打开新创建的主题。 主题在主题编辑器中打开。 对于样式,主题编辑器使用AEM Forms附带的现成自适应表单。
有关使用主题编辑器UI的信息,请参阅关于主题编辑器。
点按主题选项 > 配置。 在预览表单字段中,选择shipping-add-update-form自适应表单,点按
,点按保存。 现在,主题编辑器已配置为使用您自己的自适应表单而不是默认的自适应表单。 点按取消以返回主题编辑器。
图:带 有shipping-add-update-form自适应表单的主题编辑器
图:具 有默认表单的自适应表单
页眉和页脚为自适应表单提供了一致且独特的外观。 通常,页眉包含组织的徽标和名称,页脚包含版权信息,并且这些信息在组织的多种形式中保持不变。 要设置shipping-add-update-form自适应表单的页眉和页脚的样式,请执行以下操作:
在“选择器”面板中导航Header > Text选项。 “选择器”面板位于主题编辑器的左侧。 如果该面板不可见,请点按切换侧面板。
在Text折叠面板中设置以下属性,然后点按。
属性 | 值 |
---|---|
字体系列 | Arial |
字体颜色 | FFFFFF |
字体大小 | 54px |
点按头构件,然后点按头。 用于设置标题构件样式的选项显示在左侧。 展开Dimension和位置折叠面板,将高度设置为120px
,然后点按。
展开头构件的Background折叠面板,将Background Color设置为F6921E.
将指针悬停在图像和渐变 > +添加上,点按图像。 设置以下属性,然后点按。
属性 | 值 |
---|---|
图像 | 上传header-style.png。 图像已下载到开始部分之前。 |
位置 | 右下 |
并排显示 | 不重复 |
在主题编辑器中,点按标题中的标志,然后点按标题标志。 展开“Dimension和位置”折叠面板,设置以下属性,然后点按。
边距 | 值 |
边距 |
提示: 点按 |
高度 | 4.75rem |
点按页脚构件,然后点按页脚。 展开Background折叠面板,将Background Color设置为F6921E
,然后点按。
您可以在自适应表单中使用多个组件来捕获数据。 例如,文本框和数字框。 您可以为所有数据捕获组件提供相同的样式,或为每个组件提供单独的样式。 在本教程中,相同的样式将应用于数字框(客户ID、邮政编码)和文本框(客户ID、名称、送货地址、状态、电子邮件)。 设置数据捕获组件的样式:
点按客户ID字段,然后点按字段构件选项。 设置以下属性,然后点按。
折叠 | 属性 | 值 |
边框 | 边框颜色 | A7A9AC |
边框 | 边框半径 |
|
文本 | 字体系列 | Arial |
文本 | 字体颜色 | 939598 |
文本 | 字体大小 | 18px |
Dimension和位置 | 宽度 | 60% |
Dimension和位置 | 边距 |
|
点按客户ID字段上方的空白区域,然后点按响应式面板容器。 将背景 > 背景颜色设置为F1F2F2。 点按。
您可以使用自定义主题将相同的样式应用于自适应表单的所有按钮,并内联样式将样式应用于特定按钮。 设置按钮样式:
点按提交按钮并点按按钮选项。 设置以下属性,然后点按。
折叠 | 属性 | 值 |
背景 | 背景颜色 | F6921E |
边框 |
边框颜色 | F6921E |
边框 | 边框半径 |
|
文本 |
字体系列 | Arial |
文本 | 字体颜色 | FFFFFF |
文本 | 字体大小 | 18px |
将自定义主题“全局主题”应用于您的自适应表单。如果样式未反映在自适应表单上,请清除浏览器缓存,然后重试。
某些样式仅适用于特定组件。 此类组件采用自适应表单编辑器设置样式。
打开自适应表单进行编辑。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
在顶栏上,选择样式选项。
点按连接按钮并点按图标。 在Dimension和Position折叠面板中设置以下属性:
属性 | 值 |
---|---|
浮点数 | 左 |
宽度 | 10% |
点按政府批准的地址验证选项,然后点按图标。 设置以下属性:
折叠 | 属性 | 值 |
尺寸及位置 | 浮点数 | 左 |
尺寸及位置 | 宽度 | 73% |
尺寸及位置 | 边距 |
|
尺寸及位置 | 高度 | 40px |
尺寸及位置 |
边距 |
|
背景 | 背景颜色 | FFFFFF |
边框 | 边框宽度 | 1px |
边框 | 边框样式 | 实线 |
边框 | 边框颜色 | A7A9AC |
边框 | 边框半径 | 7px |
文本 | 字体系列 | Arial |
文本 | 字体颜色 | BCBEC0 |
文本 | 字体大小 | 18px |
文本 | 行高 | 2 |
点按提交按钮并点按图标。 设置以下属性:
折叠 | 属性 | 值 |
Dimension和位置 | 浮点数 | 右 |
Dimension和位置 | 边距 |
|
背景 | 背景颜色 | F6921E |
边框 | 边框颜色 | F6921E |
您可以使用各种字体来设计自适应表单。 在查看自适应表单的所有设备可能没有用于设计自适应表单的字体。 您可以使用Web字体服务将所需的字体交付到目标设备。
Adobe Fonts 是web字体服务。您可以配置和使用带有自适应表单的服务。 要在自适应表单中使用Adobe Fonts:
Typekit fontsis现在称为Adobe Fonts,包含在Creative Cloud和其他订阅中。了解更多.
创建Adobe Fonts帐户,创建工具包,将字体MyriadPro添加到工具包,发布工具包,并获取工具包ID。 需要在自适应表单中使用Adobe Fonts(Web字体)。
在AEM Forms服务器中,导航至 Adobe Experience Manager > 工具
> Adobe Fonts。 现在,打开一个配置文件夹。 如果某个配置已可用,请单击创建按钮以创建新实例。
在“创建配置”对话框中,指定配置的标题,然后单击创建。 您将被重定向到配置页面。 在显示的编辑组件对话框中,提供工具包ID并单击确定。
将主题配置为使用Adobe Fonts配置。 在创作实例中,打开主题编辑器中的全局主题。 在主题编辑器中,导航到主题选项 > 配置。 在Adobe Fonts配置字段中,选择工具包,然后单击保存。
添加到Adobe Fonts的字体可在所有组件的Text折叠面板中进行选择。