¿Como hacer un perfil?
Bueno principalmente me base en los perfiles "old school" ya que los otros no los entiendo y creo que estan llenos de errores y en el theme "Costum" (porque es el mas facil de hacer)
Lo basico
ninja Cuando se escribe en html para hacer un perfil en gaia se necesita una { para abrir y otra }
ninja Las caracteristicas de las imagenes pueden ser las siguientes : repeat, no-repeat, fixed-left o fixed-right (esos fixed creo que se usan si no vas a repetir la imagen pero yo lo hice y como que no me daba rolleyes )
ninja Los cuadritos pueden ser punteados,finitos,gruesos etc (mas adelante va a ver info de como poner eso)
ninja Para las letras hay distintos colores que se fijan a traves de nros-->http://users.rcn.com/giant.interport/COLOR/1ColorSpecifier.html <----en esa direccion van a encontrar los nros con sus respectivos colores si quieren usen otra no es necesaria usar esta
Las caracteristicas tienen que estar separadas por punto y comas ( ; ) por ej ...no-repeat; fixed_left; background-position: center;}
Los codigos
Bien empezemos por los fondos. Como ya dijimos hay 2 tipos de fondos: el fondo gris y el fondo blanco
Para el fondo gris y el blanco
Te cambia el color del fondo gris
body
{
background: #000000
}
te cambia el color del fondo blanco
#content
{
background: #ffddee;
}
le pone una imagen al fondo gris (si quieren que se repita ponganle repeat solo y acuerdense de que si quieren agregarle otro detalle a la imagen tienen que separar por puntos y comas dichos detalles)y le da color al fondo blanco
body
{
background: #000000 url('Aca url') no-repeat fixed left;
}
Una imagen a tu fondo el problema es que no se cual de los 2 sweatdrop
#content
{
background: #000000; url('Aca url') no-repeat fixed left;
}
Sin fondo blanco
#content
{
background: none;
}
Para ponerle fondo con imagen a los cuadritos (about,details,etc)
#profile
{
background: #000
url(Aca url)
}
El logo
Este codigo te cambia el logo pero ¿que pasa si tu imagen no es igual de grande que el logo? bueno se repite ¿puede no repetirse?...sip le pones no-repeat y...va a quedar a la izquierda y con el fondo gris entonces para que no pase eso escribimos el siguiente codigo
#extendedProfileBody #header h1
{
background:#000000 url('Aca url')
background-repeat: no-repeat;
background-position: center
}
Ahora si tenes un logo perfectito o lo queres repetir le pones este codigo:
#extendedProfileBody #header h1
{
background: url('Aca url')
}
Las letras
Para cambiar el color de las letras en todo el profile
.section h2
{
color: #000000;
}
Cambia color de un area determinada en este caso es la wishlist...si quieren pueden poner #wishlist, #profile, #about y el color cambiaria en esos 3 cuadritos
#wishlist
{
color: #000000;
}
Hace letras transparentes (mucho no entiendo eso por las dudas no lo usen)
#profile h2
{
color: transparent;
}
Cambia tamaño, tipo y color de letra
body
{
font-family: rammstein fonts;
font-size: 12pt;
color: #FFFFFF
}
Cambia la font para un cuadrito solo (el que quieran)
#wishlist h2
{ font-type: rammstein fonts; }
Avatar
Hay gente que tiene en lugar de su avatar una imagen (por ej yo whee )
Para que aparezca un avatar en lugar del avatar comun se usa este codigo( cabe destacar que el avatar es solo una imagen colocada hacia la izquierda)
NOTA= LA BARRA DE ESTADO APARECE ARRIBA
#profile
{
background: #000 url('Aca url') no-repeat left center;
}
#profile .avatar
{
filter:alpha(opacity=0)
opacity:0;
}
Otra cosa muy graciosa que saque de ese codigo fue esta
El avy aparece detras del actual arriba
#profile
{
background: #000 url('Aca url') no-repeat; fixed-left ;
}
El avy aparece abajo a la izquierda atras del current avy
#profile
{
background: #000 url('Aca url') no-repeat left center;
}
El avy se reemplaza por otro avy que hayas hecho con el dream creator
NOTA=LA BARRA DE ESTADO APARECE ABAJO
#profile h2
{
background: url('Aca url') no-repeat left bottom; height: 190px;}
#profile img.avatar{width:0px; height:0px;}
#profile #bar
{
margin-top: 10px;
}
#profile .caption
{
top: 50px;
}
Fondos en comentarios y la parte de details
Pone en la parte de quote una imagen de fondo
#profile .caption
{
width: 100px;
height: 67px;
background:
url('Aca url')
#FFFFFF
center no-repeat;
}
Cambia el color de fondo de la quote en details
#profile .caption
{ background: #000000; }
Cambia el color de la letra a blanco en la quote (si queres cambiarla a blanco ponela con este codigo)
#profile .caption
{ color: #FFFFFF; }
Cambia de color la letra de la quote
#profile .caption
{ background: #FFFFFF; }
Cambia el fondo de las quotes en comentarios de un lado solo
#comments .caption
{ background: #000000; }
y para la otra....
#comments .caption2
{ background: #FFFFFF; }
Cambia el fondo de los comentarios
#comments .caption
{ background: #FFFFFF; url('Aca url') no-repeat;}
#comments .caption2
{ background: #FFFFFF; url('Aca url') no-repeat;}
Pone una imagen detras de los avys q comentan
#comments dl dt.avatar img
{
background: url('Aca url')
}
#comments dl dt.avatar2 img
{
background: url('Aca url')
}
