Modificando las plantillas (Tutorial 2: Widebars)

JMiur

Continuando con la idea de modificar la estructura de una plantilla, hasta acá tenemos el esquema tradicional de un blog, encabezado, las entradas a la izquierda, la sidebar a la derecha y un pie de página. La ubicación de entradas y sidebar es fácilmente modificable ¿queremos invertirlas? basta invertir la flotación de ambos rectángulos [VER EJEMPLO]

#main-wrapper {
  .......
  float: right; /* cambiamos left por right */
}

#sidebar-wrapper {
  .......
  float: left;  /* cambiamos right por left */
}

La sidebar que hemos creado es muy ancha y eso no es casualidad ya que ahora que tenemos todo preparado vamos a agregar otras debajo de ella siguiendo el mismo esquema que explica Gem@

.

Para esto, ya no sólo tendremos que modificar el CSS sino agregar código pero, lo haremos de la manera simple, sin expandir los artilugios para que no nos de un ataque al ver tanta cosa escrita.

Si vamos hasta casi el final de la plantilla, lo que veremos es algo así:

<div id="sidebar-wrapper">
  <b:section class="sidebar" id="sidebar" preferred="yes">
    .......
  </b:section>
</div>

Y allí en el medio aparecerán cosas como:

<b:widget ....... />

Que son cada uno de los elementos que tenemos en la sidebar y que no tocaremos. Lo que haremos es copiar el código sin eso y lo pegaremos dos veces debajo de </b:section> para crear dos nuevas sidebar. Luego, les cambiaremos los nombres y quedará algo así:

<div id="sidebar-area">
  <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
      .......
    </b:section>
  </div>
  <div id="sidebar-derecha">
    <b:section class="sidebar" id="sidebarderecha" preferred="yes" />
  </div>
  <div id="sidebar-izquierda">
  <b:section class="sidebar" id="sidebarizquierda" preferred="yes" />
  </div>
</div>

Pero, fíjense que todas está dentro de otro DIV. Es que para evitar problemas indeseados vamos a utilizar un viejo truco que siempre nos saca de apuro: cuando haya varios rectángulos flotando que no podemos o no sabemos controlar, coloquemos todos ellos en un contenedor, en otro rectángulo más grande así que "envolvemos" las tres sidebars en un DIV al que en un rapto de originalidad llamé sidebar-area.

Es muy importante tener en cuenta que a las dos angostas, aunque sean iguales, debemos colocarles atributos id con nombres diferentes ya que en una pagina web, los ids son nombres únicos, no puede haber dos iguales. Por el contrario, las clases pueden ser las mismas y por eso no la cambiaremos ya que las características de los elementos será la misma (por supuesto, si queremos que se vean diferentes, les pondremos tambien clases diferentes y deberemos definirlas).

Nuevamente, vamos al CSS y agregamos las definiciones de estilo para estas dos sidebars que serán casi iguales que las de sidebar-wrapper (la superior, la que quedará ancha). Ambas flotarán a la derecha y la suma de sus anchos no deberá superar los 390 pixeles que es el ancho de la superior así que le daremos a cada una un poco menos de la mitad para separarlas entre si con un margen:

190 + 5 + 5 + 190 = 390

#sidebar-area {
  float: right; /* flota a la derecha */
  width: 390px; /* es tan ancha como la sidebar superior */
}

#sidebar-derecha {
  float: right; /* flota a la derecha */
  margin-left: 5px; /* margen izquierdo */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

#sidebar-izquierda {
  float: right; /* flota a la derecha */
  margin-right: 5px; /* margen derecho */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

Guardo la plantilla y, para que se vea algo de lo modificado puedo hacer dos cosas, o le agrego elementos (es lo que se verá en el ejemplo) o bien, le agrego a lo anterior un par de definiciones:

background-color: red;
height: 300px;

Con height le damos una altura y con background-color un color de fondo; esas dos propiedades luego se pueden eliminar [VER EJEMPLO]

¿Y si nuevamente, en lugar de querer ese esquema, se nos ocurre poner todo del otro lado, invertimos los valores de la flotación de main-wrapper y de sidebar-area. Lo que está como left lo ponemos como right y viceversa.