Enmarcar las entradas y/o los elementos de la sidebar

Hace algún tiempo alguien me consultó acerca de éste tema.

Para enmarcar sólo las entradas, busca el código que empieza con .post{ y allí, antes de la llave } de cierre has de añadir esta línea:

border: 2px solid $bordercolor;

cambiando el 2 por el grueso de línea que desees y el solid por el estilo de borde que quieras.
Aquí puedes ver los distintos estilos de borde que existen y como se llama cada uno.

Luego busca esto .sidebar .widget, .main .widget { y debajo de la llave } de cierre añades ésto:

.main .Blog {
border-bottom-width: 0;
}

para eliminar la línea de puntos que separa las entradas.

Si lo que quieres es enmarcar los elementos de la columna lateral, primero has de separar este código:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

en dos partes (añadiendo la línea que remarco en rojo para que enmarque los elementos) dejándolo así:

.sidebar .widget {
border:5px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Cambiando el 5 por el grueso que desees de línea y el dotted por el nombre del estilo de línea que prefieras.

Cambiar la sidebar de sitio

Es tan sencillo como hacer un par de cambios.

Por un lado, en el sector del CSS hay que cambiar los float del main wrapper y de sidebar wrapper, y donde ponga startSide poner endSide o left por right, depende del modelo y del tiempo que haga que la tengas y viceversa.
Luego SIN expandir artilugios, copiar el código del sector de las entradas que será algo así:

<div id='main-wrap1'><div id='main-wrap2'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div></div>

y pegarlo debajo del código de la sidebar que empieza así:

<div id='sidebar-wrap'>

eliminándolo del lugar que ocupaba anteriormente, de lo contrario te dará error por repetición.

Vista previa y si no ha habido errores, verás la sidebar en el lado contrario.

Para saber donde termina el código de la sidebar, solo has de buscar el siguiente

</b:section>

</div></div>

que estará más o menos abajo, dependiendo de la cantidad de elementos que tengas en la sidebar.

Menubar para esta plantilla.

Para añadir la menubar (los botones que hay bajo la cabecera) has de entrar en Diseño/Edición de HTML y, sin expandir elementos, localizar el código de la cabecera que es así:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tuneando la mínima (cabecera)' type='Header'/>
</b:section>
</div>

Y pegar, encima o debajo, (depende de donde quieras que se vea, aunque para mi gusto queda mejor debajo), este código:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkListX' locked='true' title='Menubar' type='LinkList'/>
</b:section>

Fíjate que he remarcado la X de LinkList. Has de cambiarla por un número. Mira cuantas listas de enlaces tienes, (las verás así <b:widget id='LinkList1' o LinkList2, LinkList3, etc.)
y pon en lugar de la X el número que siga al último que veas. Si no estás segur@ pon un número alto, 20 o 30 o algo así.
Seguimos.
Ahora crearemos variables para poder cambiar los colores de los botones sin tener que entrar cada vez a cambiar el código del blog.
Sube hasta el sector de los Variable name y pega estos dos códigos, debajo del último que haya de colores, (que si no has cambiado nada todavía será el de visitedlinkcolor).

<Variable name="botonmenubarcolor" description="Boton Menubar Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="botonmenubarbgcolor"
description="Boton Menubar Background Color" type="color" default="#ffffff"
value="#ffffff">
<Variable name="hoverlinkcolor" description="Hover Link Color" type="color" default="#cccccc" value="#cccccc">

Que cambiarán, (de arriba a abajo), el color del botón que se ve, el color del botón al poner el ratón encima y el color del enlace al poner el ratón encima.
Seguimos.
Luego pega esto encima de ]]></b:skin>

#menubar h2 {
display:none;
}
#menubar ul {
list-style: none;
padding: 0 0 20px 0;
}
#menubar li {
float: left;
background-color: $botonmenubarcolor;
border: outset 2px $bordercolor;
}
#menubar a:link, #menubar a:visited
{
padding: 5px;
display: block;
color: $linkcolor;
}
#menubar a:hover {
background-color: $botonmenubarbgcolor;
color: $hoverlinkcolor;
}

Nota:yo suelo pegarlo debajo del sector Header, ya que es ahí donde está, pero así como en el HTML si que importa la posición, (donde lo pongas aparecerá), en este sector no, pues es el HTML el que manda en cuanto a colocación.

