Agregar nueva columna - Plantilla Thisaway

En esta entrada veremos cómo agregar una nueva columna a la plantilla Thisaway y sus derivaciones.
agregar nueva columna - plantilla thisawayEn primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}


Empezaremos modificando el ancho del blog, por lo que en el código anterior sustituimos los 760 píxeles por 990 px.

Esta misma modificación la haremos en el código:

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(
http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}


A continuación, buscaremos el siguiente código:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(
http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Una vez encontrado, lo copiamos y lo pegamos justo debajo, realizando las modificaciones oportunas en el nombre y alineación de la barra, por lo que el código nuevo sería el siguiente:

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(
http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ahora insertaremos la nueva columna en el cuerpo (body) de la página. Para ello, buscamos el código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Éste es el código de la columna lateral que tenemos a la derecha del blog. Lo que haremos será copiar y pegar este código justo antes de la línea <div id='main-wrapper'>

Una vez pegado el código, modificaremos el nombre y eliminaremos los gadgets puesto que no pueden estar duplicados, por lo que el código de esta nueva columna quedará de la siguiente forma:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


Guardamos los cambios efectuados en el código de la plantilla y, mediante la opción Elementos de la página (ficha Diseño), agregamos un gadget nuevo a la barra lateral creada.

Si guardamos los cambios y visualizamos el resultado, comprobaremos que la barra lateral derecha aparece en la parte inferior por falta de espacio.

Para solucionar esto, vamos a modificar el ancho de las barras laterales. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de ambas barras, es decir, los siguiente códigos:

barra lateral izquierda -> #newsidebar-wrapper {

barra lateral derecha -> #sidebar-wrapper {

Estos son los códigos con los que empieza la definición de ambas barras, lo único que tendremos que hacer es modificar el valor del ancho, que lo determina la propiedad width, a 220 píxeles en vez de 269 px que es el ancho que tiene definido actualmente.

Guardamos de nuevo los cambios y el resultado debería parecerse a la siguiente imagen:

agregar nueva columna - plantilla thisawayLlegado a este punto, ya solo nos hace falta maquillar un poco la apariencia del blog eliminando o retocando las imágenes que aparecen tanto en el encabezado del blog como a derecha e izquierda que es el borde que visualizamos, en este caso, de color marrón más oscuro.

Si decidimos eliminar ambas imágenes solo se perderá ese aspecto redondeado en la parte inferior del encabezado y el borde derecho e izquierdo que aparece en marrón más oscuro.

A continuación os indico donde están definidas, en el código HTML de la plantilla, ambas imágenes y que cada uno decida si quiere eliminarlas o bien retocarlas bien con Photoshop o cualquier otro programa de retoque fotográfico.

Código que define la parte inferior del encabezado:

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}


Si decidimos eliminar la imagen, este código quedaría de la siguiente forma:

#header-wrapper {
padding-bottom: 15px;
}


Y, por último, os indico el código donde está definida la imagen que hace que aparezca ese borde a derecha e izquierda:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}


Al igual que antes, si decidís eliminarla, el código quedaría de la siguiente forma:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9;
}


Hecho esto, guardaríamos los cambios y el resultado, habiendo eliminado ambas imágenes, sería el siguiente:
agregar nueva columna - plantilla thisawayPor cierto, hablando de programas de retoque fotográfico os he indicado que lo podéis hacer con Photoshop o cualquier otro programa.

Otro programa de retoque fotográfico es Gimp, cuya página principal podéis visitar haciendo clic en este enlace, y cuyo funcionamiento podéis aprender mediante este blog cuya autora es misaani.

16 comentarios:

Sue dijo...

I NEED HELP!!!!
Como ya te comenté, la informática y yo somos y seremos enemigas hasta la muerte... Estoy intentando hacer lo q explicas pero es q no tengo esto:
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}
Eso quiere decir q me he saltado algo???

misaani dijo...

hola José M te agradezco mucho tu ayuda, tanto con la plantilla como con tus recomendaciones.
Estoy todavía realizando cambios, cuando tengas un momento te pasas y me das tu opinión y/o sugerencias.
Muchas gracias y saludos

José M dijo...

Hola Sue,

esta entrada no es válida para la plantilla que tienes definida en tu blog, puesto que los códigos pueden variar de una plantilla a otra.

La entrada que es válida para la plantilla que tienes aplicada en tu blog es esta.

Saludos.

José M dijo...

Hola Misaani,

la verdad es que el blog te ha quedado genial, me alegro que lo hayas conseguido.

Saludos y gracias por tus comentarios.

Sue dijo...

Me rindo!! después de varias intentonas desisto, no me sale!! Como mi columna la tengo a la izquierda quiero poner una a la dcha. pero no hay forma...Soy un 'cenizo' para la informática. Gracias de todas maneras.

José M dijo...

Hola Sue,

