Twitter Bootstrap - Color Picker
css, html, jquery, twitter-bootstrap
Solution
Reset the image paths of `alpha.png`, `hue.png` and `saturation.png` in `colorpicker.css` to the folder where you have stored them.
.colorpicker-hue { background-image: url(your/path/hue.png) };
Problem
I want to integrate a color picker in my site. However, I integrated: ``` <link href="css/colorpicker.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.js"></script> <script src="js/jquery.js"></script> <!--Color Picker --> <script src="js/bootstrap-colorpicker.js"></script> <script> $(function(){ window.prettyPrint && prettyPrint() $('#cp1').colorpicker({ format: 'hex' }); $('#cp2').colorpicker(); $('#cp3').colorpicker(); var bodyStyle = $('body')[0].style; $('#cp4').colorpicker().on('changeColor', function(ev){ bodyStyle.backgroundColor = ev.color.toHex(); }); }); </script> ``` and the colorpicker component: ``` <div class="control-group"> <label class="control-label">Pick the color of your product</label> <div class="controls"> <div id="cp3" class="input-append color" data-color-format="rgb" data-color="rgb(255, 146, 180)"> <input class="span2" type="text" readonly="" value=""> <span class="add-on"> <i style="background-color: rgb(255, 146, 180)"></i> </span> </div> </div> </div> ``` However, when I call my site the color picker looks like that: Do you have any idea how to fix that?