Possible to pull in Widget ID in module editor? Styles tab edits applying to all modules on page

[marenhogan]

I am trying to use the Styles Tab, specifically for spacing, to allow the user to add padding and margin to the module element itself. However, when the user changes the styles for one module, it is changing the style for all of those same modules on that page. 

Code setup: 

Output: 

{% require_css %}
<style>
  {% if module.style.spacing_field %}
  .body-container-wrapper section.u3m-alternating-content {
    {{ module.style.spacing_field.css }}
  }
  {% endif %}
  }
</style>
{% end_require_css %}

Problem:

This works great if I have one .u3m-alternating-content module (class) on the page, but if I'm using the module in multiple places on the page with unique spacing, there is redundant, conflicting CSS output. 

Is there any way to pull in the custom ID generated by Hubspot when a module is added? Ex. #hs_cos_wrapper_widget_1610054290926

If not, is there any way to otherwise target this specific module using the Styles tab, so it doesn't apply to all of the other modules of the same class? 

Thanks!

[webdew]

Hi @marenhogan ,

Wrap up your section with .{{name}} and add prefix to your css classes as well. See demo code

<div class=".{{name}}">
Add your code here...
</div>

{% require_css %}
<style>
{% if module.style.spacing_field %}
.{{name}} <your selectors>{
{{ module.style.spacing_field.css }}
}
{% endif %}
</style>
{% end_require_css %}

*Note that .{{name}} will automatically return a unique name to your wrapper.
Hope this will solve your issue.

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[Brownstephen101 · Accepted solution]

Hello @marenhogan 
Add the {{ name }} variable to your module's outermost wrapper and then reference it in your css.

For example:

{% require_css %}
<style>
  {% if module.style.spacing_field %}
  #{{ name }} section.u3m-alternating-content {
    {{ module.style.spacing_field.css }}
  }
  {% endif %}
</style>
{% end_require_css %}

Your html would look like this:

<div id="{{ name }}">
/* Module content */
</div>

Alternatively, you could use {% scope_css %} instead of {% require_css %} if your portal has access to it, although I've noticed a couple bugs with scope_css, so I'd stick to the {{ name }} variable for now.

Hope that helps

[marenhogan]

EXACTLY what I was looking for. Thanks!