Mich
11/08/2011, 16:20
Hola a todos, en vista de que muchos me han preguntado como es que que puse en mi xatspace un cursor animado & las barras de desplazamiento con color, es que decidi hacer este tutorial.
Primero que nada les aclaro que estos arreglos los hice con codigos css.
¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
Como Nota Importante deben saber que estos codigos css que hoy les mostrare son unicamente para internet explorer, es decir, unicamente aquellos que entren a ver su perfil a traves de intarenet explorer podran ver estos arreglos.
Para editar tu perfil debes estar registrado en xat.com
Paso 1
Clic en tu avatar o foto de xat
http://img217.imageshack.us/img217/4886/foto1up.jpg
Paso 2
Clic en el enlace "edit" o entrar directamente desde este link http://xat.com/web_gear/chat/editprofile.php
http://img18.imageshack.us/img18/685/foto2tm.jpg
Paso 3
Colocas los datos de tu registro
http://img842.imageshack.us/img842/2517/foto3xum.jpg
Paso 4
Ya que estamos en la ventana de edicion del perfil, nos desplazamos hasta el ultimo cuadro de edicion & es ahi donde colocaremos nuestros css.
Paso 5
Para colocar cursor animado a nuestro perfil
En esta pagina http://www.cursores.org/ encontraremos una variedad de cursores para nuestro xatspace.
Elegimos la categoria de cursores que deseamos.
http://img801.imageshack.us/img801/3153/foto4ky.jpg
Paso 6
Elegimos cursor & copiamos el codigo
http://img713.imageshack.us/img713/6527/foto5we.jpg
Paso 7
Pegamos el codigo del cursor en el cuadro de edicion mencionado en el paso 4
http://img809.imageshack.us/img809/7338/foto6sn.jpg
Paso 8
Aqui debemos prestar atencion con lo que haremos. Vamos a copiar unicamente el url del cursor, ya que todo el codigo que tenemos no nos servira.
http://img818.imageshack.us/img818/323/foto7q.jpg
Paso 9
Este codigo que les dejo aqui es el que usaremos para poner nuestro cursor animado, donde dice URL DEL CURSOR sustituiremos.
<STYLE type="text/css">
*{cursor:url("URL DEL CURSOR"),default
}</STYLE>
http://img814.imageshack.us/img814/32/foto8r.jpg
Paso 10
Para poner color a las barras de desplazamiento de nuestro perfil
Para esto solo deben copiar estos codigos & sustituir los codigos de colores por los que ustedes desean :)
<STYLE type="text/css">
*{
scrollbar-face-color: #ff00ff;
scrollbar-shadow-color: #7A5DC7;
scrollbar-arrow-color: #7A5DC7;
scrollbar-track-color: #000000;
}</STYLE>
Finalmente nuestros css de cursor & barras de desplazamiento deben quedar asi ya colocados en nuestro ultimo cuadro de edicion
http://img696.imageshack.us/img696/2949/foto9fi.jpg
Aqui les dejo mi perfil http://xatspace.com/iiMICHii si desean ver un ejemplo de los resultados de estos css en un perfil.
Espero les guste mi tutorial & despues les prepare un tutorial con mas css que podemos aplicar para decorar nuestro xatspace. :p
Saludos para todos & si tienen alguna duda sobre este tutorial pueden encontrarme en el xat de ayuda & con gusto les ayudare (h)
http://i.imgur.com/Qnbl5.gif
Primero que nada les aclaro que estos arreglos los hice con codigos css.
¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
Como Nota Importante deben saber que estos codigos css que hoy les mostrare son unicamente para internet explorer, es decir, unicamente aquellos que entren a ver su perfil a traves de intarenet explorer podran ver estos arreglos.
Para editar tu perfil debes estar registrado en xat.com
Paso 1
Clic en tu avatar o foto de xat
http://img217.imageshack.us/img217/4886/foto1up.jpg
Paso 2
Clic en el enlace "edit" o entrar directamente desde este link http://xat.com/web_gear/chat/editprofile.php
http://img18.imageshack.us/img18/685/foto2tm.jpg
Paso 3
Colocas los datos de tu registro
http://img842.imageshack.us/img842/2517/foto3xum.jpg
Paso 4
Ya que estamos en la ventana de edicion del perfil, nos desplazamos hasta el ultimo cuadro de edicion & es ahi donde colocaremos nuestros css.
Paso 5
Para colocar cursor animado a nuestro perfil
En esta pagina http://www.cursores.org/ encontraremos una variedad de cursores para nuestro xatspace.
Elegimos la categoria de cursores que deseamos.
http://img801.imageshack.us/img801/3153/foto4ky.jpg
Paso 6
Elegimos cursor & copiamos el codigo
http://img713.imageshack.us/img713/6527/foto5we.jpg
Paso 7
Pegamos el codigo del cursor en el cuadro de edicion mencionado en el paso 4
http://img809.imageshack.us/img809/7338/foto6sn.jpg
Paso 8
Aqui debemos prestar atencion con lo que haremos. Vamos a copiar unicamente el url del cursor, ya que todo el codigo que tenemos no nos servira.
http://img818.imageshack.us/img818/323/foto7q.jpg
Paso 9
Este codigo que les dejo aqui es el que usaremos para poner nuestro cursor animado, donde dice URL DEL CURSOR sustituiremos.
<STYLE type="text/css">
*{cursor:url("URL DEL CURSOR"),default
}</STYLE>
http://img814.imageshack.us/img814/32/foto8r.jpg
Paso 10
Para poner color a las barras de desplazamiento de nuestro perfil
Para esto solo deben copiar estos codigos & sustituir los codigos de colores por los que ustedes desean :)
<STYLE type="text/css">
*{
scrollbar-face-color: #ff00ff;
scrollbar-shadow-color: #7A5DC7;
scrollbar-arrow-color: #7A5DC7;
scrollbar-track-color: #000000;
}</STYLE>
Finalmente nuestros css de cursor & barras de desplazamiento deben quedar asi ya colocados en nuestro ultimo cuadro de edicion
http://img696.imageshack.us/img696/2949/foto9fi.jpg
Aqui les dejo mi perfil http://xatspace.com/iiMICHii si desean ver un ejemplo de los resultados de estos css en un perfil.
Espero les guste mi tutorial & despues les prepare un tutorial con mas css que podemos aplicar para decorar nuestro xatspace. :p
Saludos para todos & si tienen alguna duda sobre este tutorial pueden encontrarme en el xat de ayuda & con gusto les ayudare (h)
http://i.imgur.com/Qnbl5.gif