52

Ensanchar plantilla thisaway blue


Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Esta es una de las plantillas de Blogger a la que es necesario modificar sus imágenes para conseguir ensancharla y que se vea optimamente.
Por supuesto, estas modificaciones parten de una plantilla "virgen", es decir, tal cual la proporciona Blogger.

1- Buscamos el #outer-wrapper { y modificamos su ancho en 950px:
width: 950px;
Hacemos lo mismo en #content-wrapper {
width: 950px;
2- En #main-wrapper { ponemos de ancho 600px:
width: 600px;
En
#sidebar-wrapper { ponemos de ancho 342px:
width: 342px;

3-
En #sidebar { Cambiamos los pixeles de la imagen de adorno para que se vea un poco más hacia la derecha:
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 250px 0;
Si preferimos eliminarla (es ese adorno que parece un arbolito) borramos esa línea.

4- Ahora vamos a sustituir las imágenes del fondo por las que he modificado:

En #header-wrapper { cambiamos la url de la imagen por esta otra:

http://img142.imageshack.us/img142/2771/barraheaderjq1.gif

En #content-wrapper { cambiamos la url de la imagen por esta otra:

http://img225.imageshack.us/img225/2120/bgmainwrapperlq4.gif

En #footer-wrapper { cambiamos la url de la imagen por esta otra:

http://img524.imageshack.us/img524/5626/barrapiete3.gif

La he probado en Internet Explorer y Firefox con óptimos resultados.



DESCARGAR PLANTILLA

Entradas Relacionadas:

52 comentarios:


Anónimo

Gracias Rosa, salió tal cual!.
F3DOR VL4DIMIR

d@kost

Gracias rosa me sirvio de mucho estaba cansado de todo tan apeñuscado

Anónimo

hola,ayer he visto tu web por primera vez y sin duda eres la mejor en explicar todas estas cosas que nos ayudan a hacer un mejor blog.En mi caso llevo utilizando la plantilla Harbor durante un año pero la quiero cambiar por la Thisaway blue,el problema es que no doy conseguido añadir una nueva columna,en cambio con la otra que tenía sí que puedo gracias a ti.
La verdad es que la plantilla Harbor con dos columnas queda un poco cargada,por mucho que amplíe el ancho pues no me gusta,en cambio en la Thisaway blue creo que se presta mejor una segunda fila.¿cómo lo hago?También tenía pensado cambiar el color de fondo de una de las dos columnas,¿se puede hacer?

Kike

Hola Rosa! Yo tengo esta plantilla, y e seguido todos tus pasos. Y al final queda todo bien de forma excepto que en la sidebar sale como una raya en medio(a partir del segundo post. Pr cierto, la mia es la thisaway de color marron-naranja.
Espero que me puedas contestar en cuanto puedas.
Gracias

prisonbreakkclub@gmail.com

Rosa

Kike, hevisto tu blog con IE y Firefox (últimas versiones) y no veo nada raro,ni ninguna raya... Puede ser cosa de tu navegador...

Te dejo el borde de abajo de la cabecera por si quieres colocarlo, es en #header-wrapper { cambias la url por esta:
http://img144.imageshack.us/img144/5725/headerabajobg8.jpg

Y en #footer-wrapper { esta:
http://img143.imageshack.us/img143/2973/footerarribaii1.jpg

Adictísima

Saludos, Rosa!

Simplemente te visito para comentarte que ayer encontrè de casualidad tu blog y esta ampliaciòn de plantilla que era lo que yo querìa hace semanas. Me viniste de lo mejor y estaba genialmente explicada. Que vaya que lo que sè de HTML es tanto como nada.

Muchìsimas gracias!

Saludos,

Rosa

Adictísima, gracias, te ha quedado muy bien y además has sido tan amable de referenciarme en tu blog, no todo el mundo lo hace.

¡Un abrazo!

Serenity

Muchas gracias!!
Es lo que andaba buscando.
Solo queria pedirte un super favor, si tendrias las imagenes para esta plantilla pero en color rosa, es que no se modificarlas.
Saludos!!

canamu = La web del coste

hola Rosa me tope con tu blog de casualida y me a parecido muy chevere y acabo de provar este truco en mi blog y me ha quedado de maravilla muchas gracias y segire buscando aver que mas cositas me sirven .ok y de nuevo gracias rosa la primorosa jejeje.. ha y este es mi URL por si lo queres ver ok.= http://el-coste.blogspot.com/

Ángela Espinosa

Rosa, tienes un blog estupendo.

Yo ya me he puesto manos a la obra para añadir cositas a mi blog. He empezado por ensanchar la plantilla de thisaway rose.

En mi caso es de color rosa, peor he realizado todos los cambios que tu explicas, cambiando blue por rose, pero una parte del blog se vé de color azul.

¿¿¿Me podrías echar una manita???

Gracias y enhorabuena.

Rosa

Ángela, el problema es, como ya digo en la entrada, que el fondo del blog está conseguido con imágenes y yo no tengo ni idea de editarlas para cambiar su tamaño, de hecho para hacer esta entrada me ayudó un amigo con el tema...

Podrías hacerlo sustituyendo las imágenes por colores, es decir, eliminando donde va la url de la imagen y cambiándolo solo por el color, por experiencia te digo, que el efecto es casi el mismo.

Estas son las partes a modificar una vez hechos los cambios de las medidas:
#content-wrapper {
position: relative;
width: 950px;
background: #fcecf1 ;
}


