Descora tu CBOX

Holii n.n buenos días a todos! xD como estan? les voy a enseñar a como crear sus propios skins para sus Chat Box o C-Box :3 bah también como decorarla toda! es un tutorial largo pero sencillito, seguro les sale muy lindo!! bueno empecemos...


primero vamos a crear nuestra skin, poniendo toda nuestra creatividad e imaginación en ella xD hoy haremos una circular, igual pueden seguir mis pasos haciendo la que más les guste, como con forma de corazón, estrella, triángulo (? xD

debemos ajustar los valores de la cbox, para que quede bien con la skin, yo ajuste los valores de mi cbox a...

ancho: 165 px
alto: 210
form: 75 px


si quieren pueden hacerlo igual que yo pero igual háganlo como quieran yo solo doy algunas ayuditas xD recuerden tiene que quedar con la skin o_o bueno comencemos de una vez xD

abrimos el photoshop cs3 y creamos un nuevo archivo de 380x380 px...

CLIC A LAS IMÁGENES PARA VERLAS EN SU TAMAÑO ORIGINAL!!!!

pintamos todo, doble clic a la capa 1, ponemos un motivo y un degradado. sigan las instrucciones de la imagen...

nos va quedando lindo, ahora lo decoramos todo n.n! le ponemos lo que queramos: renders, pngs, brillos, etc.

ahora guardamos nuestra skin en formato .png en la carpeta que queramos

presten muchísima atención a esta parte!! sigan las instrucciones de las imágenes!!

ya nos queda el círculito n.n
ahora lo guardamos en formato png y listo :3

Un paso extra!!!!!!

ya nos quedo nuestra skin :D la voy a compartir con ustedes si la quieren usar, aquí esta el resultado:



ahora que tenemos la skin, conseguimos su url subiendola a un sitio de alojamiento de archivos (como tinypic, imageshack,etc.) y vamos a nuestro código de cbox...

pegan el código de su cbox en un gadget html/javascript o en una página, donde quieran y ahora a modificar...
copia el siguiente código:

<div id="shoutmix" style="padding-top: 94px; width: 215px; height: 450px; background: url(URL DE TU SKIN CBOX) no-repeat scroll left top transparent; position: relative;">

rojo: modificas el tamaño de tu skin cbox (la que yo hice es de 380x380)
naranja: pones la url de tu skin cbox

pegas el código detrás de <!-- BEGIN CBOX - www.cbox.ws - v001 -->, lo modificas y listo n.n
imagen guía:

ahora para hacer más bonita la cbox!!!

si se fijan en el código, hay una parte que dice:

style="border:#000000 1px solid;"

ese es el estilo del borde de la cbox, esa parte se repite dos veces: la primera es en la parte donde se muestran los mensajes, y las segunda es donde se muestra el formulario, pueden ponerle el mismo borde a las dos partes  o diferentes bordes a los dos, clic aquí para ver los diferentes tipos de bordes!!!

pueden cambiarle el color a los bordes, reemplazando el #000000 por el código del color que más les guste. clic aqui para ver una lista de códigos de colores!


Si quieres ver un tuto para hacer un chat deslizante como el que tengo yo, clic aqui n.n


Crédito por el código: Annyz Blog