# Changing website module background color

**URL:** <https://community.hubspot.com/t/changing-website-module-background-color/48316>\
**Category:** Blog, Website & Page Publishing\
**Tags:** website-pages\
**Created:** [December 9, 2021, 10:17pm UTC](https://community.hubspot.com/t/changing-website-module-background-color/48316 "2021-12-09T22:17:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CDorval](https://avatars.discourse-cdn.com/v4/letter/c/51bf81/32.png) [@CDorval](https://community.hubspot.com/u/CDorval)\
**Post date:** [December 9, 2021, 10:17pm UTC](https://community.hubspot.com/t/changing-website-module-background-color/48316/1 "2021-12-09T22:17:17Z")

</div>

Here is my question:

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

Thank you

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [December 13, 2021, 6:46am UTC](https://community.hubspot.com/t/changing-website-module-background-color/48316/2 "2021-12-13T06:46:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [December 13, 2021, 7:27am UTC](https://community.hubspot.com/t/changing-website-module-background-color/48316/3 "2021-12-13T07:27:16Z")

</div>

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:

```lia-code-sample
<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:

```lia-code-sample
.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;
}

```