With jquery dialog boxes how do you apply a theme?

Question

Example: http://jqueryui.com/demos/dialog/#modal-confirmation

The example shown allows you to view the source and even has a theme selector at the top right. But how do you apply a theme to your own code?

Answer 1

You need to include the CSS files that were part of the theme. For instance I want to theme the jQuery dialog with the ui-darkness theme:

<link type="text/css" rel="stylesheet" href="jQuery-theme-ui-darkness/jquery-ui.css" %>" />
<link type="text/css" rel="stylesheet" href="jQuery-theme-ui-darkness/ui.dialog.css" %>" />

Answer 2

Check out the "Theming" tab on that linked page. The plugin defines several classes for you. You just need to apply CSS to those classes.

Answer 3

The theming framework is just a series of CSS classes that are consistently used for the most part.

To use in your own code, just apply the classes to the right elements, and they'll be themed via CSS. To get started, here's a list of those classes and what they're used for.