Modificación de la plantilla

Antes de ponernos manos a la obra con linux, voy a comentar un poco como he cambiado el diseño de la plantilla, tan sólo los elementos principales por si a alguien le interesa.

Esta blog esta hecho desde google, cualquiera puede hacerse uno con facilidad.
Una vez tenemos creada la cuenta y el blog, vamos a seleccionar una plantilla antes de hacer nada.
Para empezar nos debemos descargar una plantilla que nos guste, en este enlace encontraréis plantillas de todo tipo: http://btemplates.com//


Este es el aspecto de mi plantilla antes de editarla:















Voy a explicar como he cambiado los aspectos básicos de la plantilla, editando el archivo HTML, antes de empezar, comprobaremos que en el apartado "Diseño" podemos cambiar opciones generales del menú, como el título o la descripción, añadir gadgets etc...

Entramos en diseño, edición de HTML.
Volviendo a la plantilla, lo primero que he visto importante era poner un fondo de pantalla, que sustituyerá el fondo negro inicial, para ello vamos al body principal, el primero que aparece, y cambiamos el valor background por background-image: url(url_imagen). Debemos tener en cuenta que es importante subir nuestras imágenes en cualquier servidor de imágenes al que tengamos pleno acceso, de lo contrario si hay algún problema en la url no se mostrará.

Sabiendo cambiar esta imagen, nos vamos al header, y en el apartado #header-wrapper sustituimos el background por background-image:url(url_imagen) como hemos hecho anteriormente.

Ahora nos centramos en el título. Esta realizado con h1, asi que debemos ir a #header h1, y cambiar los valores, en mi caso he añadido el tamaño en pixeles, quedando mi linea así:
font: bold 40px Trebuchet MS;
También he aumentado el margen, aumentando los pixeles que dejará de espacio a la derecha:
margin: 0px 0px 0px 30px;
Esta misma acción la podemos realizar en la descripción del título, en el #header.description.

Ya tenemos la cabecera definida, ahora pasamos a el cuerpo de la plantilla (main).
Lo primero que he hecho, ha sido eliminar la información que me sobrarba en mi plantilla, y he borrado todos los Tabber, dejando únicamente el cuerpo de las entradas y el archivo de blog y las suscripciones.
Para borrarlo simplemente he ido bajo del código y he borrado todas las etiquetas div que contenian los tabber.

Una vez hecho esto, cambio el tamaño de el cuerpo principal, para ello vamos a la etiqueta #main-wrapper, y cambiamos el tamaño de width (ancho) a los pixeles que queramos, en mi caso 760 px. Lo mismo hacemos en la barra que aparece a la derecha, en #sidebar-wrapper, he reducido el tamaño en width, y en ambos casos, he cambiado el fondo en background, cambiando el número hexadecimal que aparece. Para los colores en html siempre es recomendable escribir el código hexadecimal, antes que el nombre del color, ya que es posible que algún navegador no lo entienda correctamente.
Aquí todos los colores html: http://es.wikipedia.org/wiki/Colores_HTML

Para los que bordes que rodean la página, hay que ir a #linkbar, en sus apartados, aparecen todos los bordes que rodean la página, yo solo les he cambiado el color, en background, pero otra opción interesantes son el ancho en px: border 1px solid, podemos modificarlo como queramos.

Y nos queda el footer, para ello vamos al apartado #Footer-wrapper. En mi caso no ha sido necesario cambiar nada, pero deberíamos seguir los pasos que hemos seguido anteriormente para cambiar el pie de página.

A partir de aqui, cada uno puede curiosear y probar cosas nuevas, con cuidado de no guardar la plantilla, y hacer una vista previa antes de guardar para ver como queda.

En resumen, las principales opciones del código html son:

1. Css incluye: global (body principal), Busca: opciones del buscador que esta instalado a la derecha, header: Opciones de la barra de cabecera, Linkbar: Bordes que rodean la página, Main: Cuerpo del blog, Footer: Pie de página, sidebar: Barras de la página, y otros apartados que no hemos visto.
   
2. Código javascrpit.
3. Código html.

Como véis, con un par de retoques más, la plantilla ha cambiado bastante, y le podemos dar un toque más personal.
Espero haber servido de ayuda, un saludo.