Quickribbon

miércoles, 13 de junio de 2007

Plantilla Rounders 4 con sidebars a ambos lados

Hace ya tiempo, en alguno de los comentarios de este blog se me preguntaba como se podía pasar de una plantilla Rounders 4 (como la plantilla primigenia de este blog) a una en la que tuvieramos columnas laterales a ambos lados. La verdad es que anduve un poco liado, pero estos días he vuelto a retomar el blog y me he acordado de esa cuestión.

La solución para transformar la plantilla pasa por una serie de incursiones en el editor HTML con la que los errores son bastante habituales así que es conveniente hacer una copia de nuestra plantilla por si las moscas... ;)

Los pasos que cito a continuación son teniendo en cuenta que el punto de partida sea una ROUNDERS 4 sin modificaciones en las sidebars, es decir, una ROUNDERS nativa o al menos lo más posible en la estructura.


Lo primero que vamos a hacer es cambiar ciertos parámetros de la anchura total del blog. Buscamos en nuestra plantilla este código:

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

Cambiamos el valor 740 por 995

Justo a continuación encontraremos este otro fragmento:

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0
;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}

En la linea resaltada añadimos 15px de manera que nos quedará así:

margin:15px 0 0 15px;

Seguimos bajando por la plantilla y un poco más abajo encontraremos esto:

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

Justo detrás añadiremos esto:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

#newsidebar-wrap1 {
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url
("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 8px;
}

Al haber variado los tamaños y teniendo en cuenta que esta plantilla tiene los bordes redondeados tendremos que sustituir las imágenes para los bordes del header y del footer.

Buscamos la primera sección :

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url
("
http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url
("
http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Las líneas en rojo son las nuevas imágenes que tendremos que poner en lugar de las de la plantilla original.

Hacemos exactamente lo mismo con la siguiente sección:

#footer-wrap2 {
background:$titleBgColor url
("
http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
padding:8px 0 0;
color:$titleTextColor;
}
#footer {
background:url
("
http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:8px 15px 8px;
}


Bueno, ya queda poco... ;)
Buscamos esta sección y añadimos la linea en rojo:

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #newsidebar-wrap,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

Unas líneas más abajo encontraremos el ancho del #outer wrapper que hay que sustituir por 995 pixels, así que nos quedará de esta manera:

body#layout #outer-wrapper {
width: 995px;
}

Ya sólo nos queda un paso por dar. Buscamos esta sección:

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>

y justo encima ponemos todo esto:

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

Con esto ya debería de estar todo perfectamente. Ahora tan sólo nos queda guardar y una vez comprobado que no hay errores, ir a la plantilla de diseño y colocar los widgets, códigos... etc que deseemos para adecuar nuestro blog al nuevo estilo.

Si tenéis alguna duda o algo no va bien (exceptuando erratas que puedan haber surgido) podeis revisar paso a paso el proceso en Tips for New Blogger.


31 comentarios:

Raig* dijo...

hola tengo una duda y espero que me puedan ayudar, yo utilizo la plantilla minima y hace tiempo ya le había cambiado el header que era de 660px width pero ahora le quiero poner uno que tiene 1520px por 350px y cdo lo hago toda la imagen se me va hacia la derecha porque hay un margen a la izquierda y uno chiquito arriba,
hay alguna manera de que la imagen del header me abarque todo sin dejar esos margenes?
les dejo el blog con el error a ver si uds saben como solucionarlo
www.flotandoporahi.blogspot.com

Anónimo dijo...

Hola que tal, muchas gracias por tu web, y no quiero molestarte, solo tengo una duda, quisiera saber si conoces la forma de que los post, se vean casi transparentes pero del todo, para que se puede ver la imagen que tengo al fondo estoy usando precisamente la platilla Rounders 1, muchas gracias espero me puedas ayudar, si no que estes muy bien no importa :)

Zaebos dijo...

Raig, supongo que lo que te pasa es que no has modificado el outer wrapper. Tienes que aumentarle el ancho para que quepa el header dentro.

Puedes mirar este otro post:
http://karalletest.blogspot.com/2007/02/modificar-el-ancho-de-la-plantilla.html

