Question

As much as I like themeRoller I would like to be able to manipulate and replace the css styling of some of my jQuery UI components, especially the buttons.

I’ve been successful at changing the font and size but I’m unable to change the background image and padding. I looked around in the theme css file in the hopes of finding something to overwrite, but nothing seemed to work.

Can someone give me some insight on how to get the achieve the code below correctly?:P

.CSS file

#create-user .ui-button
{
    background-image: none;
}

.xhtml file

<button id="create-user">Create</button>

Answer 1

Try the following to force it:

#create-user .ui-button
{
    background-image: none !important;
}

It might also be a better idea to manually edit the original CSS file generated by themeroller.

You can also try removing some classes after you called .button(). The button’s appearance is largely controlled by ui-state-default and ui-corner-all. Try removing those, see if your custom class starts working. It also adds ui-state-hover and maybe ui-state-active dynamically.

All in all, it’s probably easier not to use a jQuery UI button, if it’s just a few special cases, try styling it yourself.