Aprende a editar tu xat con css

[Master Nemesis]

Aprende a editar tu xat con CSS.

Usaremos siempre los mismos código adelante del código.

Color de fondo:

background:#FFF}

Imagen de fondo:

background-image: url(http://img855.imageshack.us/img855/3791/pmic.jpg)}

Se puede editar mientras tengamos algun fondo con color o imagen, siempre lo tendremos que usar este código al comienzo porque si no, no se leerá los demas códigos porque esta parte es solo de background.


Hacer su Titulo en Color.

background:#FFF}h1{color:#A0FF00;

Agregar una fuente.

{font-family:Verdana}

Otras fuentes: Verdana - arial - Trebuchet MS - Helvetica - sans-serif - Times New Roman - Tahoma - Comic sans ms

Lo usamos con el código anterior.

background:#FFF}*{font-family:Comic sans ms}h1{color:#A0FF00;

Poner una imagen gif o png en el titulo de tu xat.

background:#FFF}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

{text-indent:-9999px} || Permite mover/desaparecer las letras del titulo para que no se muestre delante de tu imagen.
11px || Permite posicionar la imagen mas lejos del logo.

Como agregar un cursor a tu xat.

background:#FFF}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

Medidas solo cursor: 50x50
Medidas con textos: 124x60

Combinarlo con el código anterior tendremos algo como esto.

background:#FFF}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

Sin fondos negros atras, fondo transparente.



Fondo comun con imagen de fondo pasando los 1200 px.

background:}*{BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}embed{border-style:dashed;}

Fondo editable de sus medidas.

background:}*{background-size: 100% 100%; BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}embed{border-style:dashed;}

Las medidas Minimas para la imagen del xat es: 487x60


Poner un fondo atras.

Con Imagen.

background:}*{BACKGROUND-COLOR: RED}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}embed{border-style:dashed;}

Con texto de color sobre el titulo.

