29.7.10

Ensanchar blog - plantillas Denim


El blog que vamos a ensanchar es el diseñado con la plantilla Denim, que podemos identificar en el encabezamiento del código, así:

-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
  1. Vamos a Edición de HTML:

    Página principal ► Diseño ► Plantilla ► Edición de HTML
  2. Sin expandir plantillas de arilugios localizamos el siguiente segmento de código de la cabecera del blog:

    /* Header
    ----------------------------------------------- */
    #header-wrapper {
      margin:0;
      padding: 0;
      background-color: $headerCornersColor;
      text-align: $startSide;
    }

    #header {
      width: 760px;
      margin: 0 auto;
      background-color: $headerBgColor;
      border: 1px solid $headerBgColor;
      color: $headerTextColor;
      padding: 0;
      font: $headerFont;
    }


  3. Modificamos la línea resaltada, así:

    width: 760px;

    Por:

    width: 950px;

    Con esto hemos ensanchado únicamente la cabecera.


  4. Vamos al código del contenido y modificamos las líneas resaltadas, así::

    /* Content
    ----------------------------------------------- */

    .clear {
      clear: both;
    }


    #content-wrapper {
      width: 760px;
      margin: 0 auto;
      padding: 0 0 15px;
      text-align: $startSide;
      background-color: $mainBgColor;
      border: 1px solid $borderColor;
      border-top: 0;
    }
    #main-wrapper {
      margin-$startSide: 14px;
      width: 464px;
      float: $startSide;
      background-color: $mainBgColor;
      display: inline;       /* fix for doubling margin in IE */
      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 */
    }
    #sidebar-wrapper {
      margin-$endSide: 14px;
      width: 240px;
      float: $endSide;
      background-color: $mainBgColor;
      display: inline;       /* fix for doubling margin in IE */
      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 */
    }

    width: 760px;

    Por:

    width: 950px;;

    ...y

    width: 464px;

    Por:

    width: 654px;

    Así hemos ensanchado el cuerpo del contenido y el de las entradas. Hemos aumentado en 190px el ancho del blog y el cuerpo de las entradas. La sidebar la hemos dejado como estaba (240px).

    Podemos variar los anchos según nuestra conveniencia, teniendo en cuenta que la suma del ancho del cuerpo de las entradas, más el ancho de la sidebar, más 56px que corresponden al espacio entre el cuerpo de las entradas y la sidebar, debe ser igual al ancho del blog. En nuestro caso 654 más 240 más 56 nos da 950px, que es el ancho del blog.


  5. Vista previa y guardar cambios.

Í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.