# Adding HubL variable names to module.css in custom modules

**URL:** <https://community.hubspot.com/t/adding-hubl-variable-names-to-module-css-in-custom-modules/60821>\
**Category:** CMS Development\
**Created:** [July 12, 2022, 6:51pm UTC](https://community.hubspot.com/t/adding-hubl-variable-names-to-module-css-in-custom-modules/60821 "2022-07-12T18:51:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GRennilson](https://avatars.discourse-cdn.com/v4/letter/g/f07891/32.png) [@GRennilson](https://community.hubspot.com/u/GRennilson)\
**Post date:** [July 12, 2022, 6:51pm UTC](https://community.hubspot.com/t/adding-hubl-variable-names-to-module-css-in-custom-modules/60821/1 "2022-07-12T18:51:04Z")

</div>

In design tools I would like to use the variable name from the styles tab when developing a custom module. I can use the variable in the html without any problems, but when I try and add the variable in a line of css it doesn’t work. i.e:  
button {background-color: {{ module.style.color\_field }};}  
Am I putting the variable name in wrong?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [July 12, 2022, 11:34pm UTC](https://community.hubspot.com/t/adding-hubl-variable-names-to-module-css-in-custom-modules/60821/2 "2022-07-12T23:34:26Z")

</div>

Hi @GRennilson,

hubl works in custom modules only in the html+hubl part.

If you want modify the html settings with specific css settings you should write it like this

```lia-code-sample
{% require_css %} {# this will put the CSS into the <head>-tag #}
<style>
{% scope_css %} {# this will "render" the style settings from the style tab #}
button{
background:{{module.style.color_field.css}}; {# add ".css" to get the CSS part #}
}
{% end_scope_css %}
</style>
{% end_require_css %}

...

<button>Click me</button>

```

also - if you want to see what you have available as options (or want to debug it) put [pprint](https://developers.hubspot.com/docs/cms/hubl/filters#pprint) to your hubl.

It should look like this

`{{module.style.color_field|pprint}}`

If you want to see the outcome without affecting the live site, you can write your code like this

```lia-code-sample
{% require_css %} {# this will put the CSS into the <head>-tag #}
<style>
{% scope_css %} {# this will "render" the style settings from the style tab #}
button{
background:{{module.style.color_field.css}}; {# add ".css" to get the CSS part #}
}
{% end_scope_css %}
</style>
{% end_require_css %}

...
{{module.style.color_field|pprint}}
...
<button>Click me</button>

```

and view the module in the preview mode(reloads automatically everytime when you change something in the design tools). After you get the desired result/information, delete the whole “pprint”-hubl and publish/save the module.

best,

Anton

---

<div class="post-metadata">

**Author:** ![GRennilson](https://avatars.discourse-cdn.com/v4/letter/g/f07891/32.png) [@GRennilson](https://community.hubspot.com/u/GRennilson)\
**Post date:** [July 13, 2022, 5:29pm UTC](https://community.hubspot.com/t/adding-hubl-variable-names-to-module-css-in-custom-modules/60821/3 "2022-07-13T17:29:33Z")

</div>

Awesome Anton. Thanks for helping a nub out !!!