Modificando las plantillas (Tutorial 1: Anchos)

JMiur

Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.

Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo más simple que es la plantilla Mínima.

Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.

Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.

Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están.

De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.

Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.

Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width) que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores.

Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.

ancho real = width + border + margin + padding

Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.

Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.

Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:

<div class="clear"></div>

Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor.

¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.

Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar.

En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:

#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}

y lo cambiamos por esto:

#footer-wrapper {
clear: both;
margin: 0 auto;
width: 660px;
}

#footer {
letter-spacing: .1em;
line-height: 1.6em;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
}

También agregaremos esto para que todos los bloques queden definidos:

#content-wrapper {
position: relative;
width: 100%;
}

Y ocultaremos la navbar porque me molesta:

#navbar {
display: none;
height: 0;
visibility: hidden;
}

Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos: [VER EJEMPLO]

Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:

#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $bodyfont;
}

Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería:

10 - 1024 - 10 = 1004

Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.

¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.

Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:

#outer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}

#header-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}

#footer-wrapper {
.......
width: 980px;  /* cambio 660 por 980 */
}

Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS:

#main-wrapper {
.......
width: 560px; /* 410 + 150 = 560 */
}

#sidebar-wrapper {
.......
width: 390px; /* 220 + 170 = 390 */
}

Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor [VER EJEMPLO]

¿Podemos seguir cambiando cosas? Sí: esto continuará ...