How to apply custom css to the aem adaptive form | Adobe Higher Education
Skip to main content
Sandhya_Parimi
Sandhya_Parimi
November 29, 2016
Resuelto

How to apply custom css to the aem adaptive form

  • November 29, 2016
  • 3 respuestas
  • 5045 visualizaciones

How to apply custom css styles to the custom form and how to get the proper alignment of that form.

I have followed the below steps:

1.I have created the adaptive form by using blank template

2.and used adaptive form components for creating the form.

Kindly suggest how to apply the styles.

Thanks in advance.

Este tema ha sido cerrado para respuestas.
Mejor respuesta de mainaks42838911

Hi Sandhya,

Other than above 2 approaches if you want to add styling to specific components like a particular text field or a particular numeric field, you can use inline Editor. It is similar to Theme Editor but rather than applying to all component of same type using this you can apply style to a specific element. example I want to give red background to a particular text-field in the form.If you use theme editor it will apply style to all the text-fields but using inline editor you can specify style corresponding to that particular text field. You can refer to the below link on how to use inline editor.

https://helpx.adobe.com/aem-forms/6-2/inline-style-adaptive-forms.html#

3 respuestas

sudhansh
Adobe Employee
sudhanshAdobe Employee
Adobe Employee
November 29, 2016

Hi Sandhya,

You can create a Theme using Theme Editor [1] and apply it to the required form. It provides a user interface to style the various form elements, and also supports including additional styling using the base clientlib provided for the Theme. For applying the theme to the form, you can refer to the section: 'Applying a theme to a form' in the link below [1].

[1] https://helpx.adobe.com/aem-forms/6-2/themes.html

Thanks & Regards,

-Sudhanshu

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
December 6, 2016

Hi 

Adding to what Sudhanshu said, please have a look at these reference articles:

Link:- https://helpx.adobe.com/aem-forms/6/creating-custom-adaptive-form-themes.html

// Creating custom adaptive form themes

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

    For example, create the following node:

    /etc/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.
    • css folder: Contains the .css files in which you define the static styles to be used in the theme.

    Read full article to apply the theme.

Link:- https://helpx.adobe.com/aem-forms/6/styling-constructs-adaptive-forms.html

// Styling constructs for adaptive forms

I hope this would help you.

~kautuk

Kautuk Sahni
mainaks42838911
mainaks42838911Respuesta
December 6, 2016

Hi Sandhya,

Other than above 2 approaches if you want to add styling to specific components like a particular text field or a particular numeric field, you can use inline Editor. It is similar to Theme Editor but rather than applying to all component of same type using this you can apply style to a specific element. example I want to give red background to a particular text-field in the form.If you use theme editor it will apply style to all the text-fields but using inline editor you can specify style corresponding to that particular text field. You can refer to the below link on how to use inline editor.

https://helpx.adobe.com/aem-forms/6-2/inline-style-adaptive-forms.html#

Términos y condicionesAccessibility statement

Loading footer...