Creación de un tema para Wordpress a partir de Sandbox (II)
Por TenienteCastillo el 16 de Abr de 2008 | etiquetado como blog, wordpress
Continúo con la creación de una plantilla personalizada a mi gusto a partir del tema Sandbox.
Que os quede claro, no tengo idea de CSS (estoy aprendiendo ahora). Lo que voy a hacer es copiar y pegar de otros temas las partes que me gusten (respetando los derechos de autor de cada uno, eso sí). Lo que pasa es que hacer esto no es tan fácil como parece, y sí que tienes que hacerlo con algo de “gracia”.
Voy a adaptar el “encuadre” del blog y cambiar la cabecera.
Para empezar, me gustaría un encuadre como el del tema Xplosive, de Blog Oh! Blog, así que me descargo el tema y reviso el fichero style.css. Los estilos que me interesan son estos:
*{margin:0;padding:0;}
body{background: #333333;color:#333;font:0.8em Tahoma;margin-bottom:20px; line-height:20px;}
#wrapper{background:#FFFFFF;margin:20px auto;padding:20px; width:900px;}
Así definimos el color de fondo y el encuadre del blog.
Lo que pasa es que quiero conservar casi la misma anchura que tengo actualmente todas las columnas, por lo que la aumento a 920px:
#wrapper{background:#FFFFFF;margin:20px auto;padding:20px; width:920px;}
Quiero que quepa en una pantalla de 1024 pixels de ancho, aunque las capturas están hechas a 1280, que es la resolución de la mayoría de las pantallas TFT actuales.
Incluyo estos estilos en mi fichero styles.css y el resultado es este:
Vamos a por la cabecera del blog. La plantilla Sandbox tiene definido este estilo:
div#header{text-align:center;margin-bottom:2em;}
Me gusta la cabecera de la plantilla Xplosive Reloaded, también de Blog Oh! Blog. Lo que pasa es que ese gráfico que incluye tiene incluido un texto que no me gusta. El estilo es así:
#header {margin:0;padding:0; width:900px;display:block;background:url(images/header_default.png) no-repeat left;height:160px;}
Hay que cambiar varias cosas. el ancho lo ponemos en 920 pixels y el fondo lo vamos a poner en un color azul, quitando ese gráfico que he comentado. El estilo me queda así:
div#header {margin:0;padding:0; width:920px;display:block;background:#1F6EA0;height:160px;}
Y, con esto, la cabecera se ve así:
Hay que arreglarlo un poco. A ver si tengo tiempo mañana de tocar colores y alineación de los títulos.
También te puede interesar ...
wallace | 16 de Abr de 2008 - 20:59
teniente, cambia tu blog de una vez, la estética digo, impacienteeeeeeeeeeeeeeee.
TenienteCastillo | 17 de Abr de 2008 - 7:32
JAJAJA, wallace, no seas impaciente. De verdad que lo estoy escribiendo “en directo”, y como puedes ver, todavía está muy verde la plantilla como para cambiarla.
Lo que pretendo enseñar es que no hay que controlar CSS para dar una imagen propia al blog.