32

Ensanchar la plantilla Sound of Moto

[1] Iremos a la parte de editar HTML de nuestra plantilla.
Buscamos esta parte del CSS y cambiamos el valor de width, por ejemplo a 850px. Este cambio hace que se ensanche el "cuerpo" del blog.

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 850px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

[2] En este paso ensancharemos la parte de nuestras entradas, cambiando de nuevo el width, por ejemplo, a 500px.
#main {
width: 500px;
float: left;
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 */
}

[3] Vamos a ensanchar ahora nuestra sidebar, aumentando el valor de width a, por ejemplo, 290px.
#sidebar {
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);
width: 290px;
float: right;
color: $sidebarTextColor;
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 */
}

[4] En el código anterior de la sidebar, he añadido una imagen como la original de la plantilla (el fondo de rayas semitransparente) para que el texto no se "desborde" fuera del fondo. Es esta línea:
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);

Ejemplo de plantilla

Entradas Relacionadas:

32 comentarios:


Yo

Hola Rosa, antes de nada, pedir disculpas por si mi comentario no debe ir aquí (no sé dónde ponerlo) y darte las gracias por el buenísimo trabajo que realizas ayudando a los que no tenemos ni idea: tu blog me ha servido de gran ayuda en varias ocasiones.

Después, quería preguntar de qué forma puedo solucionar un problema que me surge al tratar de aumentar el tamaño de las imágenes en uno de mis blogs. Los pasos que realizo son los siguientes:

Plantila, HTML: (Valor que tengo en #outer-wrapper {
width: 900px; )

- Aumentar:
#main-wrapper {
width: 650px; (de 500 a 650)

- Disminuir:
#sidebar-wrapper {
width: 200px; (de 250 a 200)

.post img {
padding:4px;
border:0px solid $bordercolor;

-Añadir:
height:450px;
width:600px;

El caso es que cuando subo las imágenes de nuevo me quedan distorsionadas, como si siguieran siendo de menor tamaño. También se me deforman por completo los slides: las imágenes siguien saliendo pequeñas y las letras enormes.

Agradecería muchísimo alguna solución para mi problema. Perdón por la extensión de mi comentario y gracias de antemano.

Un saludo.

Anónimo

Mae, la verdad no entiendo exactamente que es lo que quieres conseguir...si se trata de hacer más grande las imágenes en las entradas, en Blogger no es posible, cuando las subes al post Blogger te da tres posibilidades, pequeña, mediana y grande, es lo que hay...

Otra cosa es linkearlas desde un alojamiento externo, pero entonces surguiría el problema de que si la foto tiene un tamaño no adecuado o mayor que los post, el blog entero se vería "despatarrado" por decirlo de alguna manera...

Yo

Es que le había modificado el tamaño a un amigo y no recordaba de qué forma lo había hecho. Efectivamente fue, como tu indicas, alojando las imágenes en un servidor externo y adaptando luego su tamaño a la medida del blog.

Muchísimas gracias, Rosa, por tu pronta y útil respuesta.

Un saludo.

Anónimo

Gracias a ti Mae :-)

.: Alexia Stark :.

Hola Rosa, yo utilizo esa plantilla, pero lo que me gustaria hacer es que tubiera un poco más de espacio entre las entradas, ya que estan muy pegadas.

He estado modificando muchos parametros, pero aún así no me sale el resultado que busco, así que he pensado que al igual hay que añadir algún código...

Sabes cual seria y donde ponerlo??

Muchas gracias adelantadas ;)

Anónimo

señorita rosa..



deforme mi plantilla :( buu!!

jeje pero ya estoy armando la mia ^^



ya estoy aprendiento un poco mas sobre el html ;)


jejeje


pero bueno el diseño no lo es todo.



empezare a poner muchas mas entradas...



bueno adios



jejeje



ya no es señora a hora es señorita ;)


jejeje





.::OmegaKyx::.

Anónimo

señorita rosa..



deforme mi plantilla :( buu!!

jeje pero ya estoy armando la mia ^^



ya estoy aprendiento un poco mas sobre el html ;)


jejeje


pero bueno el diseño no lo es todo.



empezare a poner muchas mas entradas...



bueno adios



jejeje



ya no es señora a hora es señorita ;)


jejeje





.::OmegaKyx::.

Anónimo

Alexia, para separar el main de la sidebar, o ensanchas el cuerpo del blog (quedará más ancho que la cabecera) o reduces el ancho de la sidebar o de las entradas...

