Styling constructs for adaptive forms

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Prerequisites

Knowledge of CSS and the LESS framework.

What can be customized

The article lists publicly available css classes of adaptive forms. You can leverage these classes to style various components of an adaptive form. The styling of authoring components, such as dialogs and status bars that display warnings are beyond the scope of this article. Use these styling constructs to create styles (using CSS or Less) only when you are unable to style components using theme editor.

Customizing styles in adaptive forms

The LESS framework simplifies the use case to customize styles in adaptive forms. The framework lets you define styles using a set of variables and functions (mixins). The LESS framework helps reduce the size of the bundled code and increases its reusability.

You can customize adaptive form styles in the following ways:

  • Change the theme
  • Change component’s style

Changing theme

You can change the theme of an adaptive form to ensure that its appearance is consistent with the web pages where the adaptive form is embedded.

Changes in the overall appearance of the adaptive form using CSS properties are typically part of theme changes. Major changes to the lo ``ok and feel of the adaptive form, such as changes in the layout and placement of components are not considered theme changes.

Based on the bootstrap, the following set of CSS properties define the theme of a web page:

  • Background color
  • Border (type, color, thickness)
  • Font Color
  • Padding
  • Margin
  • Font Size
  • LineHeight

Currently, LESS variables are defined only for these properties of the various elements in an adaptive form.

Changing component style

You can make changes to the appearance, layout, positioning, and visibility of elements. To achieve this task, create or update your custom .css files to include the styling constructs listed in this article.

To apply a style to an adaptive form, open the adaptive form in for editing, open properties of adaptive form conatiner, specify the path of custom CSS File in the basic tab. Defaut styling constructs of the adaptive form and overridden with the constructs listed in the custom .css file.

Components

The components discussed in this article have their predefined CSS classes. You can edit the variables to modify the styles in the CSS classes. Alternatively, you can rewrite the entire class. This section describes the classes within components and styles that you can modify using variables.

Container styling

A container is the top-level component. Other panels and fields lie under the container component.

CSS class

guideContainerNode

Variables Description

Variables Description

container-bgColor

Background color of the container

container-padding

Padding for the container

container-margin

Margin for the container

container-fontColor

Font color for the container

Field styling

Adaptive forms include various types of fields. Each field has a unique class name, which is the name of the field. The field also has a common class name guideFieldNode.

Fields include labels, widgets, Help description (both Long and Short description), and Field Help icons (question mark).

CSS class

guideFieldNode

Variables

Description

field-padding

Padding for the field

field-error-font-color

Font color of the error message of field

field-error-font-size

Font size of the error message of field

Label styling

The HTML element label used for the field includes the classes left or top depending on whether the label is at the top or left.

CSS class

guideFieldLabel

Variables

Description

label-font-color

Font color for the field label

label-font-size

Font size for the field label

label-line-height

 CSS line height property for the field label

label-font-weight

 CSS font weight property for the field label

label-margin

Margin for the field label

The CSS rules for the label are applied using the guideFieldLabel label. If you are an author, override this rule to make your custom changes visible.

Widgets styling

Depending on their type, widgets also include classes. Commonly, widgets include the guideFieldWidget class. The widgets that ship with HTML normally use the standard HTML element input and select. The styling is done accordingly. You cannot style a custom widget by changing the variables.

CSS class

guideFieldWidget

Variables

Description

