Código para colocar nuestro xat versión amplia y con colores [CSS]

[BochonMix]

Alguna ves te dijiste que "Ojalá pueda cambiar un poco los colores y cambiar de color el nombre de mi xat"
hoy te traigo este sencillo código en CSS para que puedas ver desde otra perspectiva tu xat,
con este código podrás cambiar el tipo de letra de tu xat, hasta el cursor lo podrás cambiar, el color de los links que en el aparecen y ver tu xat en forma amplia
ya que con este código no te saldrán los banners publicitarios de xat, sirva mas bien para darle toque decorativo a nuestro xat.
Los que nos las pasamos jugando con los colores y ver nuestro xat en otro aspecto YA SE PUEDE!

Bien lo que haremos será seguir los siguientes y sencillos pasos:

Paso 1:
Nos iremos a donde dice edit en nuestro xat dando click en el, ubicando bien se encuentra en la parte inferior de la caja del xat en dirección a la derecha una ves lo localizamos procedemos a realizar un click sobre el.


http://i.imgur.com/tv3Thme.png

Paso 2:
Una ves entramos en edit colocamos la contraseña de nuestro grupo en donde esta de color Rojo, luego que la colocamos hacemos click en donde dice enviar de color Azul.


http://img401.imageshack.us/img401/96/95fx.png

Paso 3:
Ya entramos a nuestro xat lo que haremos sera dirigirnos a donde dice Fondo y aquí donde deberemos colocar el código que les muestro a continuación:


background-color: #000000; background:}iframe{display:none}*{font-family:Calibri}*{color:#1BB500}*{text-shadow: 1px 1px 1px #135200}*{cursor:url(SU CURSOR),auto}*{background-color: #000000; BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(SU FONDO)}a:link{color:#135200 !important}strong{color:#135200 !important}div{display:none !important}.vbmenu_control{display:none}.foot{colo r:#135200 !important};

