Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / themes / index.html
diff --git a/examples/themes/index.html b/examples/themes/index.html
new file mode 100644 (file)
index 0000000..11905a3
--- /dev/null
@@ -0,0 +1,98 @@
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Ext JS Themes Example</title>
+
+       <!-- Standard includes -->
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+    <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-blue.css" /> 
+    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
+    <script type="text/javascript" src="../../ext-all-debug.js"></script>
+
+       <!-- Theme includes -->
+    <link rel="stylesheet" type="text/css" title="blue"      href="../../resources/css/xtheme-blue.css" /> 
+    <link rel="stylesheet" type="text/css" title="gray"      href="../../resources/css/xtheme-gray.css" />
+    <link rel="stylesheet" type="text/css" title="access"    href="../../resources/css/xtheme-access.css" />
+    <link rel="stylesheet" type="text/css" title="yourtheme" href="../../resources/css/yourtheme.css" />
+    <!-- 
+        By default, yourtheme.css is an exact copy of x-themeblue.css. 
+        Customize your theme by editing yourtheme.css and customize your 
+        own images in the images/yourtheme/ directory. 
+    -->
+
+       <script type="text/javascript" src="themes.js"></script>
+       <script type="text/javascript" src="styleswitcher.js"></script>
+            
+    <style type="text/css">
+        body {
+            font-family: 'Helvetica Neue',tahoma,helvetica,sans-serif;
+            font-size: 12px;
+        }
+        
+        h1 a:link, h1 a:visited {
+            color: #046BCA;
+        }
+        
+        h1 a:hover, h1 a:focus, h1 a:active {
+            color: #1C417C;
+        }
+        
+        div#header {
+            height: 65px;
+            width: 1090px;
+            padding: 25px 0 10px 0;
+            margin: 0 50px;
+        }
+        div#header h1 {
+            font-family: MyriadPro-Semibold, 'Myriad Pro Semibold', 'Myriad Pro', 'Trebuchet MS', Tahoma, arial, sans-serif;
+            font-size: 250%;
+        }
+           .x-viewport body {
+               overflow: auto;
+        }
+        form#styleswitcher {
+            background-color: #f3f3f3;
+            background-color: rgba(243,243,243,.333);
+            border: 1px solid #ddd;
+            border-color: rgba(221,221,221,.333);
+            border-radius:         8px;
+            -moz-border-radius:    8px;
+            -ms-border-radius:     8px;
+            -o-border-radius:      8px;
+            -webkit-border-radius: 8px;
+            
+            float: right;
+            padding: 8px 10px;
+            
+            width: auto;
+        }
+        form#styleswitcher select {
+            font-size: 16px;
+            line-height: 16px;
+        }
+        div#header h1 span {
+            color: inherit;
+            font-family: 'Helvetica Neue',tahoma,helvetica,verdana, sans-serif;
+            font-size: 12px;
+            font-weight: normal;
+            line-height: 16px;
+            padding-left: 25px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="header">
+        <form id="styleswitcher">
+            <label for="styleswitcher_select">Choose Theme: </label>
+            <select name="styleswitcher_select" id="styleswitcher_select">
+                <option value="blue" selected="true">Blue Theme</option>
+                <option value="gray">Gray Theme</option>
+                <option value="access">Accessibility Theme</option>
+                <option value="yourtheme">Your Theme</option>
+            </select>
+        </form>
+        <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.extjs.com/products/js/themes.php">Ext Themes</a>, or, your own custom themes.</span></h1>
+    </div>
+</body>
+</html>
\ No newline at end of file