Highlighted

Hiding background image of a field

deepakt84913413

23-02-2018

How do I hide background image for specific fields using the theme editor? Refer the below image for it. I don't want the background image in the red box to appear when I give a valid input. Thanks in advance for the help.

1426494_pastedImage_0.png

Replies

Highlighted

James_R_Green

24-02-2018

Hi deepakt84913413

Find the theme that your form is using (selected under basic options on the adaptive form container).

Open the theme in the themes editor.

Select the field type that you want to remove the success image from e.g.

Screen Shot 2018-02-24 at 15.35.52.png

Select success from the "state" drop down:

Screen Shot 2018-02-24 at 15.32.02.png

Go to the background properties and remove the image that is selected:

Screen Shot 2018-02-24 at 15.32.15.png

If there is no image there, someone might have added the image with css. To see the CSS for the theme , go to the Advanced section and check for CSS overrides, or click the "View CSS" option at the very bottom. Hopefully you will find the offending css here.

Screen Shot 2018-02-24 at 15.36.39.png

Once you have made the changes save and re-test your form.

Thanks,

James

Highlighted

deepakt84913413

25-02-2018

Whenever I make changes to the theme, theme.css is being changed since all these changes are saved in there. But sometimes, the changes are not being reflected, especially with the background images. As soon as I edit the theme, I couldn't see the changes in theme.css or whenever I give a build from eclipse to aem with the right theme.css, and I go to the theme, I couldn't see the background image there.

James_R_Green

25-02-2018

Hi deepakt84913413

The themes are stored in 2 places in AEM:

etc/clientlibs/fd/themes/<project folder>/<theme name>

and

/content/dam/formsanddocuments-themes/<project folder>/<theme name>

Are you including the code from both of these locations in your eclipse project?

Highlighted

deepakt84913413

26-02-2018

James R Green

Yes. We are indeed including both of them in our project.

And also, when I use theme editor and upload a back ground image, the theme.css gets generated fine. I use vaultclipse to bring the code back to eclipse. Now if I give a build from eclipse to my local as a package, I don't see that image anymore. I can definitely see the reference in theme.css and the image in the assets folder for sure, but no image in the theme editor itself. Weird! 😕

So whenever I change something else in the theme editor the next time, it changes the theme.css with no reference to the background image because it does not exist anymore.

Highlighted

James_R_Green

26-02-2018

Which version of AEM are you using? I remember strange things like that happening in AEM 6.2 but seems OK in 6.3.

Did you amend the CSS manually at all? It won't like it if you do.

Have you considered maintaining the same CSS in a clientlibrary?

Highlighted

James_R_Green

27-02-2018

Hideepakt84913413

It's difficult to troubleshoot the issue on here.

* If you copy the theme using the UI and try the change with the copy does it make a difference?

* If you create a new theme and make your background image change, does that update as expected in your project?

If not I would extract the CSS from the theme and add it to a clientlibrary and use that instead

Highlighted

James_R_Green

28-02-2018

Also - just to double check the two directories are in your META-INF/vault/filter.xml file right?

/etc/clientlibs/fd/themes/<project folder>/<theme name>

/content/dam/formsanddocuments-themes/<project folder>/<theme name>

Highlighted

deepakt84913413

02-03-2018

We are including

/etc/clientlibs/fd/themes/<project folder>

/content/dam/formsanddocuments-themes/<project folder>

but not the specific theme. I think that should be fine right?