busca en tu plantilla
#outer-wrapper {
width: ANCHO TOTAL

Zaebos dijo...

Para poder poner una imagen de fondo en el post:
buscar esta seccion en la plantilla:

.post-body {

y añadirle justo debajo:
.post-body {
background: url(URL DE LA IMAGEN)

Yo extrajero dijo...

Hola! Descubrí por puro caso este sitio que encuentro muy interesante.
Quisiera saber, como has hecho o si es posible que yo pueda incluir en mi bitácora, las pestañas que veo en la zona superior. Gracias! ;-)

Zaebos dijo...

Siempre que sea de Blogger, puedes mirarte este post:

http://karalletest.blogspot.com/2007/03/mostrar-categoras-como-etiquetas.html

Yo extrajero dijo...

Ok! Gracias! Ya lo pondré a la prueba! Hasta pronto! ;-)

palacios dijo...

Hola soy alfonso, antes que nada gracias por la ayuda me funciono muy bien las tres columnas (palaci0s.blogspot.com), pero quisiera dejar la columna principal (ancha) a la izquierda y no al centro, (asi como el tuyo), si me puedes ayudar, ya que te lo agradeceria mucho, salu2, alfonso

Zaebos dijo...

Pues la manera más sencilla creo que es que vayas a "descargas" en esta misma página y te bajes la plantilla que estoy usando...

palacios dijo...

gracias por la respuesta pero tus "descargas" no estan funcionando me puedes ayudar?

Zaebos dijo...

En realidad si funcionan porque he probado a bajarla ayer mismo por si las moscas... el problema puede ser tu ubicacion, porque ya me paso con otra persona...
dejame un mail y te la envio

Anónimo dijo...

hola , gracias por la ayuda para cambiar la rounders 4, pero tengo un pequeño problema, no se como cambiar el color de fondo de esa columna, me sale es mismo que la central,como puedo cambiar el color, Gracias de nuevo
http://waterpolomontjuic.blogspot.com/

Zaebos dijo...

El código que define esa columna es:

#newsidebar-wrap1 {
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

cambia $mainbgcolor por otra variable a tu gusto o si no sabes como hacerlo busca el valor hexadecimal del color que quieras (por ejemplo con photoshop) y lo pones... algo así:

background:#CODIGO DEL COLOR url
("http://www.blogblog.com/rounders/corners_side_top.gif")

PedroX dijo...
Este comentario ha sido eliminado por el autor.
All Blacks dijo...

HOLA, TENGO UN PROBLEMA, NO SE PORQUE MOTIVO ME HA DESAPARECIDO EL COLOR EN LA PRIMERA COLUMNA ??, ¿QUE PUEDO HACER? POR CIERTO HAY ALGUN SISTEMA PARA CAMBIAR EL FONDO DEL BLOG.
GRACIAS POR TODOS Y SALUDOS CORDIALES
http://waterpolomontjuic.blogspot.com/

Zaebos dijo...

Si tu problema es referido a la plantilla de 4 columnas creo que la respuesta anterior a tu pregunta te puede valer

Haîmat dijo...

Zaebos, tengo un problema con la plantilla rounders 4. He intentado poner la segunda sidebar tanto por tu metodo como por otros que he visto por ahi, pero en unos no encuntro tal codigo, en otros tal otro y en el ejemplo que me pones tu, aunque encuentro todo (header-wrapper header footer-wrap2 footer y div id='main-wrap1' son mis dudas pero estan encontradas) no me guarda ni deja hacer vista previa ni nada. Intente entonces poner la plantilla prefabricada que has puesto para descargar y me dice hay aulgun elemento sin cerrar (">")
Yaaaa no se que hacer XD Mira a ver si puedes ayudarme un poco Xd
Saludos

Zaebos dijo...

Pues yo veo que te funciona:
http://dominandoelmundo.blogspot.com/

Pablo dijo...

Infinitas gracias

Ferdy dijo...
Este comentario ha sido eliminado por el autor.
Ferdy dijo...

Hola!! Pues e intentado solucionar lo de que la sidebar de la izquierda aparezca en transparente y no soy capaz, no se que pasa. Ya intente lo de el comentario anterior y nada esta supuestamente todo igual. Me pueden ayudar???

