topic Re: Global CSS in Clean Pro in CMS Development

Global CSS in Clean Pro

SD352 — Thu, 13 Nov 2025 17:42:14 GMT

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

Re: Global CSS in Clean Pro

BarryGrennan — Thu, 13 Nov 2025 18:26:42 GMT

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

Re: Global CSS in Clean Pro

SD352 — Thu, 13 Nov 2025 18:38:07 GMT

My website isn't live yet. 😞

Re: Global CSS in Clean Pro

BarryGrennan — Thu, 13 Nov 2025 18:54:10 GMT

@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

Re: Global CSS in Clean Pro

SD352 — Thu, 13 Nov 2025 19:02:45 GMT

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

Re: Global CSS in Clean Pro

Anton — Fri, 14 Nov 2025 07:10:35 GMT

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:

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

Re: Global CSS in Clean Pro

Jaycee_Lewis — Fri, 14 Nov 2025 15:55:54 GMT

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

Re: Global CSS in Clean Pro

amjadkhatri — Tue, 18 Nov 2025 06:15:57 GMT

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.

Re: Global CSS in Clean Pro

SD352 — Tue, 18 Nov 2025 15:06:44 GMT

Thank you all!