Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Hiding background image of a field

Avatar

Level 4

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

12 Replies

Avatar

Level 7

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

Avatar

Level 4

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.

Avatar

Level 7

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?

Avatar

Level 4

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.

Avatar

Level 7

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?

Avatar

Level 4

James R Green

I am using 6.3 with SP1. I am actually still facing the same issue. :/

Avatar

Level 7

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

Avatar

Level 7

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>

Avatar

Level 4

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?

Avatar

Level 7

Yup that should be fine.

Did you try the other suggestions to try and find the problem?

"

* 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?

"

Avatar

Level 4

I actually haven't tried those two options yet because that requires me to pull in some extra stuff into my eclipse. I will try it out and see what it does.

Avatar

Level 4

So when I give a build from my eclipse to AEM with a package that contains the theme.css, which was initially created by the theme editor, I dont see the background image in the theme editor even though theme.css has a reference to that background image.

THEME.CSS in crx

1431910_pastedImage_0.png

THEME EDITOR

1431912_pastedImage_6.png

Now if I make any changes in my theme editor, it refreshes the theme.css and erases the references and and whatever that were not present in theme.editor like some padding stuff etc.