Any solution to creat unique css class name for each module?

Develop, Build & Integrate CMS Development
1

I would like to creat different css property for different module.

Issue is

i have 2 module,

1st module use css class: h2 { color:red}

2nd module use css class: h2 {color:green}

i dont want to conflict css setting with each module when using both module in same page.

is there any solution for this, except changing class name or adding custom unique class name manually?

2

Hi @SH82

Typically we create a Custom Module, which has a Class Selector, that the content creator can drag and drop into the page.

So you would have Class Selector [red, green, etc.] then in your html:

<div class="{{ module.class_selector }}">
<h2>Heading 2</h2>
</div>

Then your CSS sets the colour (super effiecient and fast)

div.red { color: red; }
div.green { color: green; }

That way the person using the Custom Module can choose the Class and everything is taken care of in the Module.

Have fun

Mike

3

Hi @SH82

In addition to @Mike_Eastwood answer, you can you use the require_css block combined with the scope_css to create unique css for your module.

Here is the hubspot documentation if you want more details about that block.

Have a nice day

Matthieu