Ferdy dijo...

Hola, a ver imagino que quien lleva el blog esta de vacaciones xoo... alguien sabe o a podido solucionar este pequeño percance???

Y si por favor el admin me lee pues que aunque sea me diga que no hay solucion, pero es que llevo unos dias metiendome casi a diario y... nada.

Gracias y felices fiestas

Zaebos dijo...

Ferdy, la verdad es que hace mucho tiempo que no tengo precisamente eso... tiempo ;)

A ver... he entrado en tu perfil y he visto que tienes 3 blogs de blogger.. explícamen cual es el problema y a ver si solucionamos algo... siento tener la página tan súamamente abandonada, pero precisamente es cuando estoy de vacaciones o tengo tiempo libre cuando le dedico tiempo....

Ferdy dijo...
Este comentario ha sido eliminado por el autor.
Zaebos dijo...

Antes de nada.... COPIA LA PLANTILLA ACTUAL no vaya a ser que luego nos arrepintamos. Después prueba esto:
te lo voy a enrollar un poco más de la cuenta, pero así podrás cambiar el color siempre que quieras sin tener que meterte en la plantilla. Es algo que recomiendo siempre que se trate de cambiar colores y es el definir la variable de color para luego poder cambiarla desde el propio escritorio de blogger (fuentes y colores)
para definir una variable vete a tu plantilla, y casi al principio del todo verás esto:
*/ Variable definitions:
=========================
justo debajo comienzan las definciones que son lo que hacen que tu blog tenga tal color en el fondo, en las fuentes... etc...
vale, definimos una nueva que llamaremos "fondo barra izquierda"
Para eso introduce este texto justo debajo de variable definitions:
<Variable name="fondobarra" description="fondo barra izquierda"
type="color" default="#fff" value="#f2984c">

los valores default y value son los valores por defecto y el actual respectivamente, que no se ni cuales son porque los he copiado de mi plantilla, pero esto lo hacemos así porque después podrás poner el que quieras desde "fuentes y colores"

vale, variable definida:
ahora viene el meollo:

Busca en tu plantilla esto:
#newsidebar-wrap {

ahí se define todo lo que corresponde a esa barra maldita ;)

bien, pues ahora añade justo debajo esto:
background:$fondobarra url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;

bueno, graba la plantilla y con esto debería estar solucionado
ahora vete a diseño, fuentes y colores y verás que hay una nueva variable que puedes cambiar, de hecho la primera, que se llamará "fondo barra izquierda"

espero que te haya servido.

te dejo unas imágenes que he tomado de la plantilla donde lo he probado:
http://img213.imageshack.us/img213/4498/prueba1wu6.jpg

http://img213.imageshack.us/img213/9785/prueba2dz2.jpg

Ferdy dijo...

De luxe!!!! Gracias por todo. Como de costumbre las esquinas no quedan muy alla que digamos pero suficiente. Mil gracias.

Apuntado tu blog en mi (escueta) lista de favoritos.

Zaebos dijo...

para cambiar las esquinas tendrás que editar la imagen:
http://www.blogblog.com/rounders2/corners_main_top.gif
puedes hacerlas a tu gusto, subirlas a imageshack, photobucket.. etc y cambiar la url de la plantilla por la nueva.

Franz Villafuerte dijo...

Hola, gracias por la ayuda todos los pasos me salieron bien, pero al final en el ultimo paso
en el que pego un codigo encima me marcaba error..
intente muchas y no me dio resultado
bueno, espero que me puedas decir en que estoy fallando. gracias

Rodrigo Antonio Meléndez Morales dijo...
Este comentario ha sido eliminado por el autor.
Miguel dijo...

Quiero cambiar como se ven los post, como se ven en tu blog, es decir que se visualicen uno debajo de otro, me figura que en el name Rounders, sin ningún numero que debo cambiar?

Gracias.

Jm dijo...

Gracias maestro! hice todo tal cual lo indicas, y me aparece este error
El nuevo artilugio con el ID "NewProfile" pertenece a un tipo no válido: NewProfile
¿Qué podrá estar sucediendo?
Es el útlimo obstáculo que me frena, ya varias veces... desde ya muchas gracias

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas