Color Sphere

Es un "Color-Picker" muy sencillo de instalar y que puede servir para cambiar el fondo de lnuestra pàgina a voluntad.
El problema que presenta es que no dispone de gama de grises... pero... como ejemplo vale.
Hablando de ejemplos, he tomado éste de horseweapon, uno de los expertos del foro Mootools. Para ello se basó en el hack original : Color Sphere.

Lo he dejado así en este BLOG DE PRUEBAS. Si hacéis click en el primer "picker", aparecerá una esfera de colores que podéis arrastrar para elegir un color, cuyo código hexadecimal aparecerá en el cuadro que rodea la esfera (lo he puesto en blanco, para que se vea bien). Ese color elegido será el del fondo del blog.
Al picar en el segundo "picker" (valga la redundancia, je), podéis elegir el color que va a tener el fondo de las entradas y de la sidebar.
El tercer picker nos servirá para elegir el marco de esos fondos (las líneas que rodean a toda la caja).

Y así se puede hacer:

.- CSS, si queréis hacer más ancho el outer-wrapper, como lo he hecho yo, cambiadlo a un tanto por ciento (90% en mi caso). Además, he "mangoneado" el Main, para que se vea mejor el efecto de la esfera de color. En suma: este CSS podéis ponerlo o no, a voluntad, porque no afecta para nada a la funcionalidad del hack, salvo por lo que se refiere a la posición de los botones "picker":

<style type="text/css">

html{

height:90%;

}

body{

background-color:#333;

padding:5%;

height:90%;

margin:0;

}



#main{



height:90%;

border:1px solid #888;

position:relative;

overflow:auto;

background-color:#000;

}



button{

margin:5px 10px;

}



</style>

.- SCRIPTS:

<script src='http://.../mootools-trunk-1512.js' type='text/javascript'> </script>

<script src='http://junioscripts.googlepages.com/colorsphere.js' type='text/javascript'> </script>
<script type='text/javascript'>

window.addEvent(&#39;domready&#39;,function(){

var sphere = new ColorSphere(&#39;.pick&#39;,{

onChange:function(input,hex){

switch(input.get(&#39;id&#39;)){

case &#39;color1&#39;:

document.body.setStyle(&#39;background-color&#39;,hex);

break;

case &#39;color2&#39;:

$(&#39;main&#39;).setStyle(&#39;background-color&#39;,hex);

break;

case &#39;color3&#39;:

$(&#39;main&#39;).setStyle(&#39;border-color&#39;,hex);

break;

}

}

});

});

</script>

Ojo al script colorsphere, porque aquí habéis de introducir la imagen de la esfera, el color de la caja y el cierre, entre otras cosas.

.- HTML: Aquí es cosa de cada quién dónde lo coloque... en mi caso, sobre las entradas del blog. Habréis de hacer pruebas para ver en qué sitio lo preferís (para manejarlo y para los cambios de color)

<div id='main'>

<input class='pick' id='color1' name='color1' type='text' value='#333'/>

<input class='pick' id='color2' name='color2' type='text' value='#000'/>

<input class='pick' id='color3' name='color3' type='text' value='#888'/>
</div>

Ojo al cierre "div" del main, porque dependiendo de donde lo coloquéis activaréis el color en todo el blog o sólo una parte. Yo lo he colocado en el cierre del footer-wrapper de la plantilla. Lo mismo digo: haced pruebas con la "vista previa" de vuestra plantilla.

Y ésto es todo...