Cómo hacer una plantilla: todo sobre los fondos

¡Hola! Vengo con la tercera parte de estos tutoriales... En la primera parte habíamos visto la estructura básica de nuestra plantilla con cada una de sus partes. Hoy vamos a ver cómo ponerle un fondo a cada una de esas partes y los diferentes tipos de fondos que existen.

Primero lo primero, como siempre. Como muchos ya deben saber, el fondo puede ser un color o puede ser una imagen.

+ Si queremos que el color de fondo de lo que fuera sea un color debemos agregar dentro de la etiqueta que corresponde lo siguiente:

       background: #ffffff;

Y cambiamos el ffffff por el código hexadecimal del color que ustedes quieran. Si no saben dónde pueden conseguir los códigos de los colores, esta es una página donde pueden encontrarlos.

+ Si en cambio queremos que el fondo sea una imagen, lo que debemos agregar es:

       background: url('link de la imagen');
       background-repeat: repeat/repeat-x/repeat-y/no-repeat;

Notar que background-repeat alude a la repetición del fondo. Si queremos que solamente se repita en el eje X, es decir horizontalmente, escogemos repeat-x; para que solo se repita en sentido vertical, escogemos repeat-y y si queremos que se repita a ambos lados, pondremos repeat. Y si es una imagen que ocupa toda la pantalla y no queremos que se repita, colocaremos no-repeat.

- También puede ocurrir que quieran que una parte en particular no tenga ningun tipo de fondo; en ese caso lo que se debe colocar es:

       background: transparent;

Ahora sí, pasemos a ver cómo cambiar el fondo a distintas partes de nuestro blog.

Fondo del blog

Para cambiar el fondo de todo tu blog, que en la Mínima se ve blanco, lo que tienes que buscar es body { y donde pone background sale $bgcolor, a eso lo vas a reemplazar por lo que te dije antes (dependiendo si quieres imagen o color). Haciendo esto vas a tener algo así:

Como ven, el contenido del blog no tiene fondo entonces, si quieren usar un fondo llamativo como el que se ve en la imagen, tendrán que ponerle fondo al contenido porque sino no va a llegar a leerse. Esencialmente, pueden hacerlo de 2 formas.

1. Poniendo fondo al outer-wrapper

+ Buscan #outer-wrapper debajo deberan agregar la opción de fondo ya que no aparece esa propiedad (por eso se ve transparente).

2. Poniendo fondo a las columnas de entradas y sidebar por separado

+ En este caso, tienes que buscar #main-wrapper y #sidebar-wrapper y agregar el fondo. Pero además debes hacer dos cosas extra (bueno, una es opcional): por un lado, agregarle una propiedad que se llama 'padding' y que en pocas palabras podría definirse como un margen interno. No importa mucho ahora, solo haganme caso y agreguenlo (que no sea más de 10px):

padding: 5px;

Por otra parte, como se aprecia en la imagen, el header también se queda sin fondo. Así es que si van a usar una imagen como header, tal vez no necesiten agregarlo pero si quieren simplemente colocar el título de su blog, yo lo recomendaría. Para hacerlo, vamos a buscar #header-wrapper y una vez más, agregamos la opción de fondo.

*Nota* Si quieren sacar ese borde que aparece al header, borren la línea dentro de #header-wrapper que pone border: 1px solid $bordercolor; y que sale también un pelín más abajo, dentro de #header.

Hasta aquí, así lo tengo yo: {ir al blog de pruebas}

Creo que esto da posibilidades de para hacer cosas diferentes... no voy a explicar idea por idea, claramente, porque sería eterno esto, ¿no? Así que bueno hasta aquí todo por hoy, cualquier duda, me dejan un comentario :)

No se que vendrá en la próxima parte porque todavía ni me he sentado a pensarlo, lo subiré en cuanto pueda aunque no creo que sea en esta semana ya que estoy de exámenes (si, ya tengo examenes y eso que empecé el colegio hace apenas 2 semanas, increíble). Besos!