Is there an easy way to change the color of a jQuery UI Button? Modifying the css is discouraged from the documentation and doing so anyway is tricky. They say, "We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain." I understand how to change the theme, but then how do you get different colored buttons on the same page?
Add a comment
|
4 Answers
I just did this: create a new theme with the new colour button; copy the ..hard.. and ..soft... gradient files from the new theme images folder; rename them so as to not confuse them with the main theme; and finally add the style to the button. This caters for the gradient and the colour...
I just tried this for a green button:
a.green-button
{
background: url(Images/GreenBGHardGrad.png) repeat-x center;
border: 1px solid #132b14;
color:#FFFFFF;
}
a.green-button:hover
{
background: url(Images/GreenBGSoftGrad.png) repeat-x center;
border: 1px solid #132b14;
color:#FFFFFF;
}
a.green-button:active
{
background-color:#FFFFFF;
border: 1px solid #132b14;
color:#132b14;
}
2 Comments
at.
I did something along these lines, but used css gradient backgrounds instead. I should've updated the question with my solution... instead I'll credit you with the answer.
user1517108
I had also experimented with these solutions earlier... and personally i preferred the above answer rather than gradients. Primarily because gradient support is not uniform across browsers. Moreover You can custom the same background texture with the above solution whereas with gradients you may not be able to get the same texture. Drawback is that you are accessing another image element - but if you are using jqueryui, you are already accessing number of images - 1 more shouldnt make much diff.
Simplest way would be to add a class to your buttons (for different colors) and then have some css that overwrites the jquery-ui css.
Example
var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();
Css
.ui-button.redButton {
background-color: red;
}
.ui-button.greenButton {
background-color: green;
}
3 Comments
at.
setting the background-color to red doesn't actually change the button color
mu is too short
The button backgrounds are images rather than simple colors, you'd need to change
background-image and possibly add !important to force the issue.
ContextSwitch
you can just put
background:red. jquery uses the background element to set the image, so using it to set the color will replace the imageTry this:
HTML:
<button type="button" id="change_color"> change button </button>
jQuery:
$("#change_color").css("background","green");
Comments
There are two (three?) types of JQueryUI buttons ; Basically you make a button like this:
<span class="myButtons">Click here</span>
Then you tell JQueryUI that it's a button:
$('span.myButtons').button()
Thus producing this markup:
<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>
And you can style this the "classic" way: (.myButtons {}, .myButtons:hover {} etc.)
But !
If your "button" is one of checkboxradio or controlgroup then it's another markup:
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label class"danger" for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
Then if you apply the method:
$( "input" ).checkboxradio();
You get this generated markup (the 2nd pseudo button, "Paris" is checked/clicked):
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label>
<input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
<label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
<input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
<label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label>
<input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
</fieldset>
And then those classes can (must?) be used to style the pseudo "buttons":
.ui-visual-focus {
box-shadow: none;
}
label.ui-checkboxradio.ui-state-default {
color: black;
background-color: teal;
}
label.ui-checkboxradio.danger.ui-state-active {
background-color: red;
}
Comments
