21.8.10

Ensanchar blog - plantilla Harbor



El blog que vamos a ensanchar es el diseñado con la plantilla Harbor, que podemos identificar en el encabezamiento, así:

-----------------------------------------------
Blogger Template Style
Name:     Harbor
Date:     24 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML

Sin expandir plantillas de artilugios localizamos los siguientes bloques y hacemos las modificaciones indicadas:

1.-

#outer-wrapper {
  max-width:890px;
  padding: 0 30px 50px;
  width:100%;
  width/* */:/**/auto;
  width: /**/auto;
  }

Cambiamos la parte resaltada por: 100%, y con esto le damos al blog un ancho que se acomode a cualquier pantalla (también podemos dar el ancho en términos absolutos, o sea en determinado número de pixeles).

2.-

#main-wrapper {
  width:64%;
  float:$endSide;
  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 la parte resaltada por 71% y con esto aumentamos el ancho del cuerpo de las entradas. 3.-

#sidebar-wrapper {
  width:32%;
  float:$startSide;
  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 la parte resaltada por 25% y con esto disminuimos, proporcionalmente, el ancho de la barra lateral. Con el ancho que tenía (32%)ocupaba, más o menos, la tercera parte del ancho del blog. Con el ancho que le hemos dado ocupará la cuarta parte.

Podemos modificar los porcentajes teniendo en cuenta que el ancho del cuerpo de las entradas, y el ancho de la barra lateral no deben exceder el 96%.

4.-

.Header .description {
  margin:0;
  max-width:700px;
  line-height:1.8em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$titlecolor;
  font: $blogDescriptionFont;
}

La parte resaltada corresponde al ancho que ocupa la descripción del blog, ubicada en la cabecera. Podemos modificarla, por ejemplo por 100%, para que dicha descripción ocupe todo el ancho de la cabecera, o el porcentaje que queramos darle sin sobrepasar, lógicamente, el 100%.

5.- Vista previa y Guardar plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

0 comentarios :

▼▲ Ocultar / Mostrar 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.