Streaming live at 10am (PST)

Styling a Java Script Widget


#1

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.

Thanks!


#2

Yes, you can add JS widgets, but it’s best to style those in the application or in the CSS of the script.

After its compiled, there’s not much you can do to (at least not effectively).

Do all the styling on the widget beforehand.


#3

Thanks for the Reply!

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.

The widget as it looks coming in:

How I would like the widget to look:

Thanks for any help!


#4

If the widget uses an iframe, you can’t style that. Perhaps provide us a share link?


#5

https://preview.webflow.com/preview/wp-test-site?utm_source=wp-test-site&preview=e64438af2fdc2d7ab8029e9e5cc05e39


#6

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.

e.g.:

<style>
.categoryHeadingSection {
    margin-top: 1.5em;
    margin-bottom: 3px;
    font-size: 1.4em;
    font-weight: bold;
}
#BDHRJobListings a {
    color: red;
}
#commondivjobalert input {
    color: black;
}
</style>