widgets-bg-color

 Background color for the widgets (Doesn't work for check box and radio button)

widgets-border-color

Border color for the widgets

widgets-border-thickness

Border size for the widgets

widgets-border-radius

Border radius for the widgets

widgets-border-type

Border type for the widgets

widget-border-focus-type

Focus type for widget borders

widgets-border

Consolidated border style of widgets

widgets-font-color

Color of the text inside the widget

widgets-font-size

Size of the text inside the widget

widgets-line-height

 CSS lineheight property for the widget

widgets-padding

CSS padding property for the widget

widgets-focus-border-color

Border color when the widget is in focus

widgets-mandatory-border-color

Border color of the widget for the mandatory fields

widgets-mandatory-bg-color

Background color of the widget for the mandatory fields

widgets-disabled-bg-color

Background color for the widget when the field is disabled

widgets-disabled-font-color

Font color for the widget when the field is disabled

widgets-disabled-border-color

Border Color for the widget when the field is disabled

widget-height

 Height of the widget (Doesn't work for checkbox and radio button)

checkbutton-height

Height for check box and radio button.

listboxwidget-height

Maximum height for a multi-select dropdown

Limitations in widget styling

The styling for focused, mandatory, and disabled fields is restricted using variables. However, you can change it by overriding the styles. Restriction using variables is provided mainly to keep the number of variables in check. The restriction can be relaxed if the appearance of a field drastically changes because it is in any of the states discussed earlier.

Help description

An author can specify the Help content in the fields using Short and Long description components. Both components have a common class .guideHelpDescription and another class .long/ .short, depending on the type of description. The Help content is enclosed in a paragraph element to override the styling of the description. The Help description (both long and short) is modified using variables starting with widgetshelp, as mentioned in following table:

Variables

Description

widgets-help-long-bg-color

Background color of the widgets' long Help

widgets-help-long-border-color

Border color of the widgets' long Help

widgets-help-long-border-indicator-color

Left indicator border color of the widgets' long Help

widgets-help-short-bg-color

Background color of the widgets' short Help

widgets-help-short-color

Font color of the widgets' short Help

widgets-help-short-tooltip-bg-color

Background color of the widgets' short tool tip Help

widgets-help-short-tooltip-color

Font color of the widgets' short tool tip Help

Terms and Conditions

The Terms and Conditions (TnC ) widget lets you specify terms and conditions. You can customize the widget using the variables described in the following table.

Variables

Description
tnc-unvisited Font color of unvisited tnc link.
tnc-visited Font color of visited tnc link.

Button

Buttons are also widgets. However, their styling is slightly different from the widgets. In adaptive forms, any of the following constitutes a button:

  • input[type = text]
  • button
  • element with class .button

HTML code for button:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS Class

Description

iconButton-icon

Provides icons for button

iconButton-label

Styles button label/caption

Variables

Description

button-border-size

Border size for the buttons

button-border-type

Border type

button-padding

CSS padding property for the button

button-font-size

Font size for the button

button-background-color

Background color for the button

button-font-color

Font color of the button

button-border-color

Border color of the button

button-large-padding

Padding for the large buttons (buttons with class .buttonlarge)

button-large-font-size

Font size for large buttons

button-small-padding

Padding for the small buttons (buttons with class .buttonsmall)

button-small-font-size

Font size for small buttons

button-info-background-color

Background color for informative buttons (buttons with class .buttoninformative)

button-info-font-color

Font color for informative buttons

button-info-border-color

Border color for informative buttons

button-warning-background-color

Background color for warning styled buttons (buttons with class .buttonwarning)

button-warning-font-color

Font color for warning styled buttons

button-warning-border-color

Border color for warning styled buttons

button-alert-background-color

Background color for alert buttons (buttons with class .buttonalert)

button-alert-font-color

Font color for alert buttons

button-alert-border-color

Border color for alert buttons

Question mark

For the widgets, a questionMark is displayed when an author adds a long description in the Help content. The default icon provided in bootstrap is used. To use a custom icon, you can customize the bootstrap icons.

CSS class

guideHelpQuestionMark

Variables

Description

questionmark-font-color

Color of the icon

questionmark-hover-font-color

Color of the icon when mouse is hovered over it

Table

You can change the color theme for header and body rows in a table by using the following variables.

Variables

Description

table-header-bg-color

Background color for the header row. The default value is #333.

table-odd-row-bg-color

Background color for the odd body row. The default value is rgb(255, 255, 255).

table-even-row-bg-color

Background color for the even body row. The default value is #eee.

File Attachment

The File Attachment widget of adaptive forms lets you upload files. You can also customize the widget using the variables.

Variables

Description

fileItemPadding

Padding for the files displayed in the widget

fileItemBackground

Background color for the file item

fileItemBorderColor

Border color for the top border

fileItemColor

Font color for the file item

filePreviewIconColor

Color for the Preview icon (Bootstrap icon) in the widget

fileItemCommentHeight

Height of comment for the file item

There are four types of navigator tabs. These include tabs on the left, top, in the wizard and accordion. Each navigator has a different class.

Naviagator

CSS class

Accordion

.accordion-navigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab-navigators

Wizard

.wizard-navigators

The following is the HTML code for the tab navigator element is (similar to the bootstrap tabs):

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

You can change the styling of the navigator using CSS rules that select the elements using descendant selectors. For example, to add a text decoration style to the anchor tag:

Tab navigator on top:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

Additionally, there are classes to style tab navigators (both left and top) based on whether they have nested/child/sub navigators.

CSS Class

Description

nested_true

Tab navigators (left and top) that have nested/child/sub navigators

nested_false

Tab navigators (left and top) that don't have nested/child/sub navigators

The guideNavIcon class provides a default icon to tab navigators (both left and top) and wizard navigators.

CSS class

guideNavIcon
NOTE

You can change the icon for a particular navigator by providing a CSS class on the panel in authoring, form example <CLASS_NAME>. You add a <CLASS_NAME>_nav for the icon of the navigator.

Variables

Description

Tab Navigators

navigator-bg-color

Background color for the entire tab navigator

tabs-bg-color

Background color for the tab

tabs-font-color

Font color for the tab

tabs-hover-bg-color

Background color for the tab on hover

tabs-hover-font-color

Font color for the tab on hover

tabs-active-bg-color

Background color when the panel is in focus (active)

tabs-active-font-color

Font color when the panel is in focus

tabs-completed-bg-color

Background color when the completion expression of the panel returns true

tabs-completed-font-color

Font color when the completion expression of the panel returns true

tabs-stepped-bg-color

 Background color when the panel has been in focus once but the completion expression returns false

tabs-stepped-font-color

 Font color when the panel has been in focus once but the completion expression returns false

tabs-border-color

Border color for the tab

tabs-font-size

Font size for the tab

tabs-padding

Padding for the tab

tabs-margin

Margin for the tab

tabs-vertical-margin

Margin for the vertical tabs

tabs-border-thickness

Border size for the tabs

tabs-min-height

Minimum height of the tabs

heirarichal-indent

Indentation for the nested tabs

Wizard Navigators

wizard-navigator-bg-color

 Background color for entire wizard navigator

wizard-tabs-bg-color

Background Color for the wizard

wizard-tabs-font-color

Font color for the wizard

wizard-tabs-active-bg-color

Background color when the panel is in focus (active)

wizard-tabs-active-font-color

Font color when the panel is in focus (focused)

wizard-tabs-completed-bg-color

Background color when the completion expression of the panel returns true

wizard-tabs-completed-font-color

Font color when the completion expression of the panel returns true

wizard-tabs-stepped-bg-color

 Background color when the panel has been in focus once but completion expression returns false

wizard-tabs-stepped-font-color

Font color when the panel has been focused once but completion expression returns false

wizard-tabs-border-color

Color for the wizard

wizard-tabs-font-size

Font size for the wizard

wizard-tabs-padding

Padding for the wizard

wizard-tabs-border-thickness

Border size for the wizard

wizard-nav-bullet-border

Border color of the wizard navigator bullet (prefixing the caption/label)

wizard-progress-bg-color

Background color of the wizard navigator progress bar

wizard-progress-color

Fill color for the progress bar

Accordion Navigators

accordion-tabs-padding

Padding for accordion

Panel styling

A Panel includes an optional toolbar and its content.

CSS class

guidePanelNode

Variables

Description

panel-background-color

Background color for the panel

panel-font-size

Font size for the panel text

panel-font-color

Font color for the panel text

panel-padding

Padding inside the panel

panel-description-font-size

Font size of panel's description

panel-description-padding

Padding of panel's description

panel-help-bg-color

Background color for the panel's help

panel-help-border-indicator-color

Indicator border color for the panel's help

The panel node is divided into navigators and content. There is no separate styling component for the content. The variables described are applied on navigator as well as content.

*The topmost panel (RootPanel) doesn’t have this class.

Mobile styling

Header bar

These variables influence the header bar that is visible on a mobile device or small screen devices that contain panel title and next and back navigators.

CSS class

guide-header-bar

Variables

Description

headerbar-background-color

Background color for the header bar

headerbar-font-color

Font color for the text inside header bar

headerbar-padding

Padding for header bar

Scroll indicator

These variables influence the Scroll indicator, which is an orange arrow that appears on a mobile device or small screen devices. A Scroll indicator indicates that there is content beyond the visible part of the screen. You can scroll down to see it. When you hit the end of content, the arrow disappears.

CSS class

mobileScrollIndicator

Variables

Description

scrollIndicatorBottom

Fixed position of scrollindicator from bottom

scrollIndicatorRight

Fixed position of scrollindicator from right

scrollIndicatorWidth

Width of scrollindicator

scrollIndicatorHeight

Height of scrollindicator

Mobile fixed toolbar layout-specific variables

These variables in the following table influence the mobile fixed toolbar layout.

CSS class

mobileToolbar

Variables

Description

mobileToolbarBottom

Fixed position of toolbar, on mobile device, from bottom

mobileToolbarTop

Fixed position of toolbar, on mobile device, from top

mobileToolbarLeft

Fixed position of toolbar, on mobile device, from left

mobileToolbarRight

Fixed position of toolbar, on mobile device, from right

mobileButtonIconTopMargin

Fixed position of toolbar's buttons' icon, from top

mobileButtonIconWidth

Width of toolbar's buttons' icon on mobile device

mobileButtonIconHeight

Height of toolbar's buttons' icon on mobile device

mobilefixedtoolbarbgcolor

Background color of toolbar on mobile device

Business.Adobe.com resources

Docs links
Automated Onboarding Style System Auto Form Fill Personalized Communications Web Content Management Dynamic Forms

On this page