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?
+1
A:
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.
Cfreak
2010-03-25 04:58:20
As am example, select "Cupertino" as a theme from the top right menu. The theme applies to the dialog but then I am unable to find how to apply that to my own code or find the css that it is applying
stormist
2010-03-25 05:04:28
+1
A:
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" %>" />
Dustin Laine
2010-03-25 06:57:56
That makes sense, how would I apply the "Cupertino" theme to my div? They clearly have it as an example on that page (by clicking on the top right submenu and selecting cupertino) but I can't seem to find it anywhere.
stormist
2010-03-25 18:18:20
Download the CUpertino theme from http://jqueryui.com/themeroller/. Grab those files and link them, just like I have shown replacing the 'ui-darkenss' with 'cupertino' and it will just work.
Dustin Laine
2010-03-25 18:53:07
+1
A:
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.
Nick Craver
2010-03-25 10:44:04