31 de octubre de 2009

Añadir segunda sidebar

Mi idea es conseguir una plantilla de ancho fijo (en pixeles), y con el diseño optimizado para una resolución de 1024 pixeles de ancho, que hoy por hoy, es la configuración de pantalla más habitual.  Para ello he elegido “Seleccionar una plantilla nueva” en Diseño y he optado por la plantilla Mínima.
Después en Edición de HTML, y con Expandir plantillas de artilugios marcado he cambiado las dimensiones del siguiente modo:
Localizar (con control – F) en el código la etiqueta “outer-wrapper”  y he modificado los datos que están en color:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 650px;
  padding:5px;
  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 */
  }

#sidebar-wrapper {
  width: 150px;
  float: right;
  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 */
}

Justo debajo de este código he añadido el siguiente:
#newsidebar-wrapper {
width: 200px;
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 */

}

A continuación hay que localizar el código siguiente: “div id='main-wrapper'” y justo antes de esta línea añadir el código:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos cambios en la plantilla y listo.  Tenemos una nueva sidebar en el lado izquierdo con un ancho de 200 pixeles, el bloque para las entradas de 650 pixeles, y la sidebar original a la derecha de 150 pixeles.  Sólo queda ir a Elementos de la página y organizar los gadget a nuestro gusto.
Entrada anterior Entrada siguiente Página Principal
Related Posts Plugin for WordPress, Blogger...