Highlighted

AEM forms basic theme overriding other parts of site

Hina29

11-08-2017

When i include a form on a page its button:not()  theme.css is overriding  styles defined by classes on other button components on the page

theme.css

button:not(.af-icon-button)input[type='button']{

//styles here

}

custom.css

.xyz{

}

What should i do to get the style on button class xyz

Thanks

Hina

Replies

Highlighted

smacdonald2008

11-08-2017

WHy not put your CSS applicable to the Form in its own ClientLib - then it will not impact other parts of the site.

Highlighted

Hina29

11-08-2017

I am using the default theme.css for the form component. When this component is dragged on a page that contains other components having button. It overrides there styles.

Highlighted

smacdonald2008

14-08-2017

Try putting the CSS into a  separate clientlib that will not impact other parts of the site. That is only used in the form where you want that specific style.

Highlighted

notyourcat

17-04-2020

This is still a relevant topic for AEM Forms. I'm guessing not that many people use it because its pretty evident. When the guideContainer is loaded, the common clientlib gets loaded, adding reset and overrides for things like inputs, buttons and containers, which is ok, if you only have AEM forms on your page, but usually there are things like headers and megamenus and container, which will get affected. 

 

I'm still yet to find a way to NOT include this clientlibrary but haven't been able to, and a solution such as "Add more styles in another separate clientlib (?)" its not feasible and a waste of developers time.

 

Any other suggestions?