Añadir estilos a una nueva sidebar

Hace tiempo añadíamos una segunda sidebar al blog, los resultados fueron buenos pero en varias ocasiones me han comentado la imposibilidad de personalizar la segunda sidebar de forma que el resultado fuera el mismo que en la primera.
El ejemplo que voy a poner  ha sido realizado en una plantilla Minima, siguiendo los pasos indicados tiempo atrás he añadido una nueva sidebar.

Después he personalizado los títulos.

.sidebar h2{
margin:0px;
color:#fff;
font-size:12px;
font-weight: bold;
background: #86AFB0;
padding: 3px 0px 3px 7px;
border-bottom:6px double #759697;
}

Y añadí color de fondo a la sidebar.

.sidebar {
background:#E2DDCB;
margin: 0px 5px 0px 0px;
padding:6px 13px 6px 13px;
color:#3333;
line-height:1.5em;
}

Explico esto porque es posible conseguir que con los mismos estilos que tenemos para una sidebar la personalización resulte la misma para las dos, eso es posible si en section class añadimos el mismo nombre.

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


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
También puede ocurrir que preferimos todo lo contrario, que las dos tuvieran diferentes estilos.
Lo que hacemos entonces es buscar y copiar lo siguiente:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

y pegarlo justo después del código que copiamos.

Haremos unos cambios en este último, vamos a sustituir el texto de "sidebar" por "newsidebar"
Luego buscamos (sin expandir la plantilla) lo siguiente:

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

Y sustituimos sidebar por newsidebar

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

Ahora ya podemos trabajar en los estilos que copiamos y posteriormente pegamos y los cambios se mostrarán en la nueva sidebar.


0 comentarios:

Publicar un comentario