Añadir una widebar (para plantillas de tres columnas)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Con este método conseguiremos añadir a nuestra plantilla (solo si tiene dos sidebars colocadas al mismo lado), una nueva sidebar horizontal, que se verá sobre las que ya tenemos, ocupando el mismo espacio que ocupan las otras dos juntas:


Es un espacio perfecto para añadir nuestro perfil o una nube de etiquetas por ejemplo.

[1] En primer lugar añadiremos el código CSS necesario antes de ]]>:<b:skin>, lo haremos sin expandir artilugios:

#widebar-wrapper {
width:400px;
float:left;
border: 1px solid #ddd;
padding-bottom:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:400px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

[2] Yo le he puesto una medida cualquiera 400px para el ejemplo, pero cada uno deberá colocar en width la medida que necesite, pensando en que la widebar tendrá que ocupar el mismo espacio que ocupan las otras dos juntas, es decir, la suma de los width de cada sidebar.
Además tendremos que cambiar el float:left; por float:right; según la posición de nuestras sidebars: left = izquierda, right = derecha.
También le he añadido un borde, para que se vean mejor los cambios en "vista previa", así podemos ir modificando su anchura fácilmente, sin tener que guardar los cambios hasta el final. Si una vez terminada su instalación, no queremos mostrar la nueva widebar con borde, borraremos esta línea: border: 1px solid #ddd;
En margin-bottom:10px; controlaremos la distancia de la widebar a las dos sidebars, aumentando o disminuyendo el valor (10).

[3] Ahora es el momento de añadir el código HTML necesario para mostrar la widebar y que colocaremos justo sobre <div id="main wrapper">

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Usaremos la vista previa y, si todo ha ido bien, veremos el borde de la nueva widebar sobre las otras dos, es ahora cuando podremos ajustar el ancho para ajustarla a la medida adecuada:


Una vez conseguido, guardamos los cambios y ya podremos añadir lo que sea en el nuevo elemento:

Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking