Modificando el diseño de una plantilla pre-diseñada (Parte 1)

¡Hola!
Primero que todo les deseo a todas unas muy lindas fiestas ^-^

Ahora sí, lo que haré será explicarles cada parte de una plantilla para que sepan qué modificar y qué no.

ACLARACIÓN: No todas las plantillas son iguales por lo que es a prueba y error.
¡Comencemos!
Antes que nada deben pensar qué paleta de colores utilizaran en su blog y eso aplicarlo a TODO. Sino será igual al árbol de navidad y eso no es lo que queremos.

En Color Hunt encontraran un montón de opciones para darse una idea.

Luego deben pensar qué fuente les gustaría que haya en su blog. No es muy atrayente que sea todo de la misma font pero sí que logren el efecto "armonizado" (por decirlo de algún modo).

¿Cómo cambiar las fuentes de mi blog?

Primero realicen una copia de seguridad de la plantilla.

1. Diríjanse a Google fonts y elijan máximo tres fonts. Esto lo digo porque lo más conveniente es que las entradas y los comentarios posean la misma font. El título de la entrada otra y el título de los gadgets la que queda.

2. En la siguiente imagen les muestro qué les aparece nada más entrar a la página. Allí te muestra las distintas fuentes para que puedas verlas y elegir.


Ahora bien, verán que en la parte superior de cada fuente hay un botón con un signo más. Eso es para poder obtener el código. Seleccionen la primera font que eligieron. 

Una vez hecho eso, abajo les aparecerá un recuadro que dice: "1 Family Selected".



 Muy bien, el primer código que aparece es (en mi ejemplo) este:
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">

3. Vayan a Plantilla--Edición html y busquen un código parecido, busquen la etiqueta <head> con Ctrl+f. Suele estar en el comienzo de las plantillas. Allí les aparecerán el mismo tipo de código pero con las fuentes de la plantilla pre-diseñada.
En word o en bloc de notas copien los que son de la fuente pre-diseñada, esto es obligatorio para explicarles más adelante.
Luego copien el código que les dice google fonts de la fuente que eligieron (que es como mi ejemplo de arriba) y seleccionen uno de los link href, lo borran y pegan el nuevo. A este nuevo lo tienen que completar con "/". Es decir:

<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet"/>


Como notaran, antes no tenía la barra. Si no se la colocan, dará error en el código.

4. Revisen en el documento word o en bloc de notas los nombres de las fuentes anteriores. Ahora, en la plantilla opriman Ctrl+f y busquen la fuente. Les aparecerá algo así:

font-family: 'Roboto', sans-serif;

En google fonts hay otro código para la primera fuente que eligieron (que es igual al de arriba), en mi caso será:

font-family: 'Arima Madurai', cursive;

Con ese código reemplazaran todas las veces que aparezca el anterior (que era font-family: 'Roboto', sans-serif;)

LO MISMO CON TODAS LAS FUENTES.

Si quisieramos modificar la fuente sólo en un lugar en específico, lo que deben hacer es:
1. Realizar los pasos anteriores hasta el paso nro. 3.
2. Dirijanse a Diseño - Diseñador de plantillas - Avanzado - Añadir CSS

Si lo que quieren es modificar el título de la entrada esto es lo que pondrán:
h3.
post-title {
font-family: ‘Amatic SC’;}

Lo que está remarcado será sustituido por la font que ustedes eligieron, siguiendo mi ejemplo sería:
h3.
post-title {
font-family: 'Arima Madurai', cursive;
}

Si lo que quieren es cambiar la font de todo el blog, deben usar el siguiente código (recuerden cambiar el código por su fuente elegida):
body {
font-family: 'Arima Madurai', cursive;
}
Si quieren cambiar la font de la cabecera, sería el siguiente:
.header h1 {
font-family: 'Arima Madurai', cursive;
}
Y por último, si quieren cambiar el cuerpo de la entrada el código sería este:
.post-body {
font-family: 'Arima Madurai', cursive;
}

Publicaré la segunda parte del tutorial pronto. Cualquier duda me dejan un comentario.

¡Saludos!
  

12 comentarios:

  1. Me encanto! Una explicación super facil, muy bueno, espero que sigas con estas entradas :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegra que te guste. Ya publicaré la siguiente parte ;)

      Eliminar
  2. Wow...está re bien explicado...ahora no tengo tiempo de hacerlo porque el html es complicado y hay que ser cuidadoso...pero definitivamente voy a tener en cuenta esta entrada. Saludos¡¡¡

    ResponderEliminar
    Respuestas
    1. ¡Hola! Gracias por pasarte por mi blog y espero que te sea de ayuda =D

      ¡Saludos!

      Eliminar
  3. Hola!
    Muchas gracias por la info y por poner todo tan detallado. Lo voy a tener en cuenta para próximas modificaciones en el blog :)
    Besos

    ResponderEliminar
  4. No sabés lo bien que me habría venido esto cuando creé el blog. Me pasé días entre tutoriales varios para hacer alguna de las cosas que mencionás jajajaja.
    Gracias <3

    ResponderEliminar
  5. ¡Hola, hola! Creo que lo entendí bien, me gusta como explicas. Antes me buscaba mil tutoriales para entender un poco sobre el diseño de blogs pero me rendi y estoy usando una plantilla prediseñada que adecue a mi gusto.

    Un beso,
    Ceci de Vivo entre tus páginas.

    ResponderEliminar
  6. Hola! Me gustó mucho esta entrada :) justo estoy considerando realizar cambios a mi blog y esta clase de entradas me sirven un montón!!
    Gracias por compartir esto con nosotros!! Seguí así :)
    Un beso!!

    ResponderEliminar
  7. Hola! Todo bien?
    Voy a guardar esta entrada para chusmear cuando quiera modificar un poco mi blog. En estos momentos estoy conforme con como está... Pero hubo una época que me harté de buscar tutoriales por todos lados para lograr lo que yo quería hacer jajaj Así que me viene como anillo al dedo esto... Está bueno poder cambiar el tipo de letra del blog, sin tener que depender de las que te ofrece la plataforma. Hay muchas letras lindas que se pueden emplear jajaja
    Saludos

    ResponderEliminar
  8. ¡Me encantó! Espero que sigas subiendo entradas de estilo informativas con respecto a los blogs. Yo, por ejemplo, soy re queso y me tuvo que armar todo una amiga. Sí está bonito pero es algo sencillo, así que estaría bueno utilizar tus consejos para más adelante a ver si me animo a hacer algo solita. Muchas gracias por la entrada!
    Besitos

    ResponderEliminar
  9. ¡Hola! La verdad que me gustó mucho como explicaste todo y en estos momentos estoy buscando la segunda parte para ver que datos más nos das :) Por lo pronto estoy por retocar las tipografías, si algo no me sale vuelvo para dejarte un comentario jejeje

    ¡Nos leemos!

    ResponderEliminar
  10. ¡Hola! Es una entrada bastante útil, yo tengo un problema con mi blog y es que si bien le instalé una determinada font, la única manera de poder aplicarla es modificando el código html de cada párrafo con "sans-serif", ahí se aplica, me gustaría que la opción "Predeterminada" de la letra del editor lo hiciera por mí.

    ResponderEliminar