How does one integrate javascript controls into an existing css site?

Question

This might be a basic CSS question: I have a site designed with well-defined CSS themes. I'm adding some controls (from jquery), but they have the style of their designers, not my site's. What is the easiest way (least amount of work) to make the inserted controls use the site's css rather than the styles of the control? Is there an easy way to map one set of classes/ids onto another? Or am I missing something basic about css?

Answer 1

Most common way is to inspect the DOM structure of the controls you are adding, and see if you can use the classes applied to style it the way you want, typically be overriding the CSS selectors in place for the control, or by writing CSS for the control DOM structure from scratch.

Answer 2

You can try to "map" things by defining your own widgets and the external ones at the same time as much as possible:

div.my_widget,
div.external_widget

{ border: 1px blue solid; }

How successful that can be depends heavily on your site's and the controls' structure.

As a general rule, rather change your own stylesheets to work with the control, instead of changing the control to work with your stylesheet. That way, you can easily integrate new versions of the control.

Answer 3

I'm assuming you're using jQuery UI? If so, they have a ThemeRoller.