te aconsejo ... bueno a ti y a todo el mundo, tener un blog de pruebas donde poder probar cosas para no realizarlo en el blog principal.

Una vez lo hayas realizado en el blog de pruebas y hayas visto el resultado, podrás realizarlo sin ningún problema en el otro blog.

La plantilla que tienes aplicada es Minima Lefty y la entrada que le corresponde a ese tipo de plantillas es esta con algunos cambios claro, puesto que como indicas tu barra lateral original está a la izquierda.

QUETA dijo...

hola, gracias por este tuto, la verdad es que he ma sido de gran ayuda porque hacía tiempo que quería añadir una colunma mas a mi blog y por fin!!! lo he conseguido; pero... tengo un pequeño problemilla, el espacio entre la colunma de la derecha y la central es mas grande que el espacio entre la columna de la izq y la central, ¿podrías ayudarme a corregir este fallo de márgenes? muchas gracias por adelantado

José M dijo...

Hola Queta,

Si quieres igualar el espacio que hay entre la columna izquierda y la central, inserta el siguiente código en el apartado Page Structure de la nueva columna (newsidebar):

padding-$endSide:1em;

QUETA dijo...

Hola Jose M:
He estado buscando el apartado page structure del newsidebar pero... no lo tengo, y ya estoy con la duda de haber hecho algo mal...
el caso es que... pensando y pensando... me acordé de que se había modificado el ancho de las columnas, entonces... como cada sidebar ahora es de 220px, y el tamaño total es de 990px, lo que he hecho es ir aumentando poco a poco el tamaño de la columna central (y abusando de la vista previa) hasta que ha quedado ajustada con 540px, bueno... no se si será la mejor solución y tampoco sé si es normal que me falten trocitos de código.
Un millón de gracias por la ayuda.

José M dijo...

Bueno el problema que tiene todo esto es que no todas las plantillas tienen un código genérico, cada plantilla tiene un código diferente y hay que investigar un poco hasta dar con ello.

Me alegro que lo hayas podido solucionar, saludos.

Kyuketsuki-sama dijo...

Hola!! =D muchas gracias por el tutorial!! *-* justo lo que estaba buscando! =D intente de una y mil maneras y nada mas no podia TOT

Nadamas tengo un pequeño problema =/ no se si me puedas ayudar con esto jujuju ^^U

Por mas que hice todo al pie de la letra =/ no puedo hacer que una quede a la derecha y otra a la izquiera de la entrada... ambas quedan del lado derecho =/

Picandole por ahi y modificando codigos XD logre que una quedara a la izquiera, pero el problema fue que no pude centrar la entrada =/ una de las columnas laterales y la entrada quedaban ensimadas u__u

Sabes que es lo que estoy haciendo mal? D=!!

Gracias de antemano ^^ y disculpa la molestia u_u

José M dijo...

Comprueba la alineación (float) de las columnas que tienes en el blog.

Kyuketsuki-sama dijo...

Ya lo intente =( pero sigo teniendo el problema...
La seccion de la entrada se hace enorme >_< se expande demaciado, aun teniendo la especificasion de que su tamaño debe ser 500px



#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: margin: 0 auto;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 3px;
padding: 0;
width: 500px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Por mas que analiso no se que estoy haciendo mal =(

http://diariosecretojk.blogspot.com/


Disculpa las molestias ^^U

José M dijo...

Te falta poner la alineación en la propiedad float

Kyuketsuki-sama dijo...

Sientete con la libertad de mentarmela ^^U o simplemente ignorarme ^^U se que ya cruse la linea de la ignorancia aceptable XD pero ahora se me presento otro problema u__u

Ya logre centrar la columna de las entradas =/ el unico problema es que ahora las columnas quedan por debajo de la entrada u_u queda de la siguiente manera:

http://i153.photobucket.com/albums/s226/Yuki-yuki_photo/Untitled2.jpg

Ya le modifique todo lo modificable DX! pero no consigo subirlas a su sitio X_x intente con float, margin... pero nada.
No es problema del tamaño de las secciones que no coinsidan con la suma X_x ya intente con eso; tampoco es problema del contenido de las sidebar ni de las entradas, intente borrando todo y tuve el mismo resultado.

Estoy en desesperacion X_x definitivamente el css no es lo mio TOT

Como ya dije ^^U siento mucho ser tanta molestia ^^U y sientete con la libertad de no responderme si ya te aburri XD estoy consiente de ello XD

José M dijo...

Bien, si te queda en la ficha Diseño debajo ese no es ningún problema puesto que a mi también me quedan asi.

El problema es si te queda por debajo en la vista de la página web.

Si es así, aunque estoy viendo tu blog y creo que ya lo tienes bien colocado, solo te queda modificar el ancho general (width del apartado outer-wrapper) del blog y si aun así no te queda bien, disminuye un poco el ancho de las barras laterales (width de los apartados sidebar-wrapper y newsidebar-wrapper)

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.