Blog para torpes, eres de izquierdas ???
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.
5 Comentarios
1 Fernando (SN) 28/09/2007 10:05:05

Ah, OK. Quedo a la espera de tu correo para ver como lo hacemos. Por cierto, muy buenas entradas. Saludos.

2 Xavier Trias 28/09/2007 9:57:12

Hola Martin, darte la enorabuena por tu blog a que tienes, sirve mucho de ayuda y me ha servido de mucho.

Tengo una duda respecto a la separación del margen entre el Sidebar y el Content.

Te explico en tu Blog he visto que tienes separado mediante una linea de margen el Menu de la izquierda respecto al Contenido, podias explicar como configurar esa linea o algun parametro para hacerla mas gruesa.

Por otra parte como hago para quitar y cambiar en el Sidebar, el color del texto y el fondo del texto que en vez de Verde sea por ejemplo Lila.

Saludos y Visca el Barça.

3 Martin 28/09/2007 13:47:56

Hola Xavi te respondo con una nueva entrada en el blog, asi vale para mas gente, por la tarde la pongo.

Un saludo

4 Fernando (SN) 27/09/2007 8:40:19

Buenos días Martín. Que tal todo?

Perdona que te escriba a través de tu blog, no encontré tu email. Soy Fernando, Sol Negro. El motivo del correo es preguntarte si sabes de aparte de CoreFusion algún sitio donde pueda alojar mis NSF y una cuenta de correo Notes de forma gratuita o al menos económica.

Es que no quiero depender de tener todo el día mi ordenador encendido.

Bueno, eso es todo. Ah¡ Sigues teniendo una muy buena web, buen trabajo.

Saludos.

5 Martín 27/09/2007 11:12:42

Ahora estoy en un cliente en León, si te parece podemos comentarlo por la tarde, pero te adelanto que yo no tengo ningún problema en dejarte mi servidor para poner tu nsf's y te puedo crear una cuenta de correo.

Mirare tu dirección de correo en el mensaje y te explíco con mas detalle como sería la cosa.

Un saludo

Comentar
El comentario quedará pendiente de aprobación

SIDRA400
Blog para torpes, eres de izquierdas ???
SIDRA400
Entrada