[Ultimate Profile] Alinear y escalar header y sección de contenido
XOPLANET 2.2

[Ultimate Profile] Alinear y escalar header y sección de contenido

OLPCMaster V2

  • ***
  • 271
    • En YouTube
  • Laptop: : --
Bueno, para aquellos usuarios privilegiados con el Ultimate Profile podrán alinear el header y la sección de contenidos (content_section) a la izquierda o derecha, para que se pueda ver mejor el fondo que hayamos puesto.
Una demostración se puede ver en mi perfil o en la captura dentro del spoiler:

[spoiler]
http://imageshack.com/a/img51/4193/bh4t.jpg[/spoiler]

Es un poco complicado, sobre todo para el que no entiende la sintaxis y el uso de los códigos, ¡vamos a empezar!.

A) Si tenemos la modificación que permite agregar una portada a nuestro perfil podemos alinear ambas cosas, teniendo en cuenta el tamaño elegido para la portada, que en mi caso es 380px, sino se sigue el código la portada no se verá.
Supongamos que tenemos este código:

Código: [Seleccionar]
/*Header, parte de arriba */
#header { background: url(ENLACE DE LA FOTO DEL HEADER) #A0A0A0 no-repeat; background-size: 100% auto; height: 380px; background-position: center top; box-shadow: 0px 0px 12px #A0A0A0; width: 64%; position: absolute; left: 0px; top: 0px;}

/*Sección del contenido, donde están mis datos, acciones, comentarios, etc. */
#content_section { width: 64%; position: absolute; left: 0px; top: 380px;}

Se puede ver en ambos:

Cita de: header
Código: [Seleccionar]
width: 64%; position: absolute; left: 0px; top: 0px;
Cita de: content_section
Código: [Seleccionar]
width: 64%; position: absolute; left: 0px; top: 380px;

En ambos códigos confirmaremos donde y que anchura queremos en ambas cosas, si a la izquierda o derecha, para esto cambia left por right si las quieres a la derecha, deja en left si la quieres a la izquierda. Para el tamaño cambia el porcentaje en width que definirá el ancho de la portada, lo mismo lo harás con la sección de contenido, pero ojo, en content_section el valor de top tiene que ser el mismo que la altura de la portada, si esto se ingresa mal habrán problemas, entre ellos que la portada no se vea, etc.

B) Si no tenemos portada, será más fácil y la sección de contenido se moverá hacia arriba del todo:
Código: [Seleccionar]
#content_section {width: 64%; position: absolute; left: 0px; top: 0px;}
Si después de un tiempo de haber usado el código quieres poner la portada asegúrate de cambiar el valor de top por el mismo de alto que tiene la portada y asegurar que el código tiene los parámetros de position, height, top y left o right.

Si haces todo bien quedará como lo mostré en la captura del spoiler de arriba. Cualquier cosa comentad.
--