title: Styling jQuery UI Dialog Buttons
body: <p>I've been trying to style a jQuery UI dialog for hours, and am going around in circles.  I am able to get my desired look by manually adding buttons to the dialog. See the following link for a working example. <a href="http://tapmeister.com/test/dialog/index.html" rel="nofollow">This Works</a></p>
  
  <p>Now, I want to do it the right way and add buttons per the jQuery UI manual. There are about a billion classes which are automatically added to the buttons, so I remove these factory classes, and then add a couple of custom classes.</p>
  
  <pre><code>$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class');
  ...
  buttons     : [
  {text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}},
  {text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}}
  ]
  </code></pre>
  
  <p>See the following link for my fail attempt <a href="http://tapmeister.com/test/dialog/index2.html" rel="nofollow">This doesn't quite work</a></p>
  
  <p>First of all, the buttons don't show the color image.  Then I click anywhere on the dialog, and the image appears on the button.  If the dialog is closed then opened, the dialog becomes taller.  On top of that, the buttons are squished together, but I probably can figure that out.</p>
  
  <p>Please help me find my error of my ways!</p>