Una vez hecho esto haz Vista previa y si la página carga bien, Guarda.
No la verás, pues has de poner algún enlace para que aparezca.
Ves a Elementos de la página y la verás allí. Pon algún enlace como en cualquier lista de links y aparecerán los botones.
---
IMPORTANTE
Al copiar y pegar los códigos, a veces le desaparecen los espacios que separan las definiciones y entonces al hacer Vista previa te da error.
Asegúrate de que están todos, comparando lo que hayas pegado con el código original y si ves que no hay separación entre dos órdenes ponle un espacio.
Por ejemplo: Aquí, type="color" default="#cccccc" el espacio está entre las comillas que hay después de color y la palabra default.

Como modificar esta plantilla para que tenga este aspecto

¿Tu plantilla es alguna de las mínimas?
¿Que cambios puedes apreciar en esta plantilla de aquí, respecto a la original?
Te cuento: (de arriba a abajo).
---

1. Tiene una imagen en la cabecera.
2. Esta imagen encaja perfectamente en el recuadro original.
3. La línea exterior de este recuadro es mas gruesa y del mismo color que el título del blog (originalmente sería del mismo color que la línea que separa las entradas).
4. La interior no solo es más gruesa, además es discontinua y del color del subtítulo del blog.
5. El título y el subtítulo están situados a la derecha, (no en el centro) y centrados verticalmente (y no arriba del todo).
6. El fondo del blog tiene una imagen.
7. El fondo de la zona donde escribes, sin embargo, no.
8. El conjunto blog/sidebar, tiene el mismo ancho que la cabecera.
9. La línea que separa las entradas es más gruesa, al igual que la que separa los elementos de la sidebar

---

Vamos a ver como cambiar cada uno de estos puntos en la plantilla.

(Código de colores: negro lo que va a seguir igual, rojo lo que hay pero vas a cambiar, azul el cambio realizado y verde lo que puedes poner a tu gusto).

---

1. La imagen de la cabecera la he sacado de aquí. Tienen un montón de banners con unas medidas que quedan bien como cabecera de un blog. (Raro será que no encuentres una que se adapte al tema del tuyo).
2. Para que encaje en el recuadro, una vez la hayas colocado a través de Editar del elemento Cabecera en Plantilla/Elementos de la página has de modificar las medidas de éste, no de la imagen. Pincha en Edición de HTML y busca la zona encabezada por /*Header. Debajo verás #header-wraper. Sustituye en esta línea width:660px; la cantidad de px por ésta 817
3. En el mismo sector, dos líneas mas abajo: border:1px solid; cambia el 1 por el número que prefieras y bordercolor por pagetitlecolor.
4. Dos bloques más abajo, encabezado por #header, pone border: 1px solid $bordercolor; para que se vea como aquí ha de poner border: 3px dashed $descriptioncolor;
5. Algo más abajo, sector encabezado por #header h1, verás esta línea padding:15px 20px .25em; cambia la primera cifra (15) por 75 para centrar el título verticalmente y añade esta línea text-align:right; encima de letter-spacing, para alinear el título a la derecha.
6. Si tu blog tiene subtítulo, un poco más abajo verás #header .description añade también esta línea: text-align:right; para alinear el subtítulo a la derecha.
   
7. Para añadir una imagen al fondo del blog, borra esto background:$bgcolor; y pega esto en su lugar background:url("aquí la dirección de la imagen que vayas a poner") repeat fixed; justo debajo de body { al principio de todo del código de tu plantilla, después de los variables.
8. En la zona encabezada por /* Posts, en el sector titulado .post, añade, encima de margin, esta línea: background:$bgcolor;
9. En la zona encabezada por /* Outer-Wrapper, modifica el ancho (width) de #outer-wrapper, 660 originalmente, por 815, el de main-wrapper, 410, por 600 y el 220 de sidebar-wrapper por un 200. (Puedes modificar estas cantidades a tu antojo y hacer más o menos ancha cada sección, tan solo has de tener en cuenta que la suma de ambas sea igual a 800. Los 17 píxeles restantes hasta alcanzar los 817 de la cabecera, los dejaremos para la separación de zonas).
10. En la zona .post { donde antes has colocado lo del color de fondo, cambias el grosor de la línea modificando la cantidad de px (píxels) de border-bottom. También puedes modificar su aspecto sustituyendo dotted por dashed o solid. La línea que separa los elementos de la sidebar la modificas más abajo, en este sector .sidebar .widget, .main .widget, donde también encontrarás el border-bottom.

---

Variantes de lo anterior:

1. Si quieres poner una imagen personal las medidas del apartado 2. puede que sean distintas, dependiendo del ancho de tu imagen. La altura se adaptará a la imagen que pongas automáticamente.
2. Para hacer esta modificación y adaptar el ancho a tu imagen, antes de empezar a modificar la cifra pincha en vista previa y ves añadiendo píxels y haciendo vista previa, hasta que veas que el recuadro encaja perfectamente. (Fíjate que la cifra que coincide con el banner, 817, no es redonda)
3. Puedes poner como color de las líneas el que tu quieras. Yo he elegido para la muestra el del título y el subtítulo del blog, pero puedes cambiarlo por la variable que desees, o inventar una variable nueva, (en Tuneando el blog te explico como añadir variables al código), mientras respetes los parámetros y los signos que conforman una variable. Puedes llamarla, por ejemplo Border Header color borderheadercolor, para que sepas a qué corresponde cuando aparezca la nueva variable en la lista de Fuentes y colores.
4. La explicación anterior es válida para este apartado.
5. Si tu banner de cabecera tiene la imagen a la derecha, en lugar de text-align:right; escribe text-align:left; y el título se colocará a la izquierda del banner.
6. Lo mismo que en el punto 5.
   
7. Si prefieres que el fondo sea de color liso, déjalo tal y como está, y si quieres poner una imagen transparente, como las que tengo en la scribe y en la rounders de ejemplo, pon esto url("aquí la dirección de la imagen que vayas a poner") repeat fixed entre los dos puntos (:) y el símbolo del dólar ($).
8. Si quieres poner una imagen de fondo a tus entradas, distinta a la que haya en el fondo del blog, añade esta línea background:url("aquí la dirección de la imagen que vayas a poner") repeat fixed; en vez de la que digo en el bloque anterior. (Ver nota al final)
9. Si el ancho final de la cabecera resulta ser distinto al aquí indicado, tendrás que modificar estas cantidades en base a ella, o el blog se verá descompensado. Si la suma del ancho de main-wrapper y de sidebar-wrapper es superior a la de outer-wrapper, la sidebar aparecerá debajo de las entradas. Respeta las proporciones y deja un margen de 10 px para la separación de zonas.
10. Si quieres que la línea de separación tenga un color propio, créale una variable e inventa su nombre, por ejemplo Separador color/separadorcolor y coloca esta última definición en lugar del bordercolor.

---

Nota:

En las líneas de código que contienen direcciones de imágenes he puesto repeat y fixed.

Repeat hace que una imagen pequeña se vaya repitiendo a lo ancho y alto del blog, fixed hace que al mover la página con el ratón o usando la barra lateral del scroll, el fondo no se mueva.

Al ensanchar la parte aprovechable de tu plantilla, en Elementos de la página verás que los recuadros también se han ensanchado y se salen de madre. No se si tiene arreglo, si lo tiene ya dejaré las instucciones.

---

Otros cambios que puedes realizar, añadir iconos, variables, etc, encontrarás las explicaciones en el blog principal.

---

Consejos:

Haz los cambios que desees uno a uno, haz Vista previa cada vez que modifiques algo y Guarda plantilla si el cambio te satisface y la página carga bien. Así te evitarás tener que repetir los cambios que no hayas guardado si en algún momento has de pinchar en Borrar cambios, pues elimina todos los que no hayan sido guardados.

--- ¡Suerte!---

Para cualquier duda o consulta, puedes dejarme un comentario o contactarme via e-mail.

---

¡ATENCIÓN!

Cuando hice esta entrada, todos los blogs de blogger utilizaban las expresiónes right y left para indicar la derecha y la izquierda.

Pero hace tiempo añadieron dos variables a los códigos de las plantillas, con lo que si tu blog es posterior a la fecha de creación de este, en lugar de right has de poner (o verás) $endSide y en lugar de left $startSide.

Para saber si tu blog está construido en un modo u otro, mira al final de las variables si hay las dos que indican la modificación.