Antes de aplicar algún cambio

Asegúrate de que tu plantilla es como ésta ya que las definiciones no son las mismas en todas.
Puedes verlo en Diseño/Edición de HTML , como te muestro aquí.




Si no fuera ésta, mira en este blog.
En la sidebar de la derecha hay una lista de todas las plantillas que he modificado.

El nombre del blog es el de la plantilla.

miércoles 24 de septiembre de 2008

Poner otra sidebar

SIN expandir elementos.

Para poner una segunda sidebar, primero has de cambiar las medidas de div#main-wrapper { y dejar la linea del width en 48%, y de div#sidebar { dejando el width en 24%.
Este grupo de código termina con
*/
}
debajo has de pegar esto:
div#newsidebar-wrapper {
margin: 10px;
padding: 10px;
text-align: $startSide;
}

div#newsidebar {
width: 24%;
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 */
}

Verás que queda una llave } más, al final de lo que pegues. Es correcto.

Baja un poco y verás esta zona:

div#sidebar-wrapper {

al final de ésta, bajo la llave que cierra este grupo, has de pegar esto:

div#newsidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}

baja un poco más y verás este grupo: #sidebar h2 {
pega esto debajo de la llave de cierre:

#newsidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
background: $descriptionBgColor;
padding: 0px;
border: none;
}

la línea que ves en rojo la he añadido para ponerle color detrás de los títulos de los elementos.
Si quieres que también se vea en la otra sidebar, has de añadirla en el código de encima.

Debajo de este que has añadido verás 3 partes más que empiezan con #sidebar, copialas las 3 y pégalas debajo cambiando sidebar por newsidebar en las 3.

Si quieres enmarcar los elementos individualmente, en #sidebar .widget y en #newsidebar .widget añades esta línea:

border: solid 1px $borderColor;

pudiendo cambiar el grosor, y el estilo de la línea por el que más te guste.

Cuidado: La variable borderColor no existe en esta plantilla. Si quieres usarla has de añadirla. En la entrada de la menubar la encontrarás para copiarla.

Una vez hecho esto, baja a la zona del HTML y copia el código de la sidebar y pégalo encima de esta línea <div id='main-wrapper'> cambiando en los dos id= sidebar por newsidebar, para que se vea así:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
</b:section>
</div>

Si tienes muchos elementos en la sidebar, al copiar los copiarás todos.
Borra todos los b:widget que haya, (o no los copies) excepto el del perfil, como ves aqui, en el código, para que haya algo en la nueva sidebar y puedas verla.
Luego borra el del perfil de la otra para que no te de error.

Una vez hecho esto, ya puedes hacer vista previa.
Y si has seguido estas instrucciones paso a paso, verás el perfil en una nueva columna a la izquierda del blog.

3 comentarios:

adolfo martin dijo...

Te quería dar las gracias por el post!no sabes de cuanta ayuda me has sido, después de haber consultado muchos post de gente y no dar con la tecla(también por mi desconocimiento) con el tuyo ha sido posible la dichosa segunda sidebar!gracias!

Eulalia dijo...

Gracias adolfo, por tu comentario.
Siempre es grato saber que lo que hago es útil.
Un abrazo.

Anónimo dijo...

Eulalia quería decirte que tras muchos intentos para poner otra sidebar,y que quedase a la izquierda,por fin con tu ayuda ha sido posible,lo explicaste de maravilla,un saludo y gracias!

Maria