La plantilla Thisaway la podemos identificar en su encabezado, así: -----------------------------------------------
Blogger Template Style
Name: Thisaway
Date: 29 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */ |
Ensanchar un blog diseñado con la plantilla Thisaway es un tanto complicado, ya que esta plantilla contiene, en su diseño, esquinas redondeadas, y como éstas no se desplazan por pertenecer a imágenes prediseñadas, tendremos que modificarlas para acondicionarlas al ancho que pretendamos darle al blog, subir las imágenes resultantes, y cambiar las URLs en la plantilla. Podemos también eliminar las esquinas redondeadas, eliminando las URLs de las imágenes correspondientes, y como consecuencia lógica el blog nos quedará con las esquinas cuadradas.
El siguiente es el procedimiento para ensanchar el blog conservando las esquinas redondeadas: Vamos a Edición de HTML:
Página principal ► Diseño ► Plantilla ► Edición de HTML |
Sin expandir Plantillas de artilugios localizamos los siguientes segmentos y hacemos las modificaciones indicadas: 1.- /* global
----------------------------------------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
} |
Cambiamos 760 por 940, para aumentar el ancho del cuerpo del blog. 2.- /* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
} |
Cambiamos 760 por 940, para aumentar el ancho del diseño. 3.- #content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
} |
Cambiamos 760 por 940, para aumentar el ancho de la envoltura del contenido. 4.- #main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 3px;
padding: 0;
width: 483px;
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 */
} |
Cambiamos 483 por 595, para aumentar el ancho del cuerpo de las entradas, guardando las proporciones del diseño original. 5.- #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 */
} |
Cambiamos 269 por 330, para aumentar el ancho de la sidebar, guardando las proporciones. 6.- #sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
} |
Cambiamos 179 por 245, para conservar la imagen de fondo de la sidebar en el mismo sitio en donde la tenía la plantilla original.
Cambio de las imágenes con esquinas redondeadas Este Webmaster modificó las imágenes para acondicionaralas al nuevo ancho del blog, y subió las nuevas imágenes. Volvemos al inicio de la plantilla y, sin expandir plantillas de artilugios, localizamos los siquientes segmentos en los cuales cambiamos las URLs, así: 1.- #header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif)
no-repeat $startSide bottom;
} |
Eliminamos la URL resaltada y en su lugar ponemos ésta: http://4.bp.blogspot.com/_A8s1QW_050o/TK3nro1CvmI/AAAAAAAAGzQ/
82FIeIZ9O9Y/s1600/bg_header_bottom.jpg |
2.- #content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif)
repeat-y $startSide top;
} |
Eliminamos la URL resaltada y en su lugar ponemos ésta: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilVdaDoneRXITV5bSjiYI5Dqy-Ll2-tK5lGo6VXMT2F2igdmNJOBcbMx0wXS8xZVK3CzPBs_cpOm0kSy8k7bs5xYmIUgGoF7yaUIpl8MtXtioMLFLKdzOluBDaZWgRCVsA6g5XVO1fQ2Q/
s1600/bg_main_wrapper.jpg |
3.- #main {
padding-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif)
repeat-x $startSide top;
} |
Eliminamos la línea resaltada, sin reemplazarla. 4.- #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: 330px;
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 */
} |
Eliminamos la línea resaltada, sin reemplazarla. 5.-
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif)
no-repeat $startSide top;
clear: both;
}
|
Eliminamos la URL resaltada y la reemplazamos por ésta: http://3.bp.blogspot.com/_A8s1QW_050o/TK3m3fdWpoI/AAAAAAAAGy4/
jKc5Xb1yrug/s1600/bg_footer_top.jpg |
Por último: Vista previa y Guardar plantilla.
| 
0 comentarios :
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.