- Knowledge of the LESS (Leaner CSS) framework
- How to create a client library in Adobe Experience Manager
- Creating an adaptive form template for using the theme you create
An adaptive form theme is an AEM client library that you use to define the styles (look and feel) for an adaptive form.
You create an adaptive template and apply the theme to the template. You then use this custom template to create an adaptive form.

Примітка.
The following procedure is described using sample names for AEM objects such as node, properties, and folders.
If you follow these steps using the names, the resultant template should appear similar to the following snapshot:

Завантажити
-
Add two folders, less and css, and a file css.txt to the node created in step 1:
- less folder: Contains the less variable files in which you define the less variables and less mixins that are used to manage the .css styles.
This folder consists of less variable files, less mixin files, less files defining styles using mixins and variables. And all these less files are then imported in styles.less.
- css folder: Contains the .css files in which you define the static styles to be used in the theme.
Less variables files: These are the files, where you define or override the variables that are used in defining CSS styles.
Adaptive forms provide OOTB variables defined in the following .less files:
- /etc/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
- /etc/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
Adaptive forms also provide third-party variables defined in:
/etc/clientlibs/fd/af/third-party/less/variables.less
You can use the less variables provided with adaptive forms, you can override these variables, or you can create new less variables.
Примітка.
While importing the files of the less pre-processor, in the import statement specify the relative path of the files.
@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;
To override the less variables:
- Import default adaptive form variables:
/etc/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/etc/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
- Then import the less file that includes overridden variables.
@button-focus-bg-color: rgb(40, 208, 90); @button-hover-bg-color: rgb(30, 156, 67);
Less mixin files: You can define the functions that accept variables as arguments. The output of these functions are the resultant styles. Use these mixins within different styles, to avoid repeating CSS styles.
Adaptive forms provide OOTB mixins defined in:
- /etc/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less
Adaptive forms also provide third-party mixins defined in:
- /etc/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; }
Styles.less File: Use this file to include all the less files (variables, mixins, styles) that you need to use in the client library.
In the following sample styles.less file, the import statement can be placed in any order.
The statements to import the following .less files are mandatory:
- 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(../images/forest.png); background-repeat: no-repeat; background-size: 100%; }
#base=/etc/clientlibs/fd/af/third-party/css bootstrap.css #base=less styles.less #base=/etc/clientlibs/fd/xfaforms/xfalib/css datepicker.css listboxwidget.css scribble.css dialog.css
Примітка.
The styles.less file is not mandatory. This means that you do not need to create this file, if you have not defined any custom styles, variables, or mixins.
However, if you do not create a style.less file, in the css.txt file, you need to uncomment the following line:
#base=less
And comment the following line:
styles.less
- less folder: Contains the less variable files in which you define the less variables and less mixins that are used to manage the .css styles.
After you have created an adaptive form theme, perform the following steps to use this theme in an adaptive form:
-
To include the theme created in to create an adaptive form theme section, create a custom page of type cq:Component.
For example, /apps/myAfCustomizations/myAfPages/forestPage
-
To use a theme in the page, you need to add an overriding file library.jsp to the node.
You then import the theme created in To create an adaptive form theme section of this article.
The following sample code snippet imports the af.theme.forest theme.
<%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>
-