maximus maximus - 4 months ago 33
HTML Question

Twitter Bootstrap - Color Picker

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:

enter image description here

Do you have any idea how to fix that?

Answer

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) }; 
Comments