Adding HubL variable names to module.css in custom modules

Develop, Build & Integrate CMS Development
1

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?

2

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

{% 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 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

{% 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

3

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