Ir al contenido principal

Ajustes finos en la plantilla Blogger (I)

Para quien eligió para su blog la opción de usar alguna de las plantillas”oficiales” que ofrece la plataforma Blogger, ya vimos que el sistema permite configurar rápidamente no sólo el layout y colocación de gadgets, sino también controlar aspectos visuales vinculados a la tipografía, colores, imágenes de fondo, etc.
Este post estará dedicado a describir una manera de lograr ajustes finos sobre los diseños básicos que ofrece Blogger.
Al trabajar con las herramientas de configuración de diseño y plantilla que nos ofrece la plataforma Blogger, nos encontramos con una realidad: el abanico de opciones es limitado. Para dar sólo un ejemplo: si elegimos una fuente determinada en la sección Texto de la página, esa misma fuente será usada no sólo en el área de contenidos (los posts en sí mismos) sino también para el área de footer, para el texto en los gadgets, etc.
Pero es posible ir más allá de estas limitaciones, trabajando sobre la reescritura de los estilos CSS que quedaron aplicadas a nuestra plantilla (la template XML) luego del proceso de configuración inicial. Para hablar más precisamente, lo que vamos a hacer es sobrescribir dichos estilos CSS, sin entrar directamente a la edición de la plantilla propiamente dicha.

Antes que nada, ¿será difícil de realizar?

Por lo pronto, si estás usando alguno de los navegadores más usuales (Firefox, Chrome, etc.) ya tendrás a tu disposición las herramientas para realizar el trabajo: son conocidas como herramientas del desarrollador web , o algún nombre similar… —probá haciendo CTRL+Mayús.+ I , y aparecerán ante tu vista—.
Con estas herramientas podremos seleccionar los elementos que componen la página web que estemos viendo, y analizar entre otras cosas qué estilos css tienen aplicados, su box model, etc…
En el párrafo precedente está tácitamente enmarcada la dificultad en el trabajo a realizar: es necesario un conocimiento básico de HTML y CSS para llevarlo a cabo.
Pero si tus competencias en el manejo de estos lenguajes son escasas o nulas, te tengo buenas noticias: afortunadamente existen hoy en día cursos muy bien realizados sobre estos temas, te sugiero especialmente visitar los siguientes sitios:
En lo que a esta entrada respecta, lo que sigue lo escribiré suponiendo que el lector posee competencias mínimas sobre las tecnologías mencionadas.

Ubiquémonos conceptualmente en el asunto

A diferencia de lo que ocurre con otros CMSs, en Blogger todas las páginas .html que se envían al lector se construyen básicamente a partir de un archivo principal —llamado template o plantilla—, que es un documento XML que combina estructuras de control y de datos propias de blogger, más etiquetas HTML clásicas, más datos de formateo con estilos CSS, más programación en javascript, más… SÍ: todo esto en un archivo.
Quizás para no espantar a los iniciados en el Diseñador de plantillas de Blogger existe una opción para agregar CSS personalizado, que permite escribir estilos nuevos para algunos elementos HTML particulares, o sobrescribir algunas definiciones de estilos que ya estén presentes en el documento. Aquí va una imagen:
Es importante entender que una vez conformes con los resultados obtenidos en las vistas previas, y habiendo guardado consecuentemente los cambios, los estilos que escribimos en esta ventana del editor pasarán a formar parte de la plantilla XML de nuestro blog; como consecuencia de esto, la próxima vez que accedamos a esta sección del Diseñador no veremos en la ventana estos cambios realizados: si quisiéramos borrarlos, no nos quedaría más remedio que buscarlos en la plantilla, y desde allí eliminarlos.
DATO DE INTERÉS: los estilos CSS que agreguemos desde la ventanita de edición van a ser los últimos que aparezcan en la plantilla, antes de la primer etiqueta </b:skin>
P.D. 2018: en las nuevas plantillas del 2017 los estilos CSS agregados vuelven a aparecer al reingresar en la opción... lo que hace todo el proceso más lógico e intuitivo.

En el post siguiente me dedicaré a dar ejemplos prácticos del uso de estas opciones avanzadas (a aplicar a este mismísimo blog)… antes de cerrar te dejo un enlace que habla con detalle de las cuestiones aquí tratadas. Chau.

Link de interés:

Comentarios

Entradas más populares de este blog

Notable Ep. One > Epilogue

La utilización de una plantilla oficial para el diseño de un blog en la plataforma Blogger siempre presentó una ventaja para quienes quieran personalizarlas sin tener grandes conocimientos de diseño web: esto se sigue manteniendo para los cuatro nuevos themes responsives presentados en 2017, incluyendo al theme Notable que estamos analizando. En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho theme para un rango de visualización intermedio (680 a 968px). NOTA: en este blog han sido tratados, en post escritos en junio de 2016   , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban layouts de tipo responsive como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un theme del 2017 específico, el theme Notable. Una breve recapitulación Estuvimos tratando en el post anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto pr

Ajustes finos en la plantilla Blogger (III)

Hacer ajustes de diseño en la plantilla Blogger es un proceso que implica una serie de pasos, de los cuales vimos los vinculados a la identificación de las etiquetas HTML a las que se les aplicarán los cambios de estilo CSS. Efectuar esos cambios desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger es relativamente sencillo (para quien cuenta con conocimientos en CSS), quizás con una única excepción: cuando queremos emplear una tipografía desde servicios de fuentes online…

Configuración del Blog: ¿público o privado? (II)

En la entrada anterior hablamos rápidamente sobre la clasificación de los usuarios de un blog en Blogger según su rol (administrador, autor y visitante/lector). También (y como el título de estas entradas lo sugiere) hay otra clasificación —esta vez de los blogs— según un aspecto funcional básico: públicos o privados. Nos centraremos a continuación en hablar sobre los blogs privados y, especialmente, en su utilidad dentro del ámbito educacional.