Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Question about setting the deafult style class for component

Avatar

Level 3

Hi community!

 

I want to ask about setting the default style class for component.

 

I already know that i can set the default css classes at properties-styles, for example i can set a default style class for group A, but if i have multiple groups, and i try to set a style for another group B after i added the component in the edit mode, the style for A will disappear and only the style for group B left.

Seems like the default css classes and the allowed styles are exclusive.

I want to extend the default class, not overwriting it. Is there any way for me to achieve that?

 

What is the right way to set the dafault class for component? Not using the properties setting but using a css,js

file?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @zonghuiliu 

 

Option-1: Create multiple styles. Where the default one is one category and selected via policy.

The other styles can then be combined via "Styles can be combined:

aanchalsikka_0-1698066734446.png

 

Option-2: 

Define a styling of various components based on the Style chosen on:

- template level (via enclosing container component)

- Page level (by using Page level styles)

 

Option-3:

- Add default CSS in HTL


Aanchal Sikka

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @zonghuiliu 
With css and js or even with HTL you can set the defualt styling.

In HTL add a class to the container (say componenet_default) and use this for styling. you can also add this class based on some condition.



Arun Patidar

Avatar

Correct answer by
Community Advisor

Hello @zonghuiliu 

 

Option-1: Create multiple styles. Where the default one is one category and selected via policy.

The other styles can then be combined via "Styles can be combined:

aanchalsikka_0-1698066734446.png

 

Option-2: 

Define a styling of various components based on the Style chosen on:

- template level (via enclosing container component)

- Page level (by using Page level styles)

 

Option-3:

- Add default CSS in HTL


Aanchal Sikka

Avatar

Administrator

@zonghuiliu  Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni