Ver fondo
[x]

Como personalizar el perfil general general


2015-12-06 Popularidad 1016 Visitas



Este es un complemento al tema que ya creó otro usuario, que les recomiendo que lean. En ese tema, Dragneel enseña un efecto muy vistoso de perfil transparente, a cambiar la fuente, a agregar una imagen o video.

ESTE ES EL TEMA:
http://www.buenaisla.com/tema/general-Personaliza-tu-perfil-16181


Con esas instrucciones, yo ya entendí lo que me faltaba saber. La verdad es que no vi en otros foros una capacidad de personalizar tanto el perfil, pero hay que tener un conocimiento y la idea de este tema es acercar algunas herramientas para hacerlo.



1. Ir al menú Editar



 
2. El código va en la sección "Acerca de mí"




3. Para cambiar la apariencia las cosas, hay que insertar las etiquetas style y jugar con las hojas de estilo (CSS). ¿No entendiste un pepino? Ahora te muestro cuáles son las etiquetas style y también para que te des una idea de cómo se ve una hoja de estilos pequeña.




4. Dentro de las etiquetas de estilo, se escribe cada elemento de la página y a continuación se abren llaves. Debajo se escribe el nombre de la propiedad, dos puntos y el valor, seguido de punto y coma.  Por ejemplo: background-color es el color de fondo y margin el margen.

5. La tabulación y saltos de línea son para que se vea más prolijo, no tienen otra función y los espacios a veces son necesarios y otras veces no.

En el caso que nos ocupa, no me detectaba el código cuando colocaba saltos de linea y tuve que suprimirlos, o sea, todo el código queda en una línea de texto (puede verse que el texto sigue abajo cuando llegas al final, pero lo importante es que no pulses ENTER mientras estás dentro de las etiquetas style.

6. Yo no puedo escribir las etiquetas de estilo porque daría error en el foro (por una cuestión de seguridad), pero sí puedo escribir lo que va dentro de ellas. Recuerda que no deben tener ningún salto de líneas, o sea que van a estar pegadas, las dos juntas y hay que escribir adentro de ellas.

Te voy a mostrar lo que dice en mi caso y le doy color a los elementos para que distingas mejor. Desafortunadamente, es molesto hasta para mí anotarlo de esta manera, pero presta atención a las llaves y a los punto-y-coma. Abajo lo voy a explicar bien.


.acercaDe{background: black;}#contenido{background: #006;} h2{color: lightblue!important;}div.barra2_body{background: #006; color:skyblue; border:none;}ul.tabs_header, ul.tabs_header li{background: transparent!important;border:none!important;}






El elemento al que llamo .acercaDe es el cuadro en mi perfil donde hay una imagen. La imagen no encajaba perfectamente y el fondo era de un color "violeta sucio", entonces decidí ponerlo de color negro.

Abajo voy a hablar sobre los colores, por ahora quiero mostrar que cosa es cada elemento.

El elemento #contenido es el fondo de todo, originalmente gris y que yo puse en azul oscuro. El #006 es una forma de escribir un color (abajo se explica).

h2 se refiere a varios elementos, por ejemplo, donde dice "Escribe un comentario". Yo le asigne un color de fuente azul claro (celeste, lightblue). La palabra !important es para darle prioridad dentro del código de la página. En los casos en que se aplicaba sin eso, no lo agrego, pero en este caso y en otros no se aplicaba porque al parecer la página le asignaba algún estilo particular y tuve que indicarle que le dé prioridad a mi código con esto de
!important.

div.barra2_body se refiere a la parte donde dice "Acerca de Jeansan". Yo le di el mismo color de fondo que a todo el perfil (azul oscuro, #006) y le apliqué un color de fuente azul cielo (skyblue). Había un borde que molestaba, así que se lo quité con la propiedad border:none (borde:ninguno).


ul.tabs_header, ul.tabs_header li: la segunda parte, después de la coma, se refiere a los botones de arriba: Sobre mi, Movimientos, Temas, Favoritos. La primera parte, antes de la coma, se refiere a lo que contiene esos elementos, una especie de franja que llegaba hasta la parte verde del perfil, a la derecha. Yo les puse fondo transparente y que no tengan borde. Tuve que aplicar !important, porque no lo reconocía.


7. Puede ser que en tu caso quieras conservar los bordes y fondos separados. Cada uno tiene sus gustos personales. Pero con lo que te dije, ya podrías modificar al menos las propiedades y elementos que te mostré. Lo más difícil es saber seleccionarlos.

8. Hay un límite de caracteres que no me permitió modificar el perfil completo. Me faltó la parte de la derecha, el cuadro verde con el avatar y todo eso.



PROPIEDADES UTILIZADAS:

background: color-de-fondo;
color: color-de-fuente;
border: grosor-de-linea tipo-de-linea color-de-borde;



BORDES

la propiedad border admite tres parámetros:

border: 2px solid blue;

Significa borde de un grosor de dos pixeles, con un tipo de linea normal  y de color azul.

Los colores se explican más abajo y el grosor obviamente sólo tienes que variar el número, así que voy a explicar las opciones de línea solamente.

solid: una linea normal
dotted: linea de puntos
dashed: linea de guiones

Efectos 3D:
inset
outset
ridge
groove

Dejo que lo experimenten, para que vean cada efecto. Pero traten de que el borde sea más grueso para que se noten los efectos. Eso iría, por ejemplo, así:

border: 5px ridge red;

Y finalmente, si no se quiere ningún borde:

 border: none;


FONDO:

Esta es la propiedad que vimos:

background: COLOR;

Ejemplo:


background:   blue;


Aparte de eso, hay otras posibilidades.


Poner como dondo del elemento una imagen:

background-image: url("ENLACE DE LA IMAGEN");

Presten atención a las comillas, y ahora dejo un ejemplo:

background-image: url("http://images6.fanpop.com/image/forum/199000/199123_1360240433882_full.png");


Fondo degradado:

background: linear-gradient(COLOR1,COLOR2);

Ejemplo:

background: linear-gradient(blue,black);

Esto da un fondo degradado entre azul y negro.



COLORES

Si quieren una lista, la más completa que vi la tiene Wikipedia, bajo el título Colores Web. Me pareció buena idea "tomar prestada" la tabla.



Los colores se pueden designar con su nombre en inglés, como ven en la primera columna. No importa si se escriben en mayúscula o minúscula, pero sí que el nombre esté perfectamente escrito.

Además de eso, los colores se pueden designar con un código hexagesimal (un código compuesto por el signo almohadilla/numeral y tres o seis números pero números hexagesimales, es decir, 0 al 9 y A a F). No quiero profundizar mucho, sólo sepan que pueden ir los números normales y también A, B, C, D, E, F. En el código de arriba, hay ejemplos de esta forma de escribir.

Realmente van con 6 cifras pero si se quiere abreviar, escribiendo tres cifras cada número se repite dos veces y por lo general no hace falta ser más específico para nuestros diseños, la comodidad hace que usemos tres.

0 es el más oscuro
Negro  = #000 o #000000

F es el más claro
Blanco = #FFF o #FFFFFF

Si son de tres cifras, el primero es rojo, el segundo verde y el tercero azul.
Si son de seis cifras, los dos primeros son rojos, los dos que siguen son verdes y los dos últimos son azules.

#+ROJO+VERDE+AZUL
#+ROJO+ROJO+VERDE+VERDE+AZUL+AZUL

Cuando todos son el mismo número, suelen dar colores grises (o blanco o negro).
Si un color es F y los otros 0, se verá ese color puro, se puede oscurecer manteniendo a los otros en 0 y bajando el valor de ese color. Ejemplo: #F00 es rojo, si escribo #900 es un rojo más oscuro y #600 es un rojo más oscuro todavía. Lo mismo pasa con el verde #0F0 y con el azul #00F.


También se pueden designar con rgb(rojo,verde,azul), donde "rojo","verde" y "azul" son un número entre 0 y 255 (escrito como estamos acostumbrados, no en hexagesimal).

Negro = rgb(0,0,0)
hasta
Blanco = rgb(255,255,255)


Es todo. Cualquier pregunta voy a tratar de responderla.



De 1 a 6 que tanto te gusto?

0

De 1 a 6 que tanto te gusto?

0


Comentarios 11

  • 2015-12-06 enviado porDarkens
    Ponele como que entendi, igual mas adelante lo use, igualmente gracias por el buen aporte.
  • 2015-12-06 enviado porJeansan
    X_X
  • 2015-12-06 enviado porJeansan
    toma como ejemplo la imagen de Dragneel, los elementos van separados por coma, y entre corchetes el estilo a aplicar.

  • 2015-12-06 enviado porDarkens
    Dije que pongas como que entendi, ademas tengo personalizado mi perfil asi que no se como entraria eso en mi perfil pero nunca se sabe igual despues lo uso
  • 2015-12-06 enviado porJeansan
    OK
  • 2015-12-06 enviado porLucyluzxd
    Genial tutorial complementario
    Gracias!
  • 2015-12-06 enviado porGeri13
    Buen tutorial, igual k darkens puede k lo utilize mas adelante ahora tengo el perfil muy editado XD
  • 2015-12-06 enviado porMendiguen
    Cuando creiamos que ya no se podia editar mas el perfil xD
    yo vi tanto texto que dije... nah. Aunque lo de los colores si es de gran ayuda, a mi costo encontrar el color que queria. Igual se agradece :)
  • 2015-12-06 enviado porDragneel
    Muchas gracias por el nombramiento en este post
    Hay demasiado texto xd como que no entiendo bien cual es el codigo que hay que introducir para ponerle color al perfil
  • 2015-12-06 enviado porJeansan
    está bien, voy a hacer una versión resumida más adelante. Pensaba que explicándolo se iba a entender mejor.
  • 2015-12-07 enviado porDragneel
    Es que tienes que poner los codigos que los usuarios deben introducir con captura de los ejemplos

Escribe un comentario


 

enviado por Jeansan

sexo Masculino

pais 737 (Nivel 4)

pais 151 Gemas

Mas sobre el autor
Te gusto esto?

Mas temas de Jeansan

Estadisticas: