Question

I’m using jQuery UI to style a site. What I want to do is add another button type that stands out more than the ‘normal’ one. So for all buttons like form submit etc. I want to use the ‘default’ style of the theme, but I want to make a new class of buttons that has a different color and is bigger.

Ideally I want to not change the jQuery CSS & js I have. I looked at the generated CSS and it looks like I’d have to copy a lot of stuff to put in my second class, and then I’d somehow have to apply all those classes to the elements I want to style in the second button style.

Is there a way to easily add widget styles to jQuery UI, ‘inheriting’ from existing widget styles as it were, and just overriding some attributes? Thanks.

Answer 1

You have the ThemeRoller for jqueryUI where you can design your own custom theme. This is the most simple way.

Otherwise if I want to use a custom button instead of what comes with jqueryUI what I do is to pick the default jquery button style (let’s say the class is .ui-button) and create a higher specified selector and change just the settings I need to be different (usually background image, paddings, borders – you don’t want to change the layout related css as it can mess your widgets).

Something like:

.ui-button {default jquery css style}
.my-custom-form .ui-button {my custom css style}

and it will override your style. All you need to take care is that your selector is stronger than the one in jqueryUI css file. You can put it in your .css if having it in default css looks to messy to you. I usually have a div that is wrapping my input field or a button container and add a custom id or class to it and use that class/id to style my button.