Is there a way to use my own custome button style in the jquery ui dialog widget? I have tried all possible ways, including some suggested on the site here, all to no avail... Any help would be greatly appreciated! Thanks!
2 Answers
Thats how I handled my custom buttons on jquery UI dialog box :
$('#dialog').dialog({
height: 300,
width: 600,
modal: true,
resizable: false,
create: function(event, ui) {
$("#done").click(function(event) {
$('#dialog').dialog('close');
})}
});
Where 'done' is ID of my button element and 'dialog' is id of my div acting as dialog box.
Comments
The simplest and easiest way to define your own style is to use the jQuery UI Themeroller to create a custom theme (or just modify an existing one). All jQuery UI widgets will use the theme you declare.
Edit: Demo of modified button style only.
4 Comments
Alex
Yeah, I used that but it still doesn't allow me to tweak the buttons only!
andyb
No, I guess the themeroller itself doesn't, but you could just style the button class itself. I have added an example fiddle.
Alex
Thanks, Andy. I'm afraid I still can't change things like the background color of the button, radius, etc...
andyb
No problem. You need to add
background:green !important; on the same button.ui-button rule. The problem you are seeing in this case is that the jQuery UI theme declares the color as part of the background rule, whereas your background-color (even with !important) is less important so the jQuery background was still taking precedence.