Easy way to overwrite basic jQuery-UI css?

Question

I feel like this is a silly question but I always find that modifying certain CSS attributes to be a hassle when working with jQuery. Let's say I define an element as a jQuery-UI object (like autocomplete or the datepicker) how do I go about modifying the CSS without having to go on the UI site and building my own theme?

For example, I find that the default font-size of the calendar to be pretty big so I often have to find the containing div created by jQuery and then add a font-size: 14px !important; if I want the style to be applied or else it gets trumped by the jQuery definition (since it's a lot more selective).

Is the solution making my rules more selective or am I missing something really obvious?

I sympathize. I honestly respect jQuery UI but I think it's a really bad solution for a lot of sites exactly because of the layout it imposes. What I've done is just taken the CSS they gave me and freely modified it. A lot. I really don't want my site to look like a "jQuery UI site" anyway, and I have no regrets :-) — Pointy
– Pointy, Commented Jul 20, 2010 at 14:20

ScottS · Accepted Answer · 2010-07-20 14:35:59Z

10

I have not used JQuery-UI, but a quick look at their documentation seems to indicate that a lot of styling should be simple to override. This page http://jqueryui.com/docs/Theming/API talks about your particular example of font-size, stating that the .ui-widget class controls the font-size for a particular widget. So it seems like for you to get your font size, you would just need to have some css that does this:

#ui-datepicker-div.ui-widget {font-size: 14px}

Hope that helps.

answered Jul 20, 2010 at 14:35

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gazillion Over a year ago

Wow great link, thanks! I always looked in the css that comes with the download and it always seems like they have a mile-long selector so I figured it was so much more complicated than this :)

Sz. Over a year ago

The page linked above has gone now (in 2014), try here: api.jqueryui.com/theming/css-framework

Collectives™ on Stack Overflow

Easy way to overwrite basic jQuery-UI css?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related