CODEWITHSUNDEEP
jqueryuser-interface
David
David

Reputation: 180

Overriding jQuery UI style on specific components

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>

Upvotes: 1

Views: 1826

Answers (2)

Suhail
Suhail

Reputation: 24

This may help you:

Create a new class. Don't edit present class it may be used elsewhere also. Best way is to create a new class:

.button_style{
  background:none !important;
  padding:5px !important;
 }

Make modification in css. Use css hack '!important'.

Upvotes: 1

DarthJDG
DarthJDG

Reputation: 16591

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.

Upvotes: 3

Related Questions