Este debió de ser uno de los primeros posts. Como ya advierto por algún lado, el diseño y el contenido de este blog se van haciendo a la vez, y ése es el motivo de que las entradas estén francamente desordenadas.
Hubiera querido empezar con un post explicativo de los diferentes componentes de la plantilla, el HTML básico y qué es el CSS. Pero no tengo paciencia, y sospecho que mis lectores tampoco. Al fin y al cabo, si tuvieras intención de aprender todo eso, no estarías aquí.
Aquí, vamos a lo fácil, a lo que verdaderamente interesa a quien hace un blog, lo quiere personalizar y decorar, pero no quiere meterse en los entresijos crípticos del template: lo que queremos es básicamente copiar y pegar, y que nos digan el sitio exacto donde hacer los cambios que deseamos.
¡PARA ESO ESTÁ LA BLOGUERÍA!
Te recomiendo vehementemente que personalices tu Blog al máximo, que lo hagas resaltar entre otros blogs, que consigas al primer golpe de vista que tu blog sea TU BLOG y no uno más entre tantos. Evidentemente, esto se consigue con un buen contenido, pero la impresión visual es casi tan importante a la hora de que alguien se detenga y observe. Y también es un regalo del autor del blog hacia sus lectores, una expresión de su personalidad y gustos, y un requisito indispensable para conseguir lo que llamamos UN BLOG CON ESTILO.
Antes de empezar, 2 cosas: guarda tu plantilla antes de nada, usa la vista previa para verificar resultados, borra los cambios que no te gusten y vuelve a empezar, usa CRTL + F para buscar las diferentes partes de la plantilla, y guarda los cambios una vez estés satisfecho con ellos.
- Es el primer cambio que efectúo en mis blogs. Marca la principal diferencia con otros blogs al primer golpe de vista. Puedes poner fondos animados (contrólate, pero si no puedes evitarlo, echa un vistazo a lo que nos propone Aadvark), un imagen que se repita, una imagen grande que lo cubra todo, una imagen pequeña posicionada en el lugar que elijas, puedes no poner imagen y cambiar simplemente el color… En fin, puedes hacer lo que quieras, pero, ¿dónde? Echemos un vistazo a mi plantilla: body { background:$bgcolor; margin:0; padding-left: 100px; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; background-color: #EBEAEC; background-image: url(http://lablogueria.googlepages.com/fondo.png); background-attachment: fixed; background-position: bottom left; background-repeat: no-repeat; border-color: #ffffff; border-width:0px ; border-style: solid; } Aquí tenemos especificado en este orden: – el color del fondo, – la URL de la imagen que queremos añadir, – con “fixed” le decimos que permanezca fijo cuando bajamos la página, – la posición donde queremos fijar la imagen, en caso de que sea una imagen pequeña, – que la imagen NO se repita aunque sea pequeña. Puedes añadir líneas si no están en tu plantilla, como por ejemplo background-image, o eliminarlas si deseas por ejemplo que el fondo se mueva a la vez que la página (position:fixed). Si usas una imagen pequeña y quieres que se repita para crear un fondo, cambia no-repeat por repeat, y si deseas que no se repita sino que aparezca en la parte superior derecha de la página, por ejemplo, cambia el bottom-left por top-right.
- Ahora, digamos que quieres que el cuerpo de las entradas sea más amplio, y la sidebar más estrecha, o transparente, o cambiarla de posición: /* Outer-Wrapper ———————————————– */ #outer-wrapper { width: 920px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 500px; float: left; margin-left: 0px; padding: 15px; border: double 0.4em $bordercolor; background-color:#f8f8ff; filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; -khtml-opacity:0.85; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 140px; float: right; padding: 10px; border:6px outset grey; background-color:black; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } OUTER-WRAPPER: es la envoltura externa, lo que contiene al cuerpo y a la sidebar; ajusta las medidas, y recuerda que deben ser mayores que el tamaño de lo que contiene: es decir, si el cuerpo principal o “main-wrapper” mide 600px y la sidebar 200px, y además tienen entre ellas un margen de 10 px (para separarlas), pues el “outer-wrapper“deberá medir al menos 810px, o la barra lateral se desplazará hacia abajo por falta de espacio; también has de respetar la alineación, si la sidebar la pones a la derecha, acuérdate de cambiar la alineación del cuerpo principal hacia la izquierda. MAIN-WRAPPER: es el cuerpo principal y contiene las entradas, y lo que pongas encima o debajo de éstas. En este caso está posicionada a la derecha (right) de la sidebar, pero podrías ponerla a la izquierda (left). Eso sí, no olvides entonces cambiar también la posición de la sidebar para que se coloque al otro lado. Ponle el color que quieras, en mi caso, escogí que fuera un poco transparente, y para ello añadí un filtro de opacidad; si quieres transparencia, copia y pega esa línea y disminuye el número para hacerla más transparente y auméntalo para menor transparencia. ¡Ojo! La transparencia se aplicará a TODO lo que contenga, es decir, texto y fotos de las entradas; asi que no te pases o será ilegible e invisible. SIDEBAR-WRAPPER: pues sí, sí, es la sidebar como ya habrás intuido; y, ¿qué es el padding? Pues la distancia entre el borde y lo que contiene; dale un valor de entre 6 y 10 px. para evitar que el texto se pegue a los bordes. Si quieres que tu sidebar, como la mía, tenga un borde, pues adelante, juega con el tamaño y los diferentes tipos de bordes. Si quieres añadir una segunda sidebar, puedes hacerlo fácilmente, te explico cómo aquí.
- Si cambias las medidas del cuerpo principal, probablemente quieras hacer coincidir con éstas las del header y footer; se especifican aquí: /* Header ———————————————– */ #header-wrapper { width:920px; margin:0 auto 10px; border:1px solid $bordercolor; } Esa es la cabecera, verás que su medida coincide con la del outer-wrapper. /* Footer ———————————————– */ #footer { width:920px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } Y esta es la envoltura del footer o pie de página; para un resultado uniforme, iguala también sus medidas con las del cuerpo principal o cabecera. Y, ¿qué es eso de line-height y text-transform? Lo primero, indica la distancia entre las líneas de texto, y lo segundo, indica que se ha de transformar el texto del footer en MAYÚSCULAS. Puedes simplemente borrar esa línea si deseas un texto normal.
- Y para completar esta entrada, supongamos que deseas que el cuerpo de tu blog, que ahora mismo aparecerá en el centro, se desplace hacia la izquierda, para dejar al descubierto la imagen de fondo, o lo que sea. En este blog puedes ver que el margen izquierdo es mayor que el derecho. ¿Dónde hacemos este ajuste? Pues aqui: body { background:$bgcolor; margin:0; padding-left: 100px; color:$textcolor; Le estamos diciendo a todo el conjunto del cuerpo, que se desplace 100 pixels DESDE la izquierda, o sea HACIA la derecha.
Con estos ajustes básicos, habrás conseguido personalizar tu blog y cambiar su apariencia estándar y uniforme, diferenciarlo del resto. Puedes usar cualquier plantilla, y transformarla a tu gusto. ¡Suerte, y que la inspiración te acompañe!