#main {
padding-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: #fcecf1;
}


#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: 342px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background:#f8e0e8;
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 */
}

.con.ganas.de.huir.

Rosa eh cambiado mi plantilla harbor a esta,ya que necesitaba una renovacion.Hice todo lo que mencionas aqui, es mas he leido los comentarios ya que podrian ser parte de mi problema.
En mi caso me pasa lo mismo que Kike me sale la sidebar con una raya en el medio apartir del segundo post,cambie las imagenes (aunq las quisiera mas chicas) y no hay caso,vuelve a lo mismo.
Desearia que me ayudes,ya que queda muy feo asi.
Gracias de todas maneras.
Como siempre excelente el blog cada dia mejor!

Rosa

.con.ganas.de.huir., el problema de KIKE era su navegador que andaba aún con versión antigua...no se cual es tu caso porque no veo tu blog:

Perfil

Galera

Hola Rosa, para empezar darte las gracias porque con tu ayuda he conseguido hacer algo que llevaba queriendo hacer hace tiempo.

En mi caso, al igual que con Angela, uso tambien la plantilla rosa y no la azul.He hecho los cambios que le mencionabas a ella de ponerle los colores en lugar de cambiar la url y todo ha ido perfecto.

Ahora lo unico que me falta es cambiar el borde de abajo de la cabecera y el borde de arriba del pie.
Es decir: #header-wrapper y #footer-wrapper

Me puedes ayudar por favor. Saludos y gracias de nuevo.

PD: Mi blog es www.trihia.es

Rosa

Galera, no suelo hacerlo, la verdad, más que nada porque los programas de diseño de imágenes y eso...no se me dan nada bien.

Pero he ido a ver tu blog y, nada más entrar, he visto la foto de los dos chicos que tienes en la sidebar...¿y sabes que? :D la chica se parece muchísimo (al menos en esa foto) a mi hermana :-X así que de repente he pensado -¡pues se las hago- jajajja

Anécdotas a parte, aquí están tus imágenes;-):

Header-wrapper

http://img151.imageshack.us/img151/7645/cabeceraabajorj6.gif

Footer-wrapper

http://img151.imageshack.us/img151/5597/footerarribajg1.gif

Galera

Muchas gracias por todo Rosa. Ahora si que tengo el blog bien.

.con.ganas.de.huir.

Perdona Rosa ya lo he arreglado al tema del perfil,creo que si ahora puedes verlo para poder ayudarme.
Igualmente te dejo la direccion aqui, www.conganasdehuir.blogspot.com
Muchas gracias.

Rosa

Con ganas de huir, tu caso no es el mismo que el de Kike, ya que a el le pasaba después de haber seguido los pasos correctamente...
Tu no lo has hecho, se te ha olvidado cambiar las imágenes que explico en la entrada...
Fíjate bien.

Jorge

Muy biena entrada, yo tengo la thisaway green, podrías porner las imágenes para esta, o decirme como hacerlas?

Rosa

Jorge, pues lo siento, pero ahora no tengo la posibilidad de modificar las imágenes...Lo que hay que hacer es hacerlas nuevas al tamaño que vayas a poner los anchos en tu blog.
Si vas a usar los tamaños de esta entrada, pues usa estás imágenes para ver el tamaño que necesitas.