Anónimo

Andy, tómalo con calma, ya verás como poco a poco te va quedando como quieres.. :-)

.: Alexia Stark :.

Rosa, lo que necesito no es separar el main de la sidebar, sino el titulo de las entradas del bajo de la entrada anterior, no sé si me explico bien (>.<)

Es que si te fijas en mi blog, verás que tengo las entradas muy seguidas unas de las otras y me gustaria que tubieran un poco de espacio entre ellas...

Un saludo ;)

Rosa

Alexia, ahora si entendí, je,je, a veces ando algo "espesa" XD.

Mira, localiza esta parte del código de tu plantilla:

.post-footer {
font-style: italic;
color:#030303;
text-transform:lowercase;
border:2px solid #cccccc;
padding:2px 10px 2px 10px;
margin:20px 0px 0px 0px;
background: #e0e0e0;
}

Cambia la línea margin:20px 0px 0px 0px; por:

margin:20px 0px 20px 0px;

He puesto 20px de separación, pero tu coloca lo que necesites.

.: Alexia Stark :.

Siiiiii!!! Era eso lo que necesitaba!!

Que contenta estoy, siempre que algo se me escapa o no sé como solucionarlo puedo contar contigo, eres un pozo sin fondo de sabiduria xD

Un beso Rosa (-^o^-)

Anónimo

Un beso a ti, Alexia! Eres un encanto!

Lienzo tierra

Hola Rosa, ante todo muchas gracias por este blog que nos sirve de mucha ayuda. Quisiera preguntarte algo sobre las plantillas. Yo tengo en mi blog la "Mínima dark", anteriormente tenía la "Mínima Blue", la cual deja mucho margen a ambos lados de la página dejando el texto muy centrado. Al cambiarla a la "dark" me dejó los mismos márgenes.
Quisiera extender el texto para que no me quede tanto margen a ambos lados (izq y dcha). Aparte preguntarte si al modificarlo no se me borrarán datos de contadores y demás, porque lei que al modificar la plantilla podría suceder. ¿Qué hago? ¿Sigo el consejo que pusiste en este post? ¿pongo estos valores al editar el html de la plantilla?
Perdóname pero ando muy perdida aun en los blogs.
Por cierto, he puesto un enlace a tu blog, que me parece muy interesante. Muchas gracias de antemano.

Unknown

Hola Rosa, he puesto la opcion de traduccion del blog a altavista. Mi problema es que no se porque motivo no logro con esta plantilla que las imagenes de las banderitas aparezcan una al lado de la otra (con cualquier otra plantilla funciona.
echa un vistazo y lo entenderas enseguida.
http://sonidodeguitarras.blogspot.com
Bueno si puedes echarme una mano te lo agradecere profundamente.
desde ya gracias,
Facundo

Anónimo

Facundo, en primer lugar debes colocar ese tipo de código en un elemento HTML, pero además de eso, es cierto que la Sound of Moto tiene un diseño un poco especial...

Verás, vamos a colocar las banderas dentro de un div y a darle una clase, así:

<div class="flags"><a href="http://world.altavista.com/babelfish/trurl_pagecontent?lp=es_en&amp;trurl=http://usercash.com/go/1/66078/http://sonidodeguitarras.blogspot.com/"><img src="http://population-of.com/flags/flag_united_kingdom.png"></a><a href="http://world.altavista.com/babelfish/trurl_pagecontent?lp=es_fr&amp;trurl=http://usercash.com/go/1/66078/http://sonidodeguitarras.blogspot.com/"><img src="http://population-of.com/flags/flag_france.png"></a></div>

Luego en la parte del CSS, por ejemplo antes de ]]></b:skin> colocas esto:

.flags img{ border:0pt none; float:left; margin:0pt; padding:1pt}

Espero que resulte :-X

Anónimo

Hola hola Rosa:

Primero que nada felicitarte por tu blog.He aprendido mucho de tus datos y consejos!...bueno aun me falta muuuuucho, pero desde no saber nada he avanzado algo...jaja.

Bueno mi pregunta es la siguiente, yo agrande el cuerpo del blog asi:

width: 950px

main
width: 650px

Sidebar
width: 200px

El asunto es que quiero cambiar el titulo por una imagen,mas bonita y de acuerdo a mi tema, pero al hacerlo me queda un cuadro verde en el lado izquierdo que nada tiene que ver con la imagen.¿que puedo hacer?.


