Applying Styples on Adaptive Form Templates, created using Template Editor

[AEM_Forum]

Hi,

I am creating Adaptive Form Templates, using Template Editor.

Please suggest how to apply styles.

I do see a setting "CSS File". But how to make a specific CSS file available to it?

Should we store it in a specific path in JCR and mention its full path?

If I cant succeed in applying styles, I have to resort to manual way of creating templates, not using Template Editor.

Appreciate your support.

Thanks,

Rama.

[AEM_Forum]

Is there a way to apply themes generated using Forms Themes Editor to this template, generated using Template Editor?

Thanks,

Rama.

[TundraSteve]

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

CSS generation sequence

When you select view CSS, Theme Editor collects all the styling information, and builds a CSS. It collects information in the following order:

1. Styling defined in the theme's base client library.
2. User defined styling, specified using the properties in the sidebar.
3. CSS style provided using CSS Override option. 

For example, background color of a textbox is blue in the base client library. You change it to pink using the properties in the sidebar. When you generate CSS, you see background color of the text box as pink. After changing the background color using the properties, another author uses CSS override option to change the background color text box as white. When you generate CSS, you see background color as white in the generated CSS.   

When you specify styles for components in Theme Editor, a CSS is generated. When you style a generic component, multiple components included in it are also styled. For example, when you style a field, the tex box and label in it are also styled. When you style the text box within the field, it gets its own CSS. If you want to debug the CSS generated for the field and the component, Theme Editor provides options that let you view CSS.  

You can see the generated CSS using the following options:

• View CSS option in the sidebar: When you select a component in the Theme, you can see the VIEW CSS option in the sidebar. It shows the generated CSS, including CSS for ::before and ::after pseudo elements.
• View Theme CSS option in the canvas toolbar: In the Canvas Toolbar, click  > View Theme CSS. You can see the entire theme CSS generated from the properties you define in the Theme Editor. 

[AEM_Forum]

Hi Steve,

Thanks for these inputs.

I am stuck up at the Forms Template Editor, where I want to apply theme, rather than applying at Form level.

This theme should cover header, footer and body content (I mean whole template).

But I did not find a way for doing this.

On the other hand, I tried to create Form Template in the CRXDE in the old way (not using Template Editor) and apply theme.

But here I am aware of only ClientLibs, where I could apply only JS and CSS and not a Theme.

I needed to deliver my design yesterday, but I got stuck up in both my options.

This is overdue and very urgent. Kindly support.

Thanks,

Rama.

[Pankaj_Parashar]

Hi Rama,

Here are the steps to apply theme on a template.

1. After placing form fields in initial content and defining structure, Lock structure component on Adaptive Form Container.
2. Now you see properties icon on selecting Adaptive Form Container in structure view. Click on properties icon
3. You can see theme selection drop down on the left pane.

Hope this will help you.

Thanks,

Pankaj Parashar

[AEM_Forum]

Hi Pankaj,

We already followed this procedure.

But this theme is getting applied to Initial Content only and not Header and Footer.

Keeping the urgency in mind, kindly arrange a Adobe Connect session ASAP, where we will join and show you the behavior.

BTW, we got the header and footer as HTMLs from our UI/UX guy and probably we have to validate our procedure to incorporate them in the template.

Appreciate your support.

Thanks,

Rama.

[AEM_Forum]

Hi Pankaj,

Please find attached header and footer code for our project. (Not able to attach the zip. Sent to your email).

We are not able to apply any custom styles or components like buttons/images to header/footer sections of adaptive form template, when added to the Form Template Editor.

As I remarked, for anything in the body of template (other than header and footer) we are able to apply them.

Appreciate your support.

Thanks,

Rama.

[Pankaj_Parashar · Accepted solution]

Hi Rama,

I had a look at your sample. The current theme authoring exposes styling of header, logo and text. The default header is static and have only logo and text component and doesn't allow to add any other components. You have various components in your sample header. To achieve the same, you can consider any of the following approaches:

1. Creating custom header and footer, so you can use other components and control design.
2. Embedding form in a site page (AF in site page) so it inherits header and footer from the site page.

Thanks,

Pankaj Parashar

[AEM_Forum]

Hi Pankaj,

Appreciate your response.

Is there any tutorial on Creating custom header and footer, so you can use other components and control design?

Thanks,

Rama.