Criatura

Holas, no sé si estoy tripitiendo comentario, porque le doy a publicar y no los veo xD.

Quería darte las gracias Rosa por la explicación para ensanchar la thisaway. Yo tengo la VERDE y he hecho lo que le comentabas a Jorge, modificar las imágenes. Os dejo los enlaces:

1º HEADER-wrapper:

http://img171.imageshack.us/img171/9012/bgheaderbottomer4.gif

2º Content-wrapper:
http://img123.imageshack.us/img123/4041/bgmainwrapperfd3.gif

3º Footer-wrapper:

http://img515.imageshack.us/img515/8718/bgfootertoplm2.gif

La distribución del espacio la he hecho un poco distinta (#sidebar-wrapper 270,#main-wrapper 670). Aquí podéis ver cómo queda la verde:
http://bricoworld.blogspot.com/

Gracias de nuevo!!

Rosa

Criatura, muchísimas gracias!:-)

RRS

Rosa, segui tus instrucciones y todo perfecto pero el color azul de los lados me encandelillaba asi que se lo quite. Pero me gustaria poner una imagen y he tratado por todos lados pero no se me da. podrias decirme donde tengo que poner la imagen para que quede en el fondo. Gracias.

Rosa

RSS, veo que está conseguido;)

RRS

Si Rosa, ya consegui poner el fondo, gracias. Logre hacerlo con estos dos datos que encontre espero puedan ayudatre para tu blog porque yo comono sabia ninguna de las dos pues tuve que buscar para logar hacerlo.

http://zonacerebral.com/2007/04/como-cambiar-el-fondo-del-blog-en-blogger.html

http://blogandweb.com/blogger/hospedar-imagenes-plantilla-blogger/

No tenia ni idea como cargar imagenes para luego usar la URL pero ya aprendi. Un Abrazo.

VANESA

Hola Rosa antes de nada felicitarte por tu blog que es estupendo.

Mi plantilla es la Thisaway (Rose), y simplemente me gustaria añadirle otra columna a la izquierda, He visto que lo has hecho con la plantilla Rounders, y no se si se podria hacer con esta que te digo.

Bueno un saludo, y gracias por todo

Rosa

VANESA Poder se puede, pero no es sencillo explicarlo en un comentario...

En este blog puedes descargar el código para la plantilla ya con las modificaciones hechas:
http://blogandroll-xosse.blogspot.com/2007/01/template-b-thisaway-blue.html

VANESA

Gracias Rosa, aunque plantillas tengo, simplemente no quisiera modificar todo lo que tengo en las columnas del blog, simplemente añadirle otra. De todas maneras eres estupenda.

Saludos

Rosa

VANESA Me lo apunto y dependiendo del tiempo que vaya teniendo disponible, lo publicaré...pero no te prometo nada ¿ok?

Awixumayita

Rosa, sabes si se puede cambiar el color?
Mira, échale un ojo a mi blog, por favor, para que veas cómo lo tengo. Lo que yo quiero es, en vez de ese tono azulado, algo m´as claro, incluso blanco. Pero sin cambiar lo de abajo del todo, que me gusta que lo de creative commons quede como ajeno del resto. No sé si me explico.

Un abrazo

El blog es este: http://awixumayita.blogspot.com

Rosa

Awixumayita Vamos a ver...localiza esto en el código de tu plantilla:
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url() repeat-y left top;
}

Esa última línea la del background déjala así:
background: #ffffff;

Luego localiza mas abajo esto:
#main {
padding-top: 22px;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
Dejas igual la línea del background:
background: #fff;

Haces lo mismo en #sidebar-wrapper {

Y si quieres eliminar esa imagen que es como una "espiga" que va de arriba abajo de la sidebar, lo haces aquí:
#sidebar {
padding-top: 7px;
padding-right: 11px;
padding-bottom: 0;
padding-left: 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

Eliminando la línea completa del background.

Todo esto lo haces y USAS LA VISTA PREVIA ANTES DE GUARDAR.

Suerte! :D

Gabriela, Gerónimo, Rafaela

Hola Rosa como estás??
Primero que nada felicitarte por el blog, es realmente EXCELENTE. Tus explicaciones son barbaras.

