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:

Ejemplo de widebar
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 enwidth 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:

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

Elemento widebar


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