-1

I've added a third party widget to a webpage I manage in Hubspot, and it is changing the other CSS on the page. Font family, size, and colors have all changed without me editing any CSS. I haven't found a solution that works yet. I believe the widget is adding a style tag to the body of my page, but I don't have a way to remove it. I'd appreciate any suggestions or direction toward an answer.

The widget is added with a div and script tag from the 3rd party like this:

<div id="ss-custom-reviews-widget-r"></div> 
<script id="ss-custom-reviews-widget-s" src="https://12345.cloudfront.net/custom_script.js" 
ss-custom-reviews-widget-api-key="12345" widget-key="{{ tableRow[0].expID }}" 
type='text/javascript'> </script>

I'm unable to edit the css or js files for the widget.

mdev
  • 3
  • 2

2 Answers2

0

It depends on how the widget/library is added. If it is added via a link or script tag in the HTML markup, some basic compiler line-reading behaviours can work, for example

<head>
    <link rel="stylesheet" href="your-widget.css">
    <link rel="stylesheet" href="your-custom.css">
</head>

But you should provide a screenshot and detail of how the widget is added.

Kashan Ahmad
  • 165
  • 5
  • Thank you - I edited my question to include what the script looks like. It appears to be adding a style tag to the body of my page. – mdev Aug 31 '21 at 21:24
0

Does the widget load its own CSS file? Sounds like it is and it's overriding your styles. To fix it you can modify the widgets CSS sheet if possible. If not add a higher specificity to your style sheet.

Manny
  • 94
  • 4
  • Thank you - I did try adding "!important" to my main css sheet, but that wasn't sufficient. I've edited my question to include more information. – mdev Aug 31 '21 at 21:25
  • Are you setting the font family/size etc through the HTML or body tag? Try defining it by class or id. – Manny Aug 31 '21 at 21:36
  • In the main css file everything is set using classes. In the browser all the "problem css" that is there now due to the widget says that it's inherited from body. I tried adding "!important" to the items in the main css file classes, but I can try changing things over to id's to see if that works. – mdev Aug 31 '21 at 22:02
  • If your internal style sheet is still being overwritten by the external ,an inline style would take precedence over both. Please share your solution when you figure it out. – Manny Sep 01 '21 at 00:45
  • I'll have to try more using id's, but for now it looks like the inline style solution is working. Thank you so much for all the help! – mdev Sep 01 '21 at 17:19