CMS Development

HaNguyen
Participant

Using Field to specifiy CSS attributes for Pseudo-classes

SOLVE

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. 

0 Upvotes
1 Accepted solution
Indra
Solution
Guide | Elite Partner
Guide | Elite Partner

Using Field to specifiy CSS attributes for Pseudo-classes

SOLVE

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.

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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
Guide | Elite Partner
Guide | Elite Partner

Using Field to specifiy CSS attributes for Pseudo-classes

SOLVE

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.

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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

Using Field to specifiy CSS attributes for Pseudo-classes

SOLVE

Thank you for the solution!

0 Upvotes