| 1 | <!doctype html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|---|
| 5 | <title>Spectrum - The No Hassle jQuery Colorpicker</title>
|
|---|
| 6 |
|
|---|
| 7 | <meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill">
|
|---|
| 8 | <meta name="author" content="Brian Grinstead and Spectrum contributors">
|
|---|
| 9 |
|
|---|
| 10 | <link rel="stylesheet" type="text/css" href="../spectrum.css">
|
|---|
| 11 | <link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
|
|---|
| 12 | <link rel="stylesheet" type="text/css" href="../docs/docs.css">
|
|---|
| 13 | <script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
|
|---|
| 14 | <script type="text/javascript" src="../spectrum.js"></script>
|
|---|
| 15 |
|
|---|
| 16 |
|
|---|
| 17 | <link rel="stylesheet" type="text/css" href="sp-dark.css">
|
|---|
| 18 |
|
|---|
| 19 | </head>
|
|---|
| 20 | <body>
|
|---|
| 21 | <div id='header'>
|
|---|
| 22 | <h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
|
|---|
| 23 | <div id='links'>
|
|---|
| 24 | View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
|
|---|
| 25 | Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
|
|---|
| 26 | </div>
|
|---|
| 27 | <br style='clear:both;' />
|
|---|
| 28 | </div>
|
|---|
| 29 |
|
|---|
| 30 | <div class="container">
|
|---|
| 31 | <h2>Themes</h2>
|
|---|
| 32 |
|
|---|
| 33 | <div class="alert">
|
|---|
| 34 | This page is in development.
|
|---|
| 35 | </div>
|
|---|
| 36 |
|
|---|
| 37 | <div id="theme-gallery">
|
|---|
| 38 | <h3>Gallery of existing themes</h3>
|
|---|
| 39 |
|
|---|
| 40 | <div class="theme" id="sp-light">
|
|---|
| 41 | <h4>sp-light</h4>
|
|---|
| 42 | <p>This is the default theme that you know and love.</p>
|
|---|
| 43 |
|
|---|
| 44 | <div class='example'>
|
|---|
| 45 | <input type='text' />
|
|---|
| 46 | </div>
|
|---|
| 47 | </div>
|
|---|
| 48 |
|
|---|
| 49 | <div class="theme" id="sp-dark">
|
|---|
| 50 | <h4>sp-dark</h4>
|
|---|
| 51 | <p>Similar to sp-light, only ... darker</p>
|
|---|
| 52 |
|
|---|
| 53 | <div class='example'>
|
|---|
| 54 | <input type='text' />
|
|---|
| 55 | </div>
|
|---|
| 56 | </div>
|
|---|
| 57 | </div>
|
|---|
| 58 |
|
|---|
| 59 | <div id="theme-instructions">
|
|---|
| 60 | <h3>Instructions for building themes</h3>
|
|---|
| 61 | <p>
|
|---|
| 62 | You can change most any property on spectrum using CSS. Anything from borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS.
|
|---|
| 63 | </p>
|
|---|
| 64 | <h4>Playing friendly with other themes</h4>
|
|---|
| 65 | <p>
|
|---|
| 66 | Please prefix all of your rules with <code>.theme-name</code>. The exception is for changes to <code>.sp-container</code> and <code>.sp-replacer</code>, which will have your theme name applied.
|
|---|
| 67 | </p>
|
|---|
| 68 | <p>
|
|---|
| 69 | See a basic scaffold for a super simple theme. See <a href='sp-dark.css'>sp-dark.css</a> for a slightly more advanced example.
|
|---|
| 70 | </p>
|
|---|
| 71 | <pre>
|
|---|
| 72 | .theme-name.sp-container {
|
|---|
| 73 |
|
|---|
| 74 | }
|
|---|
| 75 | .theme-name.sp-replacer {
|
|---|
| 76 |
|
|---|
| 77 | }
|
|---|
| 78 | .theme-name .sp-preview {
|
|---|
| 79 |
|
|---|
| 80 | }
|
|---|
| 81 | </pre>
|
|---|
| 82 | <h3>Submitting a theme</h3>
|
|---|
| 83 | <p>
|
|---|
| 84 | If you have made some customizations that you would like to share, please open a <a href="http://bgrins.github.com/spectrum/pulls">pull request</a> with the theme file inside of this themes/ directory in the project. Or <a href="http://bgrins.github.com/spectrum/issues">open an issue</a> with a link to the theme.
|
|---|
| 85 | </p>
|
|---|
| 86 | </div>
|
|---|
| 87 | </div>
|
|---|
| 88 |
|
|---|
| 89 |
|
|---|
| 90 | <script>
|
|---|
| 91 | $("#sp-light input").spectrum({
|
|---|
| 92 | theme: "sp-light"
|
|---|
| 93 | });
|
|---|
| 94 | $("#sp-dark input").spectrum({
|
|---|
| 95 | theme: "sp-dark"
|
|---|
| 96 | });
|
|---|
| 97 | </script>
|
|---|
| 98 | <script type="text/javascript" src="../docs/prettify.js"></script>
|
|---|
| 99 | <script type="text/javascript">
|
|---|
| 100 |
|
|---|
| 101 | var _gaq = _gaq || [];
|
|---|
| 102 | _gaq.push(['_setAccount', 'UA-8259845-4']);
|
|---|
| 103 | _gaq.push(['_trackPageview']);
|
|---|
| 104 |
|
|---|
| 105 | (function() {
|
|---|
| 106 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|---|
| 107 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|---|
| 108 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|---|
| 109 | })();
|
|---|
| 110 |
|
|---|
| 111 | </script>
|
|---|
| 112 | </body>
|
|---|
| 113 | </html>
|
|---|
