Duodécimo post de ayuda. En este tutorial veremos cómo añadir una nueva barra lateral a nuestra página. Como ya tenemos una a la derecha, la añadiremos a la izquierda.
Cómo ya sabemos la barra lateral está formada de la siguiente forma:
<div id="sidebar">
<div id="top">
CONTENIDO
</div>
</div>
Para añadir una barra a la izquierda vamos a usar la misma estructura, pero renombrando los id:
<div id="sideleft">
<div id="topleft">
CONTENIDO
</div>
</div>
Tenemos que hacer lo mismo en el CSS (style). Buscamos y copiamos los siguientes códigos completos (desde el primer # hasta el } de cierre):
#wrapper #sidebar {
#wrapper #sidebar #top {
Y los renombramos como arriba (#sideleft #topleft). Además, en #sideleft cambiamos:
float: right;
por
float: left;
Y añadimos:
margin: 0px 20px 0px 0px;
Siendo 20px el margen entre la barra de la izquierda y la parte del contenido (la de los post).
Y en el #topleft cambiamos:
padding: 0 20px;
por
padding: 20px;
Y añadimos:
margin: 0px 0px 20px 0px;
Los 20px de padding serán los márgenes interiores y los 20px la separación entre 2 topleft.
En mi caso quedaría lo siguiente (lo pongo de ejemplo para que veáis de forma más clara lo que debéis hacer, pero no recomiendo un copy/paste de este código, ya que vuestra barra de la izquierda será distinta de la de la derecha):
#wrapper #sideleft {
margin: 0px 20px 0px 0px;
width: 260px;
float: leftt;
color: {color:Background};
font-family: {font:Accent}
}
#wrapper #sideleft #topleft {
border-radius: 10px 10px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
background: #fff;
padding: 20px;
margin: 0px 0px 20px 0px;
}
Ahora tenemos que buscar #wrapper { y a su width sumarle el width de sideleft y el margen que hemos puesto. En mi caso teníamos esto:
#wrapper {
width: 845px;
margin: 0 auto;
}
Y nos quedará esto:
#wrapper {
width: 1125px; /* 845 + 260 + 20 de margen */
margin: 0 auto;
}
Por último, ya sólo nos queda añadir los <div> del principio a nuestra página. Buscamos <div id=”content”> y los pegamos justo antes. Por ejemplo:
<div id="sideleft">
<div id="topleft">
<img src="http://27.media.tumblr.com/tumblr_m2pavzQyNR1r1m0jso1_250.png">
</div>
<div id="topleft">
<img src="http://assets.tumblr.com/images/default_avatar_128.gif">
</div>
</div>
Quedaría de la siguiente forma:
(Ver en grande)
PD: Si el banner de vuestra página se sitúa a la izquierda de todo, y queréis que salga centrado, simplemente tenéis que buscar en CSS (style) #wrapper #title { y añadirle:
text-align: center;