background:}*{BACKGROUND-COLOR: RED}h1{color:#A0FF00;

Descripción con color.

background:}h1{color:#A0FF00;

Como tener la descripción con imagen o gif.

background:#FFF}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h2{text-indent:-9999px}FONT-SIZE: 0.8em;

Para centrar o mover la imagen, ponemos en 500px en donde dice 0px
Las medidas para la descripción: 420x15


Poner un color de fondo en la descripción.

background:#FFF}h2{background:RED}FONT-SIZE: 0.8em;

Titulo y descripción con imagenes.

background:#FFF}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h2{text-indent:-9999px}h1{text-indent:-9999px;

Hace el chat con bordes.

background:#FFF}embed{box-shadow: 0px 0px 20px green}embed{border:dashed #ff9000}embed{width: 1228px}embed{height: 500px}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

embed es el cuadro del flash donde estará el chat, para darles sombras seria la parte box-shadow y los bordes es border, los estilos de los bordes son: solid - dashed - dotted - double - groove - ridge - inset - outset


Como cambiarle el color a la barra negra o hacerla transparente.

background:#FFF}*.btext2{background:red}embed{box-shadow: 0px 0px 0px green;}

Podemos cambiarle el color y agregar una imagen de fondo, simplemente usando, background-image.

background:#FFF}*.btext2{background:url('url para la barra negra')}embed{box-shadow: 0px 0px 0px green;}

y para que sea transparente usamos background:none.

background:#FFF}*.btext2{background:none}embed{box-shadow: 0px 0px 0px green;}

Como desaparecer y eliminar las páginas debajo de tu xat.

Para achicar las medidas que suelen ser por defecto de 2000px de height le agregamos..

iframe{height:500px}

http://img.webme.com/pic/m/master-ne...rameheight.jpg

esto hará que la página de abajo tenga un largo de 200px y no de 2000 px la que viene por defecto, si solo tienes para agregar un reproductor de 200 px de alto, podes agregar al iframe una medida de 250 asi no sea muy larga el xat.
Para eliminarla, usamos

iframe{display:none}

http://img.webme.com/pic/m/master-ne...isplaynone.jpg

con este código no aparecerá las paginas de abajo, lo que aparecerá son las pestañas que suelen ser, page 1 - comments etc, para sacarla usamos.

.vbmenu_control{display:none}

de esta manera ya no tendremos nada debajo del xat, ahora para darle un toque de diseño, lo agregamos una imagen de fondo.

background:}iframe{height:200px}*{font-family:verdana}*{BACKGROUND-IMAGE: url(http://oi58.tinypic.com/2usfps0.jpg')}*.vbmenu_control{display:none}embed{box-shadow: 0px 0px 0px green;}

Resultados finales.

Sin fondo negro:

background:}*{BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h2{text-indent:-9999px}h1{text-indent:-9999px;

con fondo negro

BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h2{text-indent:-9999px}h1{text-indent:-9999px;

Con cursor:

background:}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}*{BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h2{text-indent:-9999px}h1{text-indent:-9999px;}

Sin paginas debajo:

background:}iframe{height:500px}*.vbmenu_control{d isplay:none}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}*{BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h2{text-indent:-9999px}h1{text-indent:-9999px;}

Con chat grande y bordes con sombras

background:}embed{box-shadow: 0px 0px 20px green}embed{border:dashed #ff9000}embed{width: 1228px}embed{height: 500px}iframe{height:500px}*.vbmenu_control{display :none}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}{BACKGROUND-IMAGE: url(http://img594.imageshack.us/img594/9143/59tb.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}h2{text-indent:-9999px;}

Fondo personalizado:
Se incorpora: Fondo con medidas editables si tu imagen es chica + bordes,sombras alto y ancho del chat + desaparece las pestaña de abajo del xat + fuente de texto + cursor + imagen en el titulo y descripción + medida de alto al iframe de abajo.

background:}embed{box-shadow: 0px 0px 20px green}embed{border:dashed #ff9000}embed{width: 1228px}embed{height: 500px}iframe{height:500px}*.vbmenu_control{display:none}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}{background-size: 100% 100%; BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://img855.imageshack.us/img855/3791/pmic.jpg)}h2{background:url('http://oi61.tinypic.com/zsqs5u.jpg') no-repeat 0px center}h1{background:url('http://oi58.tinypic.com/2usfps0.jpg') no-repeat 11px center}h1{text-indent:-9999px}h2{text-indent:-9999px;}

Con titulo y descripcion con color
Se incorpora: Fondo + bordes,sombras alto y ancho del chat + desaparece las pestaña de abajo del xat + fuente de texto + cursor.

background:}embed{box-shadow: 0px 0px 20px green}embed{border:dashed #ff9000}embed{width: 1228px}embed{height: 500px}iframe{height:500px}*.vbmenu_control{display:none}*{font-family:Verdana}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}{background-size: 100% 100%; BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://img855.imageshack.us/img855/3791/pmic.jpg)}h1{color:#A0FF00}*{font-family:Comic sans ms}h2{color:#A0FF00;}

Se edita lo que se encuentra en color y los valores de los numeros que estan en 0px

Pronto realizare un post donde aprenderas a usar css en tu xatspace.

Saludos.

[Tecso]

Muchísimas gracias por tu post. Tenía el código pero no sabía qué parte editar, gracias te dejo reputación

[Calo]

Un gran tutorial Nemesis, gracias por tomarte el tiempo de hacerlo.

[SonikkuVampireZ]

Hola, al creador de este post, le doy las infinitas gracias por esforzarse y ayudar a los demas, iré al grano, el codigo para cambiar por ejemplo, el titulo (nombre de tu xat) donde se pone?que no me he enterado si lo dice ahi arriba

[Master Nemesis]

Hola, al creador de este post, le doy las infinitas gracias por esforzarse y ayudar a los demas, iré al grano, el codigo para cambiar por ejemplo, el titulo (nombre de tu xat) donde se pone?que no me he enterado si lo dice ahi arriba

Hola,

Los códigos que quieras utilizar, se agregan desde el campo fondo desde tu panel del xat.

Vas en la parte de abajo donde dice Edit > Pone la contraseña para tu xat para ingresar > y en fondo borras lo que tengas y pones el código editado.







Saludos.

[Master Nemesis]

Hola,

Como el post era demasiado largo para que entre en 1, lo dividi en 2 partes para que quede el tutorial completo, seguiremos editando nuestro xat con mas códigos css, en esta ocación, usaré códigos de css3 que seria multiples fondos (multiple backgrounds).

Este código nos dejará poner 3 o mas fondos en 1 mismo contenido.
Tiene que tener 3 estructura que serán fundamentales.
Imagenes (background-image) + Posicion (background-position) + repeticion (background-repeat)

Para agregar muchos fondos hacemos lo siguiente separandolas con comas.

background-image: Fondo1, Fondo2, Fondo3;

Ahora tendremos que posicionarla segun la posiciones agregadas anteriormente.
Antes dejaremos los valores:

background-position: center center, 50% 100%, 50px 250px,top left top right;

cuando ya tenemos los valores de posicionarlo en letras, porcentajes y en píxeles, lo usaremos para lo siguiente..

background-position: El fondo 1 le daremos la posicion left, El fondo 3 le daremos la posicion right top, El fondo 3 le daremos la posicion left top ;

y lo que nos faltaria es si el fondo queremos que se repita.
Los valores: no-repeat = No repetir || repeat = repetir || repeat-x = se repetira en el eje x.

background-repeat: no-repeat, no-repeat, repeat-x;

Esto seria la estructura un un fondo con 3 imagenes, para una página web el css se usa asi.

background-image: Fondo1, Fondo2, Fondo3;
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, left top ;

para acortarlos solamente lo tendremos que unir.

background: Fondo1 left no-repeat, fondo2 right no-repeat, fondo3 left top repeat-x;

Con este código acortado, lo podremos usar para nuestro xat.

Fue una breve explicación sobre el uso de este código que usaré mas adelante.

Como poner multiples fondos en nuestro xat.



En esta oportunidad voy a usar mas de 3 fondos, usaré 5.

primero armamos el código css3.

Para poner 3 fondos vamos a poner

background-color: #77FF00;background:url(http://oi58.tinypic.com/2emnzhx.jpg) 0px 68px scroll repeat-x, url(http://oi62.tinypic.com/5ofryo.jpg) right 90px no-repeat, url(isquierdo) left 90px no-repeat, #77FF00}*{cursor: url(),auto;}

siempre es importante leer bien el código y sus valores a editar.

ahora pasemos a 5 y una edición mas avanzada.

background-color: #77FF00;background:url(FONDO H3) 0px 68px scroll repeat-x, url(Banner Derecho) right 90px no-repeat, url(Banner Isquierdo) left 90px no-repeat, url('Bordes footer') 0px bottom scroll repeat-x, url(Fondo de atras) center fixed repeat, #77FF00}*{cursor: url(Cursor png),auto;}

Ya hemos usado los códigos anteriores para saber como poner mas de 3 fondos en nuestro xat, los valores estan posicionados.

Ahora para combinarlo con nuestros gif, lo unimos de esta forma.

background-color: #77FF00;background:url(FONDO H3) 0px 68px scroll repeat-x, url(Banner Derecho) right 90px no-repeat, url(Banner Isquierdo) left 90px no-repeat, url('Bordes footer') 0px bottom scroll repeat-x, url(Fondo de atras) center fixed repeat, #77FF00}a:link,a:visited{color:#00FF37 !important}td{color: #ffffff !important}strong{color:#ff0000 !important}h2{color:#4DFF00 !important}embed{box-shadow: 0px 0px 100px#10A400} h2{background:url(H2 o Gif) no-repeat 0px center}iframe{height:200px}embed{border:dashed #26FF00}embed{()}h1{background:url(H1 o Gif) no-repeat 11px center}h1,h2{text-indent:-9999px}.btext2{background:none;}*{cursor: url(Cursor png),auto;}

En mi caso el código css queda asi.

background-color: #77FF00;background:url(http://oi61.tinypic.com/2cibhnc.jpg) 0px 68px scroll repeat-x, url(http://oi62.tinypic.com/5ofryo.jpg) right 90px no-repeat, url(http://oi61.tinypic.com/2n6w4l3.jpg) left 90px no-repeat, url('http://oi58.tinypic.com/332uohi.jpg') 0px bottom scroll repeat-x, url(http://oi62.tinypic.com/fbcfie.jpg) center fixed repeat, #77FF00}a:link,a:visited{color:#00FF37 !important}td{color: #ffffff !important}strong{color:#ff0000 !important}h2{color:#4DFF00 !important}embed{box-shadow: 0px 0px 100px#10A400} h2{background:url(http://oi61.tinypic.com/zsqs5u.jpg) no-repeat 0px center}iframe{height:200px}embed{border:dashed #26FF00}embed{()}h1{background:url(http://oi58.tinypic.com/2usfps0.jpg) no-repeat 11px center}h1,h2{text-indent:-9999px}.btext2{background:none;}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

Mas códigos preparado usando el css3.

El código incluye: 4 Fondos con sus gif anteriores.

background-color: #77FF00;background:url(http://oi58.tinypic.com/2emnzhx.jpg) 0px 68px scroll repeat-x, url(http://oi62.tinypic.com/5ofryo.jpg) right 90px no-repeat, url(isquierdo) left 90px no-repeat, url('http://oi58.tinypic.com/332uohi.jpg') 0px bottom scroll repeat-x, url(http://oi62.tinypic.com/fbcfie.jpg) center fixed repeat, #77FF00}a:link,a:visited{color:#00FF37 !important}td{color: #ffffff !important}strong{color:#ff0000 !important}h2{color:#4DFF00 !important}embed{box-shadow: 0px 0px 100px#10A400} h2{background:url(http://oi61.tinypic.com/zsqs5u.jpg) no-repeat 0px center}iframe{height:200px}embed{border:dashed #26FF00}embed{()}h1{background:url(http://oi58.tinypic.com/2usfps0.jpg) no-repeat 11px center}h1,h2{text-indent:-9999px}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

Este código incluye: Con pagina height + cursor + gif + imagen a su isquierda y derecha + barras horizontales gif + barra transparente.

background-color: #77FF00;background:url(http://oi58.tinypic.com/2emnzhx.jpg) 0px 68px scroll repeat-x, url(http://oi62.tinypic.com/5ofryo.jpg) right 90px no-repeat, url(http://oi61.tinypic.com/2n6w4l3.jpg) left 90px no-repeat, url('http://oi58.tinypic.com/332uohi.jpg') 0px bottom scroll repeat-x, url(http://oi62.tinypic.com/fbcfie.jpg) center fixed repeat, #77FF00}a:link,a:visited{color:#00FF37 !important}td{color: #ffffff !important}strong{color:#ff0000 !important}h2{color:#4DFF00 !important}embed{box-shadow: 0px 0px 100px#10A400} h2{background:url(http://oi61.tinypic.com/zsqs5u.jpg) no-repeat 0px center}iframe{height:200px}embed{border:dashed #26FF00}embed{()}h1{background:url(http://oi58.tinypic.com/2usfps0.jpg) no-repeat 11px center}h1,h2{text-indent:-9999px}.btext2{background:none;}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;}

Agregandole un copyright debajo del xat + banner derecho.

background: url(http://oi59.tinypic.com/1zbyntg.jpg) right 602px repeat-x, url(http://oi58.tinypic.com/2emnzhx.jpg) left 68px repeat-x, url(http://oi62.tinypic.com/5ofryo.jpg)right 79px no-repeat, url(http://oi62.tinypic.com/fbcfie.jpg)fixed center 0px}embed{box-shadow: 0px 0px 30px #3CFF00} embed{border:dashed #ffffff} a:link,a:visited{color:#2600FF!important}td{color: #FF9A00!important}strong{color:#fffffff!important} h2{background:url(imagen) no-repeat 11px center}embed{background: url() 0px 608px no-repeat}h1{background:url(http://oi58.tinypic.com/2usfps0.jpg) no-repeat 11px center}h1{text-indent:-9999px}.btext2{background:none;}*{cursor: url(http://oi59.tinypic.com/311tc15.jpg),auto;

Medidas exacta en el xat.

H1 1343x51
H2 1343x17
btext2 1343x30
iframe 1343x6000
footer 1343x52
Banner izquierdo & Derecho 231x550 {Puede ser menor mientras lo posiciones}

NOTA:
Lo que se encuentra en rojo son los link donde ira su fondo/imagen.
Lo que se encuentra en azul son los colores en código.
Lo que se encuentra en violeta son sus medidas para que lo posiciones correctamente.

Saludos.

[SonikkuVampireZ]

Ahora ya entiendo mejor lo de los codigos y el tema, la cosa es, se necesita de algo especial para que funcionen? he puesto el codigo en donde se me ha especificado y no tiene resultado alguno. (lamento si molesto a alguien con las preguntas, pero me interesa mucho el tema.

[batuelmejor2010]

Buen post ! Sera y es de gran ayuda !

[kimeras]

Hola,

Como el post era demasiado largo para que entre en 1, lo dividi en 2 partes para que quede el tutorial completo, seguiremos editando nuestro xat con mas códigos css, en esta ocación, usaré códigos de css3 que seria multiples fondos (multiple backgrounds).

Este código nos dejará poner 3 o mas fondos en 1 mismo contenido.
Tiene que tener 3 estructura que serán fundamentales.
Imagenes (background-image) + Posicion (background-position) + repeticion (background-repeat)

Para agregar muchos fondos hacemos lo siguiente separandolas con comas.

background-image: Fondo1, Fondo2, Fondo3;

Ahora tendremos que posicionarla segun la posiciones agregadas anteriormente.
Antes dejaremos los valores:

background-position: center center, 50% 100%, 50px 250px,top left top right;

cuando ya tenemos los valores de posicionarlo en letras, porcentajes y en píxeles, lo usaremos para lo siguiente..

background-position: El fondo 1 le daremos la posicion left, El fondo 3 le daremos la posicion right top, El fondo 3 le daremos la posicion left top ;

y lo que nos faltaria es si el fondo queremos que se repita.
Los valores: no-repeat = No repetir || repeat = repetir || repeat-x = se repetira en el eje x.

background-repeat: no-repeat, no-repeat, repeat-x;

Esto seria la estructura un un fondo con 3 imagenes, para una página web el css se usa asi.

background-image: Fondo1, Fondo2, Fondo3;
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, left top ;

para acortarlos solamente lo tendremos que unir.

background: Fondo1 left no-repeat, fondo2 right no-repeat, fondo3 left top repeat-x;

Con este código acortado, lo podremos usar para nuestro xat.

Fue una breve explicación sobre el uso de este código que usaré mas adelante.

Como poner multiples fondos en nuestro xat.



En esta oportunidad voy a usar mas de 3 fondos, usaré 5.

primero armamos el código css3.

Para poner 3 fondos vamos a poner



siempre es importante leer bien el código y sus valores a editar.

ahora pasemos a 5 y una edición mas avanzada.



Ya hemos usado los códigos anteriores para saber como poner mas de 3 fondos en nuestro xat, los valores estan posicionados.

Ahora para combinarlo con nuestros gif, lo unimos de esta forma.



En mi caso el código css queda asi.



Mas códigos preparado usando el css3.

El código incluye: 4 Fondos con sus gif anteriores.




Este código incluye: Con pagina height + cursor + gif + imagen a su isquierda y derecha + barras horizontales gif + barra transparente.




Agregandole un copyright debajo del xat + banner derecho.






Medidas exacta en el xat.

H1 1343x51
H2 1343x17
btext2 1343x30
iframe 1343x6000
footer 1343x52
Banner izquierdo & Derecho 231x550 {Puede ser menor mientras lo posiciones}

NOTA:
Lo que se encuentra en rojo son los link donde ira su fondo/imagen.
Lo que se encuentra en azul son los colores en código.
Lo que se encuentra en violeta son sus medidas para que lo posiciones correctamente.

Saludos.

amigo gracias por el post, buena, pregunta se podra poner fondo head transparente y centrar el logo , dar colores a la http://prntscr.com/k2fak9 algo semejante a esto, https://xat.com/Discoconnectionradio, utilizando los 5 fondos y todo lo demasque agregaste

[franciscoy]

De siempre me ha encantado retocar los xat, pero mola vuestra idea y la forma en la que está orientada.