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.
Solved! Go to Solution.
Views
Replies
Total Likes
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#
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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:
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
Views
Replies
Total Likes
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#
Views
Replies
Total Likes
Views
Likes
Replies