Hey @SD352,
don’t really know how Clean Pro is set up, but CSS works “from top-to-bottom”.
This means:
- if your theme got a main.css (which I assume it has), this will be loaded first
- if your theme got a theme-overrides.css (or similar naming), it will be loaded after the main.css
- if your theme got a module specific MODULE_NAME.css in the css folder, it may either be loaded in the main.css, individually via the corresponding module or is linked in the module sidebar, this will be loaded after them theme-overrides.css
- if your theme got CSS in the module.css (when opening the module in the Design manager) this will be loaded in the {{ standard_header_includes }} tag
- if your module got inline styles, they will most times override everything as they’re closest to the actual element.
Therefore, try finding the right place to put the code into, or - if it’s a theme module - put the css as inline styling into it (not recommended if you’re not familiar with the theme setup). It would look like this:
<div class="hero-title--shadow">
<h1 style="text-shadow: 0 3px 8px rgba(0,0,0,0.5)">
...
</h1>
</div>
Something else you can try (but shouldn’t really use) is something I call the sledgehammer method.
.hero-title--shadow h1 {
text-shadow: 0 3px 8px rgba(0,0,0,.5) !important;
}
!important tells the browser that regardless what came before or after, this element should overwrite them all. The biggest problem with using it is, that you might end up in an endless loop over putting !important everywhere and confusing the browser, and therefore negatively impacting page performance
best,
Anton
