Así he dejado el blog

Después de muchos ratos de entretenimiento con el código del blog y con el Photoshop, ya tengo un diseño satisfactorio de la plantilla. La verdad es que la antigua y la nueva se parecen como un huevo y una castaña, excepto por un par de detallitos.

El proceso ha sido mucho más fácil de lo que imaginaba. La tipografía predeterminada, la cabecera y los colores del texto se pueden modificar sin necesidad de entrar al código. El resto ya ha sido observar, modificar (la mayoría de las veces en Photoshop, porque esta plantilla trae mucho .gif) y reemplazar. Los pasos que he seguido desde estridente plantilla inicial hasta la plantilla final, mucho más sosa y simple (como yo), son los siguientes:

Fase 1

• Es la plantilla original salvo por dos cosas: la tipografía predeterminada y los colores de los hipervínculos. La tipografía la cambié porque ésta (Trebuchet MS) me encajaba mejor que la que venía (creo que Verdana) y los vínculos porque eran demasiado estridentes y alguna se quejó de que se estaba quedando ciega (y no le faltaba razón).

Fase 2

• Empezamos por arriba: modificación de la cabecera con Photoshop. Los cuadros azulados los hice con selecciones rectangulares y el modo "color" del pincel, utilizando el mismo color que puse en esta fase para los over de los hipervínculos (que no se ve en la foto pero es un azul muy bonito), a los que además les quité el subrayado. Queda más claro porque este modo del pincel respeta la intensidad del color sobre el que pintas, por explicarlo de manera rápida y simple. También hice una máscara de capa para cambiar la mini-foto que, por si alguien no se ha fijado, en la plantilla original es la chimenea de una fábrica y en la mía es la puerta de Brandeburgo (of course, seguro que no esperabáis menos de mí). De nuevo, utilicé el pincel en modo "color" para que quedara verde. También cambié el color de la línea que separa la cabecera por otro verde menos estridente.
• En el cuerpo de la página, modifiqué el fondo de la descripción, que es un tramado formado por un .gif de 6x6 píxeles repetido horizontal y verticalmente. El fondo de la página pasa de blanco a gris y el contenedor de la derecha usa ahora el mismo color que le puse a la línea de la cabecera. La fecha y los títulos de las secciones de la barra lateral son más oscuros y creo que no me dejo nada de esta fase.

Fase 3

• Cambié el fondo plano de la página por un degradado hecho en Photoshop. No es más que un gif de 10x700 píxeles repetido horizontalmente. Para que no se note el corte, la parte inferior del degradado es del mismo color que el fondo de la página. La línea que hay encima de la descripción del blog es del mismo azul que los over de los hipervínculos. Los titulares de las secciones de la barra lateral me parecían demasiado grandes, así que los reduje.
• En la captura de pantalla no se ve pero modifiqué el estilo de las imágenes. Antes, tenían un borde de 1px, con un padding (separación entre la caja y el elemento que contiene) de 1px. Eliminé el padding, aumenté el groso del borde a 2px y lo puse del mismo color que los títulos de los post y de los hipervínculos.
  

Fase 4 (la juerga padre)

• Lo primero fue ensanchar. La plantilla previa tenía 700px de ancho y ésta tiene 900px. Los 200px de diferencia se los ha llevado íntegramente el contenedor de la izquierda. Tuve que cambiar la imagen de fondo del cuerpo (sí, llevaba imagen de fondo) porque quedaba un corte en la antigua posición de los dos contenedores. Ya que estaba enredando con el Photoshop, aproveché para que la parte derecha fuera del mismo color y ancho que el contendor y eliminar un corte muy feo que quedaba al final de la barra lateral.
• También en Photoshop, modifiqué las líneas de separación entre elementos. Las antiguas tenían la parte derecha más gruesa y eran todas iguales. Lo que hice fue crear una línea de 2px de color verde para separar elementos y otra gris de 1px para separar el título del resto del post. Seguro que hay formas más limpias de insertar una línea pero la plantilla las traía como imagen y es más cómodo subir la imagen nueva y pegar la ubicación en el lugar correspondiente del código que andar enredando para crear una línea que no descuadre.
  
• Tanto enredar con la cabecera para nada. Hice esta cabecera nueva en Photoshop y la cargué en el código pero había un problema: el título del blog y la descripción aparecían por encima, con lo que me encontré un recuadro verde de fondo tramado abajo a la derecha y dos "soy parada" en la parte izquierda. Eliminé el fondo tramado y todo lo que lo rodeaba (que no era poco) y le cambié el color (mismo de los títulos de los post) por otro más claro y menos saturado (el mismo del contenedor derecho). Luego me di cuenta de que todo era mucho más sencillo sin entrar en el código, ya que en la opción "Elementos de página" de la pestaña "Diseño" se puede cargar la imagen que quieres usar como plantilla y decirle qu e tape título del blog y descripción.
• La cabecera está creada en Photoshop (cómo no) utilizando colores que están en el resto de la plantilla: el de los títulos de los post para el nombre del blog, el de los títulos de la barra lateral para el fondo y el del contenedor derecho para la descripción. Las tipografías que elegí son la Cooper Black (una tipografía "maldita" porque se ha abusado de ella hasta la saciedad en situaciones en las que no viene a cuento su uso) para el nombre del blog y la Trebuchet MS para la descripción. La línea verde que rodea la cabecera aparece porque la puse como predeterminada para las imágenes del blog. Tuve que quitarle un par de píxeles de ancho a la cabecera para que no descuadrara pero aún así sobresale un poquito por un lateral.

Y así es como convertí la plantilla Tequila en una cosa totalmente distinta. ¿Sugerencias? ¿Dudas? ¿Amenazas?