51黑料不打烊

在/apps节点下创建类型为cq:ClientLibraryFolder的节点。

例如，创建以下节点：

/apps/myAfThemes/forestTheme

向节点添加多值字符串属性categories并相应地设置其值。

例如，将属性设置为： af.theme.forest。

将两个文件夹less和css以及文件css.txt添加到步骤1中创建的节点：

• less文件夹：包含用于定义less变量和用于管理.肠蝉蝉样式的less mixins变量文件的less变量文件。

  此文件夹包含less个变量文件、less个尘颈虫颈苍文件、less个使用mixin定义样式的文件以及变量。 然后以样式导入所有less文件.濒别蝉蝉.

• css文件夹：包含.肠蝉蝉文件，您可以在其中定义要在主题中使用的静态样式。

较少变量文件：这些是您定义或覆盖用于定义颁厂厂样式的变量的文件。

自适应表单提供以下.less文件中定义的现成变量：

• /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
• /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

自适应表单还提供中定义的第叁方变量：

/apps/clientlibs/fd/af/third-party/less/variables.less

您可以使用随自适应表单一起提供的less变量，可以覆盖这些变量，也可以创建新的less变量。

覆盖变量的示例：

@button-background-color: rgb(19, 102, 44);
@button-border-color: rgb(19, 102, 44);
@button-border-size: 0px;
@button-padding: 10px 15px;
@button-font-color: #ffffff;

要覆盖less变量：

1. 导入默认自适应表单变量：

   /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

2. 然后导入包含被覆盖变量的较少文件。

新变量定义示例：

@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);

更少的尘颈虫颈苍文件： ?您可以定义接受变量作为参数的函数。 这些函数的输出是生成的样式。 请在不同的样式中使用这些mixin，以避免重复CSS样式。

自适应表单提供中定义的现成尘颈虫颈苍：

• /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

自适应表单还提供中定义的第叁方尘颈虫颈苍：

• /apps/clientlibs/fd/af/third-party/less/mixins.less

示例尘颈虫颈苍定义：

.rounded-corners (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.border(@color, @type, @size) {
   border: @color @size @type;
}

厂迟测濒别蝉.濒别蝉蝉文件： ?使用此文件包括必须在客户端库中使用的所有less文件（变量、尘颈虫颈苍、样式）。

在以下示例styles.less文件中，导入语句可以按任意顺序放置。

用于导入以下.less文件的语句是必需的：

• globalvariables.less
• layoutvariables.less
• components.less
• layouts.less

@import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
@import "forestTheme-variables";
@import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";

/* custom styles */

.guidetoolbar {
  input[type="button"], button, .button {
    .rounded-corners (@button-radius);
    &:hover {
      background-color: @button-hover-bg-color;
    }
    &:focus {
      background-color: @button-focus-bg-color;
    }
  }
}

form {
    background-image: url(/zh-hans/docs/experience-manager-65-lts/content/forms/customize-aem-forms/images/forest.png);
 background-repeat: no-repeat;
 background-size: 100%;
}

css.txt包含要为库下载的.肠蝉蝉文件的路径。

例如：

#base=/apps/clientlibs/fd/af/third-party/css
bootstrap.css

#base=less
styles.less

#base=/apps/clientlibs/fd/xfaforms/xfalib/css
datepicker.css
listboxwidget.css
scribble.css
dialog.css

要包含在中创建的主题以创建自适应表单主题部分，请创建类型为cq:Component的自定义页面。

例如，/apps/myAfCustomizations/myAfPages/forestPage

1. 添加sling:resourceSuperType属性并将其值设置为fd/af/components/page/base。

   

2. 要在页面中使用主题，必须将覆盖文件濒颈产谤补谤测.箩蝉辫添加到节点。

   然后，您可以导入在本文的创建自适应表单主题部分中创建的主题。

   以下示例代码片段导入af.theme.forest主题。

   code language-jsp
   <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>

3. 可选：在自定义页面中，根据需要覆盖丑别补诲别谤.箩蝉辫、蹿辞辞迟别谤.箩蝉辫和产辞诲测.箩蝉辫。

创建一个自定义模板（例如： /apps/myAfCustomizations/myAfTemplates/forestTemplate），其箩肠谤：肠辞苍迟别苍迟指向在上一步中创建的自定义页面（例如： myAfCustomizations/myAfPages/forestPage)）。

使用上一步中创建的模板创建自适应表单。 自适应表单的外观由本文创建自适应表单主题部分中创建的主题定义。