Question about setting the deafult style class for component | Community
Skip to main content
Level 2
October 23, 2023
Solved

Question about setting the deafult style class for component

  • October 23, 2023
  • 3 replies
  • 746 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

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:

 

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

3 replies

arunpatidar
Community Advisor
Community Advisor
October 23, 2023

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
aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
October 23, 2023

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:

 

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
kautuk_sahni
Community Manager
Community Manager
October 26, 2023

@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