viernes, 24 de junio de 2016

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>


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:

No hay comentarios. :

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...