How to use scope_css to target the widget container itself

Developer Support CMS Development
1

Hello!

I am using the Scope CSS tags to add the module ID to my CSS for my module to target that alone.

For example:

{% scope_css %}.btn {color:red;}{% end_scope_css %}

returns something like the following

#hs_cos_wrapper_module_124811719958 .btn {color:red;}

which is great, but I want to target the

#hs_cos_wrapper_module_124811719958

parent and not just the children of that element. Can I do with that scope_css. If I try something like

{% scope_css %} {color:red;}{% end_scope_css %}

It just errors out.

I can use the following as an alternative, but I’d like to keep everything under scope_css if possible.

<style>#hs_cos_wrapper_{{ name }} {text-align:left;}{% scope_css %} .btn {color:red;}{% end_scope_css %}</style>

2

Hi, @marenhogan :waving_hand: Thanks for your question and for including your code examples. Knowing what works and what doesn’t work is helpful for the community. My instinct is that your workaround is a good available option.

Let’s invite some community members to the conversation — hey @alyssamwilie @albertsg @LMeert, how would you tackle something like what @marenhogan is describing?

Thank you for taking a look! — Jaycee

3

Hello @marenhogan,
I think this cannot be achieved using scope_css. If you like to keep you all of your CSS code under scope_css you could also create your own wrapper inside of your custom module:

<div class="my-module" id="my_wrapper_{{ name }}"></div>

{% require_css %}
 <style>
 {% scope_css %}
 #my_wrapper_{{ name }} { color: red; }
 #my_wrapper_{{ name }} p { color: white; }
 {% end_scope_css %}
 </style>
{% end_require_css %}

I hope this helps!