I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
views:
351answers:
3
A:
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
karim79
2010-03-08 13:06:21
While this will usually work, I prefer to use CSS for look and feel and javascript for behavior as much as possible. It should be possible to simply restyle aspects of individual elements with CSS alone. Using javascript to do it unnecessarily couples the look of the page to the use of javascript, IMO.
tvanfosson
2010-03-08 13:19:30
I tries this by override the ui-button-text class by doing:$("#SaveButton").removeClass("ui-button-text").addClass("ui-button-text-save");but this does'nt work. Having nothing in removeClass() removes more css than required I think?
Mark Redman
2010-03-08 13:47:07
ok, I managed to swap out a class (was a css ordering issue)
Mark Redman
2010-03-08 14:12:55
Its seems that one has to change a few classes? not sure how to override a bunch of classes without a lot more styles or code?
Mark Redman
2010-03-08 14:14:34
Marking this one as the answer since I needed to add some code: Just added a class to the button to override some styles, no need to remove any classes.
Mark Redman
2010-03-08 15:08:33
A:
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.
Mark Schultheiss
2010-03-08 13:10:09
You need to also consider the specificity of the selectors. I haven't looked in depth at the latest UI CSS, but my experience with 1.7 is that you need to replicate the UI selector structure used in order to guarantee that your overrides will apply in all circumstances.
tvanfosson
2010-03-08 13:21:35
@ tvanfosson, good point, making the perhaps erronious assumption that the css selector such as button.mybuttonclass is universal knowlege on my part is not so wonderful :).
Mark Schultheiss
2010-03-08 13:30:37
+1
A:
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
tvanfosson
2010-03-08 13:16:34
@tvanfosson: This works and is great, now what I didnt include in my question, which I should have, is that this needs to be switchable. Eg: highlighting a next or save buttons depending on some other actions. I guess some code (jquery) is required.
Mark Redman
2010-03-08 13:42:25
@Mark - if the changes aren't merely due to hovering over the button, which you can handle with CSS then, yes, take a look at @Karim's answer and use remove/addClass in your jQuery to update the class associated with the element based on the user's behavior.
tvanfosson
2010-03-08 14:18:31