Using Field to specifiy CSS attributes for Pseudo-classes

SOLVE
HaNguyen
Participant

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. 

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

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.

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

0 Upvotes
2 Replies 2
Indra
Solution
Top Contributor | Diamond Partner

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.

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

0 Upvotes
HaNguyen
Participant

Thank you for the solution!

0 Upvotes