Changing website module background color

Marketing & Content Hub Blog, Website & Page Publishing
1

Here is my question:

How do we change a single module background color without changing the background color of the whole page?

Thank you

2

Hi @CDorval , thank you for your post.

I wanted to tag in @Indra for this topic. Hey Indra, would you be able to share your advice?

3

Hi @natsumimori, thanks for mentioning.

@CDorval, it depends on what kind of module it is. If it’s a custom module you have build, you can add an extra class or ID to your element.

So what you can do is this:

<div class="module-{{ name }}" id="module-{{ name }}">
 [here goes your code]
</div>

Now your module will have an wrapper with a spesific class and ID.

So you can now check the output and target that in your CSS to change the background color.

Your CSS will look something like this:

.module-module_999999999{
 background-color:#000;
}

.module-widget_999999999{
 background-color:#000;
}

/* or */

#module-module_999999999{
 background-color:#000;
}

#module-widget_999999999{
 background-color:#000;
}