Creating custom adaptive form themes

Create a node of type cq:ClientLibraryFolder under the /appsnode.

For example, create the following node:

/apps/myAfThemes/forestTheme

Add a multi-valued string property categories to the node and set its value appropriately.

For example, set the property to: af.theme.forest.

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.

• cssfolder: Contains the .css files in which you define the static styles to be used in the theme.

Less variable files: These are the files where you define or override the variables that are used in defining CSS styles.

Adaptive forms provide out-of-the-box variables defined in the following .less files:

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

Adaptive forms also provide third-party variables defined in:

/apps/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.

NOTE

While importing the files of the less pre-processor, in the import statement specify the relative path of the files.

Sample overriding variables:

@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 lessvariables:

1. Import default adaptive form variables:

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

2. Then import the less file that includes overridden variables.

Sample new variable definitions:

@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 is the resultant styles. Use these mixins within different styles so you can avoid repeating CSS styles.

Adaptive forms provide out-of-the-box mixins defined in:

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

Adaptive forms also provide third-party mixins defined in:

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

Sample mixin definition:

.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 must 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%;
}

The css.txt contains the paths of .css files to be downloaded for the library.

For example:

#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

NOTE

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 must uncomment the following line:

#base=less

And comment the following line:

styles.less