jqueryjquery-uijquery-ui-theme

Appy different themes to jQuery-dialog?


I have a page with the following jQuery scripts/theme included. The default theme I want is 'ui-lightness' for all applicable elements, but I would like the jQuery dialog boxes to be styled according to the 'cupertino' theme. How would I implement this requirement in my page?

<!doctype html>
<html>
 <head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
  <link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

Solution

  • If you look at a dialog element. Look at the classes that are added when you create one. Then look in the respective css files and copy the cupertino theme classes into the lightness css file replacing the classes in the lightness file. It's all styled with css and all the classes are named the same (I believe) so it will work fine if you just make the semi-custom css file.