He podido agrandar la plantilla excepto que me queda la siderbar mucho más abajo.

Este es mi blog http://infosobrecine.blogspot.com/
(lo uso para hacer pruebas)

Podrías echarle un vistazo?? Estoy segura que solo con verlo te darás cuenta que es lo que me falta.

Muchas gracias
Gaby

Rosa

Gabriela Veo que ya tienes otra plantilla...

Pocho Legrand

Buenas. Me quedó todo perfecto salvo por una cosa. El celeste más oscuro del fondo de la barra lateral llega hasta un punto determinado y de ahí para abajo tiene el mismo color que el fondo del cuerpo del blog.

Muy bueno el blog!
Gracias!

Rosa

Pocho Legrand Así es. La sidebar llega hasta donde están los gadget colocados...

Pocho Legrand

El dibujo de la flecha si llega hasta abajo de los gadget, pero el color más oscuro no llega a cubrir ni la mitad de ellos

Rosa

Pocho Localiza el #sidebar-wrapper { y en el bloque del código verás esta línea:
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;

Borrala por completo o borra la url de la imagen que es lo que da el color de fondo solo en ese trozo... me cuentas. ;)

Smark

antes que nada una felicitación por el blog que es fenomenal y gracias por el tutorial me funciono a la perfección

fingolfin_79

weeeeee excelente!!!!! me encanto como quedo... ahora me gustaria saber si puedo poner dos columnas en la misma sidebar jaja... nunca se queda satisfecho el hombre... mi sitio quedo asi www.fondosyfonditos.com.ar

Rosa

fingolfin Esta entrada creo que te servirá de orientación:
http://elescaparatederosa.blogspot.com/2009/08/nueva-sidebar-dividida-en-dos.html

Ezú

Hola Rosa, menudo blog que tienes mas currao.
Bueno yo intento desde hace unos dias ensanchar el mio y bueno un poco torpe, he segido las instruciones que comentas y al final me sale los bordes azul (Claro es para esta color) el mio es thisaway green. Y tambine me sale una linea vertical aparte de un tono de color diferente en el fondo. toma ya... espero que me ayudes, muchas gracias....

Rosa

Ezú En el comentario numero 21 tienes las imágenes para la verde, los demás pasos son idénticos a los de la entrada.

Ezú

Rosa muchas gracias, me quedo de maravilla.
Un abrazo Jesús

CristinaKirchner

Gracias!!!!!!!!!!!!!!!!! Te re amooooooooo!!!!!!!!
con tu post acabas de solucionarme un grave problema visual del blog!!!
SIN PALABRAS
Gracias!!!!!!!!! mil gracias!!!!

Valentín VN

Gracias Rosa. Me ha servido para buscar #main-wrapper en mi plantilla y ampliarlo.

0rihime-chan

gracias rosa no sabes cuanto busque para agrandar mi plantilla thisaway rose y cuantos dolores de cabeza me causo,ahora use tus datos y tambien cambie la url por colores y me quedo genial si queres verlo pasate por mi blog http://pasionyaoi-love.blogspot.com muchas gracias y sigue dando estos consejos para los que somos nuevos en esto bye!

RacHaV2

Rosa podrías publicar una explicación para agregar otra columna a esta planilla ;) ?

Rosa

RacHaV2 Trata de buscar en Google... no recuerdo donde, pero en varios sitios la encuentras ya con las tres columnas.

RacHaV2

Rosa el problema es que mi planilla ya tiene muchas modificaciones y volver ponerlas todas esta como :O esperaba que publicaras algo que explicara donde poner los datos de la otra planilla ya es que mas dificil en estas planillas ;)

Rosa

RacHaV2 Si lo se... es más difícil por el uso de imágenes de fondo, habría que modificarlas o anularlas... pues lo siento pero de momento no voy a publicar nada sobre esta u otras plantillas "antiguas" de Blogger... pocos las usan ya y tengo demasiados pedidos de ayuda para las novedades de Blogger que me llevan demasiado tiempo...

Mirando por ahí, encontré esto, por si te sirve:
http://laeulalia-thisaway3.blogspot.com/

Francisco José Cobos Jiménez

Hola Rosa, me llamo Fco. José, Muchas gracias, me has ayudado a ensanchar mi plantilla :D

mi blog: http://pinsdepako.blogspot.com/

saludos

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S