PDA

Ver la versión completa : Edita tu perfil con codigos css



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

forcer
11/08/2011, 16:24
Pero que buen tuto (omg) Felicidade michi te quedo muy bueno y muy completo :D

Cami
11/08/2011, 16:44
Esta Buenisimo, Gracias Por El Tiempo y Dedicacion.. Lo Agregare a Mis Macros, Muy Buen Aporte =D .

Bienvenida Al Foro.

Edd
11/08/2011, 16:59
Hola mich buen tutorial sobre como mejorar nuestro xatspace
pero lo malo de eso es que solo se ve en internet explorer xd
Buen post!

Leona
11/08/2011, 17:01
Hola Mich mire tu post y esta muy bien e te felicito sera muy util para todos aqui .Grasias por averte tomado un tiempo para acerlo y explicarlo muy bien .Y espero que este no sea el ultimo tuto que agas porque esta muy bueno te quedo muy bien y a nombre de todos mis companeros que son muchos :$ te doy las grasias por este muy buen aporte (clap)

Mich
11/08/2011, 17:08
Gracias por sus comentarios & claro qe no sera el ultimo leona espero qe sea el primero de muchos xD .... & jairo luego traere css para otros navegadores *-*



http://i.imgur.com/Qnbl5.gif

Edd
11/08/2011, 17:25
Gracias por sus comentarios & claro qe no sera el ultimo leona espero qe sea el primero de muchos xD .... & jairo luego traere css para otros navegadores *-*



http://i.imgur.com/Qnbl5.gif

Mich Me equivoque perdona (xd)
Si funciona con todos,esque no puse el codigo bien O.o

xjulianax
11/08/2011, 17:37
Excelente post michi te felicito realmente muy lindo gracias por buscarles mas detalles bonitos a nuestro space se te agradece el aporte brindado se q a mxos le gustara (clap)(clap)(clap)michi vamos x mas post este es el comiendo de los tantos q vendran .

Gilberto
11/08/2011, 20:44
Me gusto el tutorial mich esta muy bien elaborado, explicado, y muy bueno el contenido espero sigas trayendo mas aportes al foro e usuarios como este tipo, veo que eres nueva y pues estas empezando bien un saludo y nuevamente gracias por el aporte que nos traes..

Rugbier
11/08/2011, 22:29
Te quedo muy bueno, muy completo , gracias x tu aporte para los chicos del foro :D !

ieLkim
12/08/2011, 22:28
haha woa michi...Muii buen tuto & muii util muchas graciias =) Felizidades!!

kitty
13/08/2011, 21:24
Hola Mich:
Te felicito un post mega completo, seas bienvenida al foro y un gusto conocerte.
Hoy te di apenas la bienvenida al xat ayuda (hehe) mas vale tarde que nunca.
Saludos y exito.