FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cómo hacer una plantilla: todo sobre los fondos

22 mar 2014

¡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):




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!

10 comentarios :

  1. ¡Vaya tutorialazo! LLevaba años pensando como lo harían otras bloggers jajaja
    Gracias por tus aportes y trabajo, besazos :)

    ResponderEliminar
    Respuestas
    1. jajaja sí? Gracias a tí por tu comentario! Un besito :)

      Eliminar
  2. Dónde pondría el código del header (es una imagen)? Desde ya, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Bueno, ese tutorial vendrá un poquitin más adelante pero si te haces una idea mas o menos de cómo tienes que ponerlo, te digo donde!

      Mira, vas a Editar HTML y en la cajita del código vas a ver esto (sin apretar en el buscador ni nada, a lo sumo tenes que bajar un cachito): http://i62.tinypic.com/1zdvhib.jpg Lo que te sale entre < div id='header-wrapper'> y el primer lo borras y lo reemplazas por el código de la imagen de tu header :) Besos!

      Eliminar
    2. perdón después de 'y el primer' viene: < / div> (aunque todo junto), se lo comió blogger cuando publique el comentario :/

      Eliminar
  3. Gracias Cataa! Sisi, he visto tus tutos y gracias a eso entiendo a lo que te refieres :D

    ResponderEliminar
  4. Holaa Cata! Me encanto el fondo de este tutorial (osea el del blog de pruebas) ¿me lo podrias pasaar? *-*

    ResponderEliminar
    Respuestas
    1. Holaa!! http://i58.tinypic.com/23vhmw.jpg ahí lo tienes :) Creo que voy a hacer un pack de estos fondos porque encontré muchos y son todos preciosos.. así que te interesan, estate atenta jaja. Besitos!

      Eliminar
  5. Hola! Tienes un premio en mi blog. Pásate :) http://blog-cosas-de-chicas.blogspot.com

    ResponderEliminar