Nota: Donde ven en negrita son los diferentes colores que llevará ya sea para el nombre del xat como los botones lo podrán editar a su gusto acá les dejare una página donde encontraran código de colores Aquí (http://html-color-codes.info/codigos-de-colores-hexadecimales/)


http://i.imgur.com/Xyg20S8.png

Paso 4:
Una ves hemos colocado el código y todo bien nos vamos a dar click en donde dice "Guardar Cambios" lo que se en encuentra de color Azul, si queremos ver como quedó nos vamos a donde dice "Vista previa de los cambios" de color Rojo.


http://i.imgur.com/w2q9z4H.png

Cuando lo hemos colocado todo tal cual dicen los pasos tendrán su xat con lOs siguientes cambios cargadas que cada uno podrá editarlas a su gusto como los colores y su cursor propio les quedará algo como esto:


http://i.imgur.com/ZpEZyKQ.png

http://i.imgur.com/bNfwKwo.png

http://i.imgur.com/f7Tm5QX.png

http://i.imgur.com/DDIx7CV.png

Nota: Cabe resaltar que al colocar el siguiente código la parte de abajo que tengan no aparecerá sera simple el xat y el fondo, espero les guste y así podrán darle un poco de color y arte a su xat hasta la próxima con mas aportes y códigos kboom!

conveniente e inconveniente lee
PD: esta nueva forma de obtener nueva apaariencia de tu chat tiene alagun inconveniete ; que solo queda el chat de esta 2 maneras posibles:
1º -
http://i.imgur.com/8yjBZFi.png (http://i.imgur.com/8yjBZFi.png) <-- inconveniente quedaria solo asi mira la imagen
2º -
http://i.imgur.com/wOraoqo.jpg (http://i.imgur.com/wOraoqo.jpg) <-- si quedaria asi , puedes poner cosas o adornos abajo "pero" no puedes cambia a otra pagina porqque solo saldra a la vista una

[F-1]

Gracias joel por este aporte , espro que les guste a todos o caasi todos , buen trabajo , un saludo

[santotomas]

te quedo muy bueno joel gracias por este aporte

[S0NIC]

- Saludos Joel

- Buen Post; Esta Muy Bien detallado

- Sera De Utilidad; Ese codigo

[dCrazyb]

Ese codigo sera de mucha utilidad.
Gracias por compartir (Y)

[andresitoPipe]

Excelente!
Esto personaliza mas el chat y los hace diferentes a otros!
Gracias Master por su tiempo para publicar esta actualizacón.

Un abrazo.

Pippe

[Solange]

Gracias por el aporte Joel, muy buen trabajo, Saludos!

[Ezze]

esta muy bueno el aporte joel muy bueno el post espero que sirva de muchos a todos los usuarios grasias (clap)

[DonGato-Jezzuzz]

Gracias joel muy bien explicado muy bien post, espero que le haga útil a mucho o quien le guste esta manera saludos !!

[Ikor]

Hola,

Antes que nada, muchas gracias por el aporte (Y)

Solamente un par de aclaraciones, y notas.

Veamos:

1. No necesariamente quedaría así, lo que pasa, es que faltó eliminar el elemento que ocultaba los botones este: "vbmenu_control{display:none}.
pone mostrar:ninguna. Eliminamos ese, lo suprimimos, y listo, sale con 1frame block transparenta.

background:url(ENLACE AQUÍ imagen arriba al centro) top center no-repeat,url(enlace - arriba a la derecha) top right scroll repeat-x,url(OPCIONAL/URL izquierda/derecha) top left 52% fixed repeat-y,url(enlace opcional - probar) top center fixed,#color}embed{background:url(http://img387.imageshack.us/img387/1316/banner1.gif)!important}embed{border:2px groove #color}embed{box-shadow: 0 0 60px #color}* * *{background:none!important}1frame{display:block} *{font-family:Trebuchet MS} *,a:link,a:visited{color:#00FA9A!important} *{text-shadow: 2px 2px 3px #F54747}.foot{color:#00FA9A!important;strong{color :#ff0000 !important};}


2. Se pueden modificar también las fuentes, yo puse ahí la trebuchet MS, que es muy conocida. No todos los navegadores reconocen la misma, unos más y unos menos, pero las comunes, suelen ser reconocidas por los navegadores principales.

3.Text shadow se refiere la especie de sombra que tiene el texto, para darle un toque más extravagante, ahí están sus variables, después del "#aquícódigocolor"
4. Los fondos también pueden estar en formato gif. Siempre y cuando uses los proveedores permitidos. Gracias a las alineaciones mostradas de los fondos, se puede equilibrar una especie de logotipo o banner.

5. En el apartado de los elementos y sus atributos: "a:link,a:visited{color:#AQUÍ EL COLOR DEL Texto y los links}
6. Los fondos son opcionales, se pueden sustituir por un solo enlace o url directo como fondo BACKGROUND-IMAGE. Quitando todo tipo de alineación de fondo, veo más completo la alineación de fondo.
7. El strong> se utiliza para la parte final abajo del todo.

Si hay algún error, no dude en corregirlo, o si lo prefiere, poder colaborar con más cosas, así nos ayudamos entre todos

[AventureAnime Grupo]

Solucion al inconveniente de que desaparezca el menú de páginas de debajo de la caja de xat. Es sencillo, tan solo debéis sustituir la palabra "none" por "on" situada al final del código donde dice --> vbmenu_control{display:none} , ahi deberán poner --> vbmenu_control{display: on} (el signo de puntuación seguido de on sin espacio). De este modo queda resuelto el problema de que no aparezcan las páginas de debajo de nuestra cajita de xat.
Por otro lado, también podemos poner nuestro propio fondo y tan sólo seleecionar el color de las letras del título, es decir, no es necesario coger un fondo de un color uniforme sino que le pondremos como hasta ahora hicimos el que deseemos para nuestro xat. Esto se consigue sustituyendo el código de color de cada "background" que nos aparezca por la palabra "transparent" por supuesto deberemos introuducir la url de nuestro background deseado.
Espero les haya sido de utilidad mi aportación, un saludo
*************
Nos leemos!! :p

[izeuz]

Exelente aporte. Joel (y) ya avia visto esta modificiacion anteriormente y supuce que era CSS pero no sabia exactamente q codigo usar.. Reconocimiento especial para el maestro ikor q complementa magnificamente la informacion.. gracias a ambos por compartir la infomarcion... Saludos desde Mexico