Cómo hacer una plantilla: modificando el ancho

Hola! Segunda entrega de la serie de tutoriales de 'cómo hacer tu propia plantilla'; esta parte es muy cortita porque solamente voy a decirles cómo tienen que hacer para modificar el ancho de la plantilla. Por defecto viene bastante angosta así que probablemente muchos quieran agrandarlo así que rapidamente veamos cómo hacerlo. Como es muy cortita, hoy habrá 2x1 y en la tarde publico una segunda entrada (que ya está lista, así que será publicada si o si!).

Bueno en primer lugar, hay que aumentar el ancho del outer-wrapper, es decir, no pueden ir directamente a aumentar el tamaño de las entradas proque eso causaría esto, que no queremos:

 

No se si se entiende, pero el sidebar se movería hacia abajo porque sobrepasa el ancho del lugar en el que está contenido. Entonces para evitar errores de este tipo, hay que tener en mente cual es el ancho que queremos asignarle a cada parte y 'sumarlas' y ese valor (o mayor, pero nunca menor) va a ser el ancho de nuestro outer-wrapper.

Por ejemplo, si queremos que el ancho de las entradas sea 600px y el del sidebar 300px, el ancho de nuestro outer wrapper debe ser, como mínimo, 900px. Yo recomiendo poner un pelin de más, por las dudas si agregamos margenes, unos 40 o 50px de más pero tampoco exagerar!

La propiedad que nos permite modificar el anocho es width (para las que sepana inglés, todo tendrá sentido jaja), por lo tanto, siempre que quieran modifcar el ancho de algo, deberan buscar su 'width'.

Ahora sí, ¿cómo modificarlo en la plantilla Mínima? 

ATENCIÓN: Para recordar en futuros tutoriales...

Antes que nada, una vez que estamos dentro del editor de HTML del blog, a la izquierda de donde dice <b:skin>...</b:skin> (entre las primeras líneas) aparece una flechita negra, hacen clic en ella y luego dentro del cuadro. Después, apretamos CTRL+F para que se abra el buscador dentro del cuadro de HTML; hacer clic en el cuadro de HTML es importante para evitar que se abra el buscador del explorador, ya que de esa forma, no vamos a encontrar lo que busquemos. 

¡Recuerden este tip ya que no lo voy a repetir en todos los tutoriales! La idea es que vayamos sumando conocimientos y no que entren unos y empujen a otros fuera de nuestras cabecitas jajajaj.

+ Buscamos #outer-wrapper y modifcamos el width por el ancho deseado, teniendo en cuenta lo que expliqué anteriormente. En mi caso agregaría:

       width: 950px;  {600px (entradas) + 300px (sidebar) + 50px extras}

¡Es muy importante que al finalizar cada propiedad escriban el ';' ya que sino no saldrá, o se verá mal!

Inmediatamente debajo encontrarán #main-wrapper y #sidebar-wrapper así que hacen lo propio con esos dos apartados.

+ Además de esto, debemos modificar el ancho del header que como explique en la primera parte, es tema aparte. Simplemente, debemos buscar #header-wrapper y modificar el width. Les recomiendo que le pongan el mismo ancho que al #outer-wapper, pero para gustos los colores. Importante aquí es que luego, si utilizan una imagen como header, lo hagan del ancho que ponen aquí.

Y bueno, como este tutorial es muy cortito en un ratito publico uno más, que es un poco más largo pero me parecía importante explicar esto. Cualquier duda, ya saben... Besos!