Trial & error

El conocimiento hay que socializarlo, por eso decidí contarles algo acerca de como modifique la Plantilla del blog. Todo está hecho sobre la Plantilla "Minima".

Lo primero que quería hacer es agregar una imagen en el fondo. Para hacer esto hay que buscar donde dice

body {

background: #fff;

y cambiarlo por

body {

background-image: url('http://img150.imageshack.us/img150/7722/ciudadvp9.jpg');background-attachment : fixed;

donde la dirección url corresponde a la ubicación de la imagen.

Detalles a tener en cuenta:

• Conviene que la imagen esté alojada en ImagesHack (o algún alojador de imágenes similar porque utilice Google Sites (el sucesor de Google Page Creator) y Picassa Web y no logro que el link funciones bastante tiempo;
  
  
• Utilicé una imagen de 1024 x 768 pixels. En el caso de ImagesHack, éste tiene una función que ajusta el tamaño de la imagen a algunos tamaños ya predeterminados.


• En este caso la imagen permanece fija mientras el texto es el que se mueve. Si quieren que la imagen se mueva (se va a repetir una y otra vez según 1) el tamaño de la imagen elegida y 2) la cantidad de texto que tenga la página) hay que eliminar

background-attachment : fixed;

Tambien quise aumentar el ancho del campo de texto y cambiarlo de lugar, desde la izquierda de la página a la derecha. Para realizar lo primero hay que ubicar la porción del código que regula el tamaño total del texto en la pantalla, para así tener tener lugar para agrandar luego el campo de texto (y no la sidebar) :

#outer-wrapper {
width:660px;
margin:0 auto 10px;

y el valor de width modificarlo por el ancho que prefieran, en mi caso "990". Luego hay que modificar lo mismo en la porción del código que corresponde al ancho del texto de los posteos, que es el siguiente:

#main-wrapper {
width: 440px;
float: left;

y modificar nuevamemente el valor del ancho ("width"). Para cambiar la ubicación de izquierda a derecha hay que modifcar el contenido de la variable "float:" de "left" a "right". Por supuesto tambien hay que cambiar

#sidebar-wrapper {
width: 220px;
float: left;

el valor de "float:" de la sidebar de "right" a "left".

Tambien agrande el tamaño del título. Para hacerlo hay que seguir el método ya explicado para los campos de texto pero en vez de buscar el #outer-wrapper hay que buscar el #header-wrapper. Para quitar el marco que aparece en la plantilla original debe eliminarse la siguiente porción del código:

border:1px solid $bordercolor;

Si en vez de eliminarlo quieren aumentar el grosor del borde hay que cambiar el valor númerico de la variable "border:".

Y para este posteo tuve que aprender a tabular el texto. Antes me las rebuscaba agregando carácteres del mismo color de la página, pero habiendo una imagen detrás no había color posible.
Entonces: "p style="TEXT-INDENT: 50px"" y luego hay que cerrarlo con el "/p", ambos comandos encerrados entre "<>".