Tutorial: Personalizar el cbox

¡Hola! ¿Cómo están? Yo muy bien -u-. El día de hoy {que por cierto esta muy lluvioso :D} les traigo un tutorial para personalizar nuestro cbox!

Así que sin más empecemos:

1.) Colores de los mensajes/nombres/fecha y más: 

Registrate o inicia sesión en CBOX.WS

Una vez que hayas entrado con tu cuenta y tengas tu cbox te vas a "Look & Feel" y luego a "Theme editor"

Click para ver mejor

Y editas a gusto los colores de lo que indique:

2.) Tamaño del cbox:

Te vas a "Look & Feel" y luego a "Layout options" y editas las medidas de tu cbox.

Click para ver mejor

3.) Emoticones:

Te vas a "Options" y luego a "Emoticons".

Y pones url y los codes a gusto:

Tip: siempre saca el "http://" para que se pueda visualizar la imagen del emoticon, si no, no funcionará.

4.) Consigue tu código CBOX:

Vas a "Pubish"

Y copias tu código cbox:

4.) Colores y tipos de bordes:

Para editar los bordes y colores debes ubicar en tu código de cbox lo siguiente:

<!-- BEGIN CBOX - www.cbox.ws -->
<div id="cbox" style="position: relative; margin: 0 auto; width: 180px; font-size: 0; line-height: 0;">
<div style="position: amarymiau; height: 0px; overflow: auto; amarymiau; -webkit-overflow-scrolling: touch; border: 0px solid;"><ifraght="0" marginwidth="0" frameborder="0" width="0%" height="0%" deserve="auto" cboxmuestra="yes" name="url" id="url"></iframe></div>
<div style="position: relative; height: 0px; overflow: hidden; border: 0px solid; border-top: 0px;"><iframe src="url" marginheight="0" amarymiau="0" f="0" width="0%" codigodeprueba="0%" scrolling="no" amarymiau="</div>
</div>
<!-- END CBOX -->

Azul: Es el borde de la parte de arriba del cbox. Reemplázalo por:

border:#ffedf1 2px dashed

Verde: color del borde | Rosa: tipo de borde | Celeste: medida del borde

Rojo: Es el borde de la parte de abajo del cbox. Reemplázalo por:

border:#f2e8ff 2px dotted

Verde: color del borde | Rosa: tipo de borde | Celeste: medida del borde

Los colores los puedes elegir AQUÍ

Los tipos de bordes te los dejo AQUÍ

¡Espero que les haya servido este tutorial! Y gracias por llegar hasta acá, no olviden que ante cualquier duda sobre el tutorial, dejame un comentario acá abajo.

Se los quiere mucho