Sep 15, 2020 12:31 PM
The theme styles in HubSpot don't give me the ability to style the subscription form callout box to our brand standards, so I'm looking to target the style changes using CSS. I'm able to target some things with CSS (for example, I can change the button color) but other changes I've made don't work. I dug into this and saw that it is because HubSpot generates a stylesheet on the page with a bunch of !important tags that I can't override. Has anyone tried to work around this and been successful, or know how I can override those important tags?
Sep 15, 2020 2:00 PM - edited Sep 15, 2020 2:05 PM
could you provide a preview link pelase?
Which module are you using exactly? is it from the theme/template(if so - which one is it), a defualt HubSpot one or is it maybe developed by yourself/your developers?
I think one of the safest methods would be to create a new CSS file(with the sledgehammer method 😅 "!important") and let it load as the last CSS file. This should overwrite the other "!important"s but it will most likely affect the pagespeed simultaneously.
My personal approach would be to write a completly new custom module with the style elements the customer/I need but if you haven't worked with custom modules before or aren't familiar with HTML+Hubl and CSS it can be very time consuming.
|Did my post help answer your query? Help the Community by marking it as a solution|
Sep 16, 2020 10:12 AM
We reverted styling back, all I was able to do was make the button the same as the background color.
So what I did was create a CSS file specific for that subscription box, and I did use !important for everything (as much as it pained me), but all of my changes were blocked by HubSpot's generated !important tags. It wasn't able to overwrite those.