| Podemos lograr el efecto de que al acceder a una página estática, ésta ocupe todo el ancho del blog y, obviamente, la sidebar quede oculta, así:
Para plantillas clásicas (antiguas) | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
...y localizamos, poniendo una línea del mismo dentro del rectángulo de búsqueda (Search), el código en donde está el ancho del outer-wrapper, que es el ancho del blog. Este código varía según la plantilla. Por ejemplo, en la plantilla Mínima es éste:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
align:$startSide;
font: $bodyfont;
} |
...y en la plantilla Denim, éste:
#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
} |
- Conociendo el ancho del outer-wrapper localizamos la etiqueta
</head> y, antes de la misma, pegamos el siguiente código:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: XXXpx;
}
</style>
</b:if> |
En width: XXXpx; reemplazamos las X por el número de pixeles correspondiente al ancho del outer-wraper que, en los ejemplos, debe ser igual en la plantilla Mínima, y 30 pixeles menos (730px), en la plantilla Denim.
- Guardamos los cambios
Ingresando a la página estática podremos ver que ésta ocupa todo el ancho del blog ocultando la sidebar. Si el ancho de la página excede al ancho del blog regresamos a la plantilla y disminuímos el número de pixeles que pusimos en el main-wapper del código que agregamos, o lo aumentamos si el caso es a la inversa. Veamos la página en funcionamiento: 
Para plantillas nuevas (Diseñador de plantillas) | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► |
|
- Para averiguar el ancho del blog localizamos, poniendo una parte de la misma dentro del rectángulo de búsqueda (Search), la siguiente línea:
<b:variable default='960px' name='content.width' type='length' value='960px'/> |
...con esto sabemos que el ancho del blog es de 960px. En todo caso, si los dos valores contenidos en la anterior línea son diferentes, tendremos en cuenta el segundo (value='960px').
- Localizamos esta línea:
<div class='column-left-outer'> |
- la eliminamos y la reemplazamos con ésta:
<div class='column-left-outer' id='sidebar-left'> |
<div class='column-right-outer'> |
- La eliminamos y la reemplazamos con ésta:
<div class='column-right-outer' id='sidebar-right'> |
- Localizamos la etiqueta
</head>, y antes de la misma pegamos el siguiente código:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-left {
display: none;
visibility: hidden;
}
#sidebar-right {
display: none;
visibility: hidden;
}
#main {
width: 900px;
margin-left: -155px;
}
</style>
</b:if> |
...en donde ponemos el ancho (width) del blog menos 60px, o sea 900px, si el blog tiene sidebar izquierda y derecha, o el ancho del blog, 960px, si tiene únicamente sidebar derecha. La línea resaltada en amarillo la dejamos si el blog tiene una sidebar izquierda; si no la tiene la eliminamos. Si tiene sidebar izquierda averiguamos su ancho localizando este código: <b:variable default='0' name='main.column.left.width' type='length' value='180px'/> |
...en el que podemos observar que el ancho de esa sidebar es de 180px, le restamos 25px y ese valor (-155px) precedido del signo menos (-) es el que ponemos en la línea resaltada en amarillo.
- Guardamos los cambios.
Nota: Los anchos tanto del main-wrapper como de las sidebar pueden variar, según las plantillas. Debemos variar también las modificaciones, guardando las proporciones. Veamos las páginas en funcionamiento:Con una sidebar: Con dos sidebar: |
