Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

AEM forms basic theme overriding other parts of site

Avatar

Avatar
Validate 1
Level 2
Hina29
Level 2

Likes

3 likes

Total Posts

14 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 2
Hina29
Level 2

Likes

3 likes

Total Posts

14 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile
Hina29
Level 2

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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.

Avatar

Avatar
Validate 1
Level 2
Hina29
Level 2

Likes

3 likes

Total Posts

14 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 2
Hina29
Level 2

Likes

3 likes

Total Posts

14 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile
Hina29
Level 2

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.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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.

Avatar

Avatar
Ignite 1
Level 2
notyourcat
Level 2

Likes

7 likes

Total Posts

15 posts

Correct Reply

1 solution
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Level 2
notyourcat
Level 2

Likes

7 likes

Total Posts

15 posts

Correct Reply

1 solution
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
notyourcat
Level 2

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?