Blog para torpes, eres de izquierdas ???
Martin   26 Setiembre 2007
Un colega me ha hecho unas preguntas sobre el blog y la respuesta la voy a compartir con todos los que os habéis bajado algún archivo de blog de mi web.
Como sabéis aquí la madre del cordero está en la hoja de estilos y en los templates HTML.
La primera parte, "me gusta mas las entradas a la izquierda"
, como controlamos eso ???
Por supuesto en la hoja de estilos, en mi blog tengo un montón, pero en los ejemplos tendréis dos, una para el blog que ve la gente y otra para la parte de admin, me voy a centrar en el ejemploblog2.nsf.
Si desplegáis "Recursos", abrimos la vista que contiene las hojas de estilos, veremos que hay dos, blix.css y webadmin.css, de momento nos vamos a olvidar de webadmin, abrimos blix.css, (podéis hacer un copy/paste y cambiarle el nombre, por si rompes algo siempre tienes marcha atrás).
Para entender como está hecho el blog, antes de tocar nada mejor cuento un poco que elementos lo componen. Imaginaros un conjunto de marcos, arriba tenemos el Header, la cabecera, la anchura se ajusta al contenido, la altura la podemos cambiar dependiendo de la imagen que pongamos. En el centro tenemos el SideBar y el Content, ambos tienen tamaño fijo, en esta entrada explicaremos como ponerlos a la izquierda o derecha según nos guste más. Por último tenemos el Footer, la parte de abajo, también se ajusta al contenido (a lo ancho) y la altura es modificable.
Bien, en el blog todo es son páginas HTML, contenidas dentro del Container.
Vamos a mover el Sidebar (donde están los enlaces a las entradas) a la izquierda y el Content (las entradas) a la derecha, lo voy a hacer en el ejemplo,para eso hago botón derecho en la base de datos, nueva copia, (he hecho los cambios que pongo mas adelante) la pongo en el servidor con nombre de torpes2.nsf.
Edito la hoja de estilos, blix,css, busco donde están definidas la propiedades de Sidebar, se llama SubContent, pongo la imagen y una pequeña explicación :
Image:Blog para torpes, eres de izquierdas ???  Como podéis comprobar, pone "float:right", lo tengo que cambiar a "float left".
Después, busco el Content, y lo mismo pero al revés, pero claro, como podéis comprobar en este enlace no queda muy fino.
Nota
: La hoja de estilos tiene un montón de código, si te pierdes, botón derecho en modo edición, buscar, pon 205, es el tamaño del Sidebar, se parara justo en código que debes modificar.
Bueno, ahora que lo miro, no queda tan mal, lo único es el fondo que utilizamos para separar el Content con el SideBar, no le arreglo para que lo podáis ver pero voy a contar como arreglarlo.





Para arreglar lo del fondo buscaremos en la hoja de estilos la imagen container_bg.gif, veremos esto:
submarino amarillo.jpg
Cambiar el valor 730px, hasta que se ajuste a su valor correcto, lo que pretendemos es que sirva de separador entre el SideBar y el Content.

Porqué decía yo que se podía ver fatal al cambiarlo de derecha a izquierda ????
Que define le tamaño del blog ???, me parece que esto ya lo he comentado en otra entrada, pero lo repito para aclarar el tema:
El body no tiene tamaño, el tamaño lo da el Container, dentro del Contenier esta todo, el Container no es un elemento de diseño, puedes buscar las propiedades dentro de la hoja de estilos, podréis comprobar que en el ejemplo tiene 930px, si fuéramos muy finos la suma del Content y del Subcontent debería ser igual a 930px, pero siempre damos un poco de margen porque no todos los navegadores tienen el mismo comportamiento en el tema de padding, la versión 7 de Explorer parece que cumple mas los estándares HTML, pero en el 6 va por libre. Al cambiarlos de posición el Content se va para la derecha, pero igual se va demasiado, en ese caso deberemos cambiarle el tamaño para ir moviéndolo a la izquierda.
Que pasa si nos pasamos de tamaño y la suma supera 930px, se ira para abajo y quedara hecho un churro, el mismo resultado obtendremos si metemos una imagen mayor de 680px de ancha (el valor del Content).
Si metemos la pata y no sabemos que hemos roto, siempre podemos recurrir a la copia de la hoja de estilos, en el caso que rompamos una página HTML, lo mismo, fijaros en el blog de Alejandro Ahumada, parece que tiene roto el SideBar, la solución es fácil, esta usando la plantilla de la 7.0.2, en su caso sería crear una base de datos nueva, irse al template Sidebar y copy/paste de la nueva a la vieja, claro, parece que él no ha hecho cambios, pero si ya lo tenemos personalizado perderemos nuestros cambios. Quizás este exagerando un poco, esta claro que si miramos el código es fácil que veamos donde hemos metido la pata, pero esta entrada es para torpes (yo el primero), por esa razón pongo estos comentarios.

Bueno, ahora pasamos a la otra pregunta del colega, "Me gustan mas los colores del blog de NotesRing que los del tuyo", vaya hombre, gracias por el cumplido "Me gusta el amarillo, es mi colorrrrrr", voy a poner la marca de seguir leyendo porque me va a quedar una peazo entrada de la leche.
Luego sigo que ahora tengo curro.................
submarino amarillo.jpg En el pueblo en donde nací
Vivió un hombre que navegó los mares.Y nos contó sobre su vida
En la tierra de los submarinos.
Así que salimos navegando hacia el sol
Hasta que encontramos el mar de lo verde
Y vivimos debajo de las olas
En nuestro submarino amarillo.
Todos nosotros vivimos en un submarino amarillo,
Submarino amarillo, submarino amarillo.
Todos nosotros vivimos en un submarino amarillo,
Submarino amarillo, submarino amarillo.
Y nuestros amigos están todos a bordo,
Muchos de ellos viven en la puerta de al lado.
Y la banda empieza a tocar.
Todos nosotros vivimos en un submarino amarillo,
Submarino amarillo, submarino amarillo...




Bueno, vamos a lo serio, para cambiar el color de la barra superior he colgado un video en YouTube, el sonido no es bueno porque lo he hecho desde mi portátil pero creo que se ve claramente en que parte de la hoja de estilos lo modifico.
En el video coménto que el color que queda cuando muestra la página seleccionada no se define en la hoja de estilos, está en los templates HTML y en las "Web pages", pondré otro video explicandolo.
He visto el video y no me entero de nada, y eso que lo hecho yo, este es el enlace.
Me da un poco pereza escribirlo, cuelgo el archivo, esta comprimido, si alguien esta realmente interesado aquí lo tiene.
SIDRA400
Entrada