Ajustes finos en la plantilla Blogger (II)

Seguiremos ahora con el tema que empezamos en el post previo, pero apuntando esta vez a un caso práctico: voy a realizar cambios en la plantilla de este blog (en su versión de junio de 2016), agregando o sobrescribiendo estilos CSS desde la ventana de edición que me ofrece la plataforma Blogger.
En caso de que no hayas leído el mencionado post, aviso que para entender los procedimientos a ser aplicados aquí te serán necesarios algunos conocimientos básicos de lenguaje HTML y de CSS…

Datos de la plantilla tomada como punto de partida

Dado de que no es probable que el aspecto de este blog al momento de que estés leyendo estas líneas sea el mismo que tiene al momento de que yo estoy escribiendo este post (dicho más fácil… es muy probable que ya haya cambiado de mi plantilla “oficial” a otra personalizada), te algunos algunos datos de mi template a junio de 2016:

• Está basada en una de las plantillas del grupo Watermark (o Filigrana, en español).
• Usa la fuente Roboto de 16px en la configuración de Fuente de Texto de la página. Esta fuente es la que aparece no sólo en los textos de los contenidos, sino también como fuente para los gadgets, y cualquier otro texto genérico.
• Usa la fuente Paytone One de 30px en la configuración de Fuente del título para Entrada: esto no sólo se aplica para los títulos de los posts, sino también para los títulos en la zona de comentarios (very very baaaad!).

Desde ya que sólo mencioné los datos que tendrán que ver con los cambios que voy a efectuar.

Manos a la obra: analicemos los cambios de algunas tipografías

Como dato anecdótico te cuento que la primer fuente que elegí para el contenido se llama Puritan, la que luego cambié a Roboto por cuestiones de legibilidad. Sin embargo, los textos del footer quedaban (para mi gusto) mejor en Puritan, por lo que me propongo deshacer la unicidad  propuesta por la configuración básica que me ofrece Blogger.
Por otra parte, tampoco me gusta la preponderancia visual que tienen los títulos del área de comentarios. A los fines de este mini-tutorial los voy a cambiar también a la fuente Puritan, y darles un tamaño menor.
Los pasos a seguir son:

1- Identificar la etiqueta HTML sobre la cual realizar el primer cambio de estilo

Esta es la parte donde hay que dedicar más tiempo, ya que habrá que investigar sobre un terreno desconocido: la estructura HTML de la página.
Primero debemos tener ante nuestra vista la página que querramos analizar (en nuestro caso, como el footer se repite en todo el blog, podría ser cualquiera).
Allí abrimos el inspector incorporado en las Herramientas de Desarrollador (Ctrl + Mayús + I), e intentamos detectar el elemento HTML sobre el cual aplicar los cambios.
NOTA: yo lo voy a hacer en Firefox, pero —al menos— en Chrome los procedimientos son similares.

Es importante destacar que el proceso tendrá bastante de prueba y error, y también que muchas veces podremos encontrar más de un elemento HTML que sirva a nuestros fines:  voy a empezar probando con el elemento <footer> .
Para mi prueba voy a agregar lo que se llama un elemento inline transitorio desde la zona donde aparece la definición de reglas de <footer>; como sólo me interesa ver cómo se afecta la visualización de la página, voy a probar con una familia de fuente instalada en mi máquina —usé Georgia como podría haber usado Arial o cualquier otra fuente común—

Como vemos en la imagen animada, sólo cambian los textos básicos presentes en el footer, pero NO la fuente de los títulos (que es lo que quería)… la regla CSS de estilo a agregar debería tener incluir algo como:

footer {font-family: 'Puritan', sans-serif;} 

2- Identificar la etiqueta HTML sobre la cual realizar el segundo cambio de estilo

Como esto puede cambiar dependiendo de que la página tenga comentarios o no, habrá que revisar ambas alternativas.

En el caso mostrado en la imagen previa, la inspección revela que la etiqueta que deberá ser afectada por el cambio de estilo es del tipo <h4> (se ven 2 en el ejemplo, y hay otra más fuera de imagen). A diferencia del caso anterior —donde <footer> es una etiqueta HTML5 única— nos encontraremos con varias etiquetas <h4> en la página, por lo que será necesario precisar a cuáles de ellas afectar.
De la estructura HTML de la página se puede ver que dichas etiquetas están contenidas dentro del siguiente div, que encierra todo lo que  tiene que ver con los commentarios (textos y formularios).

<div class='comments' id='comments'>… </div>  

Usando las reglas con que se escriben los estilos CSS, y como las <h4> son “hijas” de ese contenedor de identificador id=’comments’, deberíamos culminar con un código similar a este:

div#comments h4 {font-family: 'Puritan', sans-serif; font-size:??}  

---

Los pasos que siguen los dejo para el próximo post dado que, como veremos, la inclusión de fuentes online desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger tiene sus vericuetos… Chau.