Te damos la bienvenida a la comunidad de T!Estás a un paso de acceder al mejor contenido, creado por personas como vos.

O iniciá sesión con
¿No tenés una cuenta?


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;