De antemano gracias ..n_n

Anónimo

Lady, la imagen ha de tener 950px de ancho, sino se verá el verde que hay debajo...

Anónimo

Es cierto!.... eso era todo.. que tonta.. jaja..

¡Gracias por la ayuda Rosa!

Ahora se que medidas debe tener mi diseño.

Hasta la proxima

Anónimo

Me encanta tu blog! sigue con el buen trabajo que estás haciendo!!!

lille skvat

Hola Rosa:

¿Sabes cómo se puede quitar el fondo de rayas semitransparentes de la barra lateral?

Muchas gracias otra vez :)

Anónimo

Lille, localiza en tu plantilla esto:
/* Wrapper */
#outer-wrapper {

Fijate en esa zona algo más abajo que hay una línea como esta:
background: #ffffff url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;

Déjala así:
background: #ffffff;

lille skvat

Hola otra vez, Rosa:

Muchísimas gracias por la rapidez en contestarme. Ha funcionado sin problema :)

Thesystemdark

hola!!
estaba tratando de ensanchar una plantilla que quiero poner en mi blog...
el problema es que no encuentro el codigo principal!!

#outer-wrapper no aparece.....

es muy probable que la plantilla lo tenga con otro nombre...pero cual puede ser?

esta plantilla es muy complicada para mi :((

Thesystemdark

lo unico que quiero en la plantilla es que los espacios sean mejor ocupados...que la sidebar izquierdo sea el doble de ancha de lo que esta y que el cuerpo solo agrande un poco mas...cosa de que no queden margenes tan grandes...

pero realmente esta plantilla no la entiendo para nada!! he echo los mismos procedimientos con otras plantillas y va todo bien...pero con esta no puedo... no encuentro los codigos

necesito ayuda!! realmente quiero usar esta plantilla!

lo problematico es que se que no trabajas con plantillas personalmente!!

como me puedes ayudar?

Anónimo

thesystemdark Lo principal para poder indicarte algo, es que yo sepa de que plantilla hablamos...

Thesystemdark

ops!! claro que torpe fui... :S

la plantilla se llama Maggo Magazine

la puedes descargar de aqui!

http://www.megaupload.com/?d=LO8RHSI3

Anónimo

thesystemdark Ya me he descargado la plantilla... ahora por favor, envíame un email con lo que necesitas concretamente y te responderé a través de ese mismo email, por aquí se complicaría hacerlo supongo...

Thesystemdark

por si acaso!! ya te envie el mail
gracias por ayudarme!!

:P

Thesystemdark

hola rosa!!
queria saber casi te ha
llegado el mail que te
envie....!!!

paso revisando el correo todos los
dias para ver si me ha llegado alguno
tuyo!! asi que no se si estaras muy
ocupada para ayudarme con mi
problema o sera que el correo no te
ha llegado!!

espero tu respuesta ;)

Anónimo

thesystemdark No te había contestado porque he estado en tu blog y he visto que habias cambiado de nuevo de plantilla, así que pensé que ya no querías esta...
De todos modos he de decirte que la que me decías y que descargué y coloqué en un blog de pruebas, ya tiene el ancho correcto para que se vea en todas las resoluciones de pantalla... si haces lo que dices con ella y alguien entra a tu blog con una resolución menor en su pc no la verá completa, verá el blog cortado...
No se trata de pensar como cada uno lo ve en su pc, sino todo sería más fácil... hay que pensar en que todas las máquinas no son iguales y tratar de que se acomode a todas, sino perderías visitas seguro...

Thesystemdark

mmmmmmmmmm!!! gracias de todos modos!!!
sobre mi blog!! (en realidad no he cambiado plantilla!! llevo toda la vida de mi blog con la misma...) por eso queria hacer un cambio!!!

mmm...sobre la plantilla!! me gustaria que igual me enviaras el codigo de esta para ver que hago con ella!!

ademas te queria preguntar casi te fue muy dificil encontrar los codigos!! a mi me costo muchisimo y aun asi no deje un buen trabajo en mis intentos por realizar lo que queria, creo que aun me queda un largo camino por recorrer...

gracias por ayudar, y espero que sigas asi...todos necesitamos en algun momento ayuda y es bueno poder contar con una persona como tu!!

gracias Rosa...

Publicar un comentario

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