Styling constructs for Adaptive Forms
- Applies to:
- Experience Manager as a Cloud Service
- Topics:
- Adaptive Forms
- Foundation Components
CREATED FOR:
- User
Prerequisites
Knowledge of CSS and the LESS framework.
What can be customized
The article lists publicly available css classes of Adaptive Forms. You can use 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 change 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).
guideFieldNodefield-paddingfield-error-font-colorfield-error-font-sizeLabel 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.
guideFieldLabellabel-font-colorlabel-font-sizelabel-line-heightlabel-font-weightlabel-marginThe 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.
guideFieldWidgetwidgets-bg-colorwidgets-border-colorwidgets-border-thicknesswidgets-border-radiuswidgets-border-typewidget-border-focus-typewidgets-borderwidgets-font-colorwidgets-font-sizewidgets-line-heightwidgets-paddingwidgets-focus-border-colorwidgets-mandatory-border-colorwidgets-mandatory-bg-colorwidgets-disabled-bg-colorwidgets-disabled-font-colorwidgets-disabled-border-colorwidget-heightcheckbutton-heightlistboxwidget-heightLimitations 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:
widgets-help-long-bg-colorwidgets-help-long-border-colorwidgets-help-long-border-indicator-colorwidgets-help-short-bg-colorwidgets-help-short-colorwidgets-help-short-tooltip-bg-colorwidgets-help-short-tooltip-colorTerms 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.
tnc-unvisitedtnc-visitedButton
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>
iconButton-iconiconButton-labelbutton-border-sizebutton-border-typebutton-paddingbutton-font-sizebutton-background-colorbutton-font-colorbutton-border-colorbutton-large-paddingbutton-large-font-sizebutton-small-paddingbutton-small-font-sizebutton-info-background-colorbutton-info-font-colorbutton-info-border-colorbutton-warning-background-colorbutton-warning-font-colorbutton-warning-border-colorbutton-alert-background-colorbutton-alert-font-colorbutton-alert-border-colorQuestion 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.
guideHelpQuestionMarkquestionmark-font-colorquestionmark-hover-font-colorTable
You can change the color theme for header and body rows in a table by using the following variables.
table-header-bg-color#333.table-odd-row-bg-colorrgb(255, 255, 255).table-even-row-bg-color#eee.File Attachment
The File Attachment widget of Adaptive Forms lets you upload files. You can also customize the widget using the variables.
fileItemPaddingfileItemBackgroundfileItemBorderColorfileItemColorfilePreviewIconColorfileItemCommentHeightNavigator Styles
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.
Accordiontabs on the lefttabs on the topWizardThe following is the HTML code for the tab navigator element is (similar to the bootstrap tabs):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... 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;
}
Also, there are classes to style tab navigators (both left and top) based on whether they have nested/child/sub navigators.
nested_truenested_falseThe guideNavIcon class provides a default icon to tab navigators (both left and top) and wizard navigators.
guideNavIcon
NOTEnavigator-bg-colortabs-bg-colortabs-font-colortabs-hover-bg-colortabs-hover-font-colortabs-active-bg-colortabs-active-font-colortabs-completed-bg-colortabs-completed-font-colortabs-stepped-bg-colortabs-stepped-font-colortabs-border-colortabs-font-sizetabs-paddingtabs-margintabs-vertical-margintabs-border-thicknesstabs-min-heightheirarichal-indentwizard-navigator-bg-colorwizard-tabs-bg-colorwizard-tabs-font-colorwizard-tabs-active-bg-colorwizard-tabs-active-font-colorwizard-tabs-completed-bg-colorwizard-tabs-completed-font-colorwizard-tabs-stepped-bg-colorwizard-tabs-stepped-font-colorwizard-tabs-border-colorwizard-tabs-font-sizewizard-tabs-paddingwizard-tabs-border-thicknesswizard-nav-bullet-borderwizard-progress-bg-colorwizard-progress-coloraccordion-tabs-paddingPanel styling
A Panel includes an optional toolbar and its content.
guidePanelNodepanel-background-colorpanel-font-sizepanel-font-colorpanel-paddingpanel-description-font-sizepanel-description-paddingpanel-help-bg-colorpanel-help-border-indicator-colorThe panel node is divided into navigators and content. There ``is no separate styling component for the content. The variables described are applied on navigator and content.
The topmost panel (RootPanel) does not 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.
guide-header-barheaderbar-background-colorheaderbar-font-colorheaderbar-paddingScroll 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.
mobileScrollIndicatorscrollIndicatorBottomscrollIndicatorRightscrollIndicatorWidthscrollIndicatorHeightMobile fixed toolbar layout-specific variables
These variables in the following table influence the mobile fixed toolbar layout.
mobileToolbarmobileToolbarBottommobileToolbarTopmobileToolbarLeftmobileToolbarRightmobileButtonIconTopMarginmobileButtonIconWidthmobileButtonIconHeightmobilefixedtoolbarbgcolorTheme-specific variable
The Simple enrollment theme at /etc/clientlibs/fd/af/guidetheme/simpleEnrollment and the category guide.theme.simpleEnrollment also introduce a few variables. If you want to create a theme enhancing simple enrollment, you can use the following ``extra variables:
button-focus-bg-colorbutton-hover-bg-colorbutton-radiusnavigation-button-bg-colornavigation-button-bg-hover-colorinitial-nav-coloractive-nav-colorvisited-nav-colortabs-bifercating-border-colortabs-navigator-separator-colortabs-child-nav-bg-color