Hello, I have a third party JS widget that I am having trouble styling. I created a class in Webflow with the same name as the class used in the widget:
class=“categoryHeadingSection”
The only problem is that Webflow conforms the class name to lower case, while the widgets class name uses camel case. If I inspect the widget in Chrome and change the class name from:
class=“categoryHeadingSection” to class=“categoryheadingsection”
The correct styling appears in the browser. I am wondering if anybody has a work around in Webflow for this? The site is hosted using the Webflow CMS hosting plan.
Unfortunately I don’t have much control over the widget. It was created by an HR company as a way to manage job posting on the site. After reaching out to them their response was: you can style it in wordpress.
The main problem is the widget is hard to read. The heading are the same size as the postings, so all I am trying to do is add a little padding and adjust one font. Luckily the “job postings” are links, and by adjusting the “all links” tag I was able to change the color.
Good news is that it’s not an iframe, bad news as you have already figured out is that you can’t use Webflow designer to style this as the classnames are mixed-case.
What you can do instead is figure out the structure & class names using the browser developer tools and then insert custom CSS styles via embed code or Page Footer Code.