La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
Hello everyone, I have a custom module created, using the hubspot Form module, now what I would like to do, is give the option of selecting the background color of the submit button in the form, I've tried adding a color selector to the module, but it seems I am not able to use this variable withing the module CSS part.
janv. 24, 20229:57 AM - modifié janv. 24, 202210:02 AM
Contributeur de premier rang | Partenaire solutions Elite
Submit form style editable
Résolue
@mchomicki Since you can't access module variables in the CSS, you will need to put the CSS in the HTML of the module, wrapped in a {% require_css %} wrapper, for example:
This is the CSS required for a color picker named "button_color" if you want to include Opacity.
<div id="{{ name }}" class="module-html">
/* All your module html goes here */
</div>
{% require_css%}
<style>
#{{ name }} .form .hs-button {
border-color: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
background: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
}
</style>
{% end_require_css %}
Note: You will also want to use {{ name }} as the ID of the module wrapper and then reference that in your css so that if they choose different options for multiple modules on the same page, the options apply correctly to the corresponding module.
janv. 24, 20229:57 AM - modifié janv. 24, 202210:02 AM
Contributeur de premier rang | Partenaire solutions Elite
Submit form style editable
Résolue
@mchomicki Since you can't access module variables in the CSS, you will need to put the CSS in the HTML of the module, wrapped in a {% require_css %} wrapper, for example:
This is the CSS required for a color picker named "button_color" if you want to include Opacity.
<div id="{{ name }}" class="module-html">
/* All your module html goes here */
</div>
{% require_css%}
<style>
#{{ name }} .form .hs-button {
border-color: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
background: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
}
</style>
{% end_require_css %}
Note: You will also want to use {{ name }} as the ID of the module wrapper and then reference that in your css so that if they choose different options for multiple modules on the same page, the options apply correctly to the corresponding module.
Yes, tired that already, but apparently it is not possible to get the value from the color picker and use it in the CSS, but only on the hubl + HTML section, and the value would come out as empty, as you cans see in the pic, trying to find a way around it