topic Re: Using Field to specifiy CSS attributes for Pseudo-classes in CMS Development

Using Field to specifiy CSS attributes for Pseudo-classes

HaNguyen — Mon, 19 Jul 2021 08:28:23 GMT

Dear Hubspot Community, as the title suggests, I would like to ask about how to pass a Field Value into CSS property only "on hover" of an element inside a custom Module. I have tried creating the Field "color_field" containing the values, using Hubl markup to create a variable such as {% set TextHoverColor = '{{module.color_field.color}}' %} and assigning this variable as value of a CSS property for the said element. The Hubl Markup I have written directly inside the module's Hubl+HTML area, while the assigning is done in a seperate Hubl+CSS file that is then linked to the module. But the desired effect is unfortunately still not achieved. Could you give me a suggestion on how this can be done ? Thank you in advance.

Re: Using Field to specifiy CSS attributes for Pseudo-classes

Indra — Mon, 19 Jul 2021 13:29:02 GMT

Hi @HaNguyen,

Did you check the documentation for the modules. You can use the 'require_css' for better handeling your css. Your css will need to be added to the 'Hubl+HTML' section.

When using the color field, it will return multiple values.

.color{ color: {{ module.color_field.color }}; opacity: {{ module.color_field.opacity }}; }

If you want to use the color for a background of just want to use the color and opacity, you can combine it like this.

{% set color = module.cta.overlay.color %} {% set opacity = module.cta.overlay.opacity %} {% set color_rgba = color|convert_rgb ~','~ opacity/100 %} .color{ color: rgba( {{ color_rgba }} ); }

So for your example, just change your css and don't forget to use 'require_css' for better handeling your css.

{% set color = module.cta.overlay.color %} {% set opacity = module.cta.overlay.opacity %} {% set color_rgba = color|convert_rgb ~','~ opacity/100 %} {% require_css %} <style type="text/css"> .color:hover{ color: rgba( {{ color_rgba }} ); } </style> {% end_require_css %}

If you are going to use this module multiple times on a page. Just add a unique 'class' or 'id' to your elements like this.

{% require_css %} <style type="text/css"> #{{ name }}:hover{ color: #00000; } </style> {% end_require_css %} <div id="{{ name }}"> Sample text </div>

Did this answered your question? If so, please mark as resolved. If not, please let me know.

Re: Using Field to specifiy CSS attributes for Pseudo-classes

HaNguyen — Mon, 19 Jul 2021 14:07:17 GMT

Thank you for the solution!