CMS Development

marenhogan
Contributor | Elite Partner
Contributor | Elite Partner

How to use scope_css to target the widget container itself

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>
0 Upvotes
2 Replies 2
Gracjan
Participant

How to use scope_css to target the widget container itself

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! 

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

How to use scope_css to target the widget container itself

Hi, @marenhogan 👋 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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot