Global CSS in Clean Pro

[SD352]

I use Clean Pro in HubSpot.

I am trying to add the below CSS globally to my website. 

• The goal (adding text-shadow to the Hero H1).

• The working CSS snippet I am trying to use:

  /* Applies text-shadow to H1s inside any module tagged with hero-title--shadow */
  .hero-title--shadow h1 {
    text-shadow: 0 3px 8px rgba(0,0,0,.5);
  }

• The link to my stylesheet and the page URL where I am testing.

https://app.hubspot.com/pages/6824522/editor/199666992807/content

https://app.hubspot.com/pages/6824522/editor/194709021808/content

• My observation is that the class is applied, but the style isn't showing.

Any help would be much appreciated.

Thanks,

Sam

[SD352]

Thank you all!

[MuhammadAmjad]

Hey @SD352, the simplest fix is to add !important to your CSS (as Anton suggested). In Clean Pro, go to Design Manager → find "theme-overrides.css" or your main CSS file → add this: .hero-title--shadow h1 { text-shadow: 0 3px 8px rgba(0,0,0,.5) !important; } This forces the style to override any conflicting CSS. If you're still stuck, share a preview link (click Preview → copy URL from address bar) so we can see what's blocking it.

---

Did my answer help? Please click "Mark as solution" — it helps others and means a lot to me!

I use my real experience, community knowledge, and expert tools (including AI when needed) to give the most accurate and human responses.

Muhammad Amjad Senior Consultant • HubSpot + Web Automation Expert Need HubSpot Help? Send Me a DM Connect with me On LinkedIn  Specialties: HubSpot CRM Setup & Automation Custom Workflows & Email Marketing API Integrations & Webhooks WordPress + Laravel Development

Available for consulting, troubleshooting & custom HubSpot solutions.

[Anton · Accepted solution]

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

[SD352]

 Sorry, I know little to nothing about coding and CSS. 

Is this the CSS file?

hero-title--shadow

http://metroymcas-org.sandbox.hs-sites.com/wey?hs_preview=QQZYUnUH-194709021808

[Jaycee_Lewis]

Thank you @Anton @BarryGrennan for stepping in and sharing your expertise! — Jaycee

[BarryGrennan]

Hi @SD352,

We can't view those links, only someone logged into your portal can.

Please link to a live page and tell us the name of the css file you're adding your code to.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[SD352]

My website isn't live yet. 😞

[BarryGrennan]

@SD352 a preview link should be visible to outsiders too. On your edit page click preview and then preview in new window and copy the preview URL from the address bar there on the full page preview.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn