Personalizar el crosscol

Desde hace un tiempo las plantillas traen un elemento llamado crosscol, no es más que una continuación del header (cabecera del blog) un espacio que no es imprescindible porque podemos aumentar el número de maxwidgets del header y con ello añadir nuevos elementos aquí la forma de hacerlo.
Pero ocurre que el crosscol está ahí, y pensamos darle utilidad bien sea para añadir un menú, una galería de imágenes o cualquier otro contenido.

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

El crosscol se encuentra justo después de <div id='content-wrapper'>
y antes de <div id='main-wrapper'> si no lo tenemos y nos gustaría añadirlo ese es el sitio.

Una vez lo tenemos no permite añadir elementos si antes no se lo permitimos, la forma de hacerlo es sustituyendo

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

por   <b:section class='crosscol' id='crosscol' showaddelement='yes'/>

En plantilla de diseño lo encontraríamos como la siguiente imagen.

La forma de personalizarlo depende mucho de la utilidad que deseamos darle, por ejemplo si deseamos que adquiera los mismos estilos que tenemos en la sidebar lo que haríamos sería copiar todos los estilos desde /* Sidebar Content ----*/ hasta /* Profile ---- */ 

.sidebar {

background-color:#DEDEA9;

color: #333333;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget {

padding:0 0 1.5em;

margin:0 0 1.5em;

}

.main .widget {

padding:0 0 1.5em;

margin:0 0 1.5em;

}

.sidebar h2 {

line-height:30px;

color:#fff;

margin:0;

background-color: #6C7418;

padding:0px 0 0 5px;

font-size:11px;

font-family:Verdana,Tahoma,sans-serif;

font-weight: bold;

}

Una vez copiado los pegamos a continuación y sustituimos el texto de sidebar por crosscol y le añadimos un poco de holgura al contenido con padding.

.crosscol {

padding:19px 0 0 0px;

background-color:#DEDEA9;

color: #333333;

line-height: 1.5em;

padding:19px 0 0 0px;

}

.crosscol ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.crosscol li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}

.crosscol .widget {

padding:0 0 1.5em;

margin:0 0 1.5em;

}

.main .widget {

padding:0 0 1.5em;

margin:0 0 1.5em;

}

.crosscol h2 {

line-height:30px;

color:#fff;

margin:0;

background-color: #DEDEA9;

padding:0px 0 0 5px;

font-size:11px;

font-family:Verdana,Tahoma,sans-serif;

font-weight: bold;

}

Guardamos los cambios y comprobamos el resultado añadiendo algún contenido en el crosscol, si no deseamos añadirle título es suficiente con omitir ese paso.

Personalizarlo de distinta forma a la sidebar también es posible bastaría con utilizar el mismo código cambiando o añadiendo otros estilos.

La personalización da mucho juego siempre digo lo mismo, la imaginación en lo que cuenta. Mañana os veo con una bonita utilidad para el crosscol.