Question

I was just wondering if anyone had any experience with more customized/specified theme rolling?

I am just getting into jquery UI and I’d like to, for example, roll a theme where the dialog styles differ from the rest of the theme.

Thanks for any guidance.

Answer 1

The dialogs use the same css styles as the other jQuery UI elements…you don’t need any javascript to look at this, just open up one of the generated stylesheets to see. Here’s the default one hosted on google.

For a list of shared styles look here.

You could customize a single widget via some style rules, for example dialog is wrapped in .ui-dialog. If you wanted to customize for example the buttons, provide a style for:
.ui-dialog .ui-button instead of just .ui-button. Using this sort of declaration, you should be able to override anything inside a dialog container.

Some quick examples you may want to override styles on:

.ui-dialog .ui-widget-header //Header BG
.ui-dialog .ui-widget-content //Content Area
.ui-dialog .ui-corner-all //Corners
.ui-dialog .ui-button //Buttons