Formatear rótulos de la barra lateral | Oloblogger Por defecto, muchas plantillas de Blogger llevan configurados los títulos de las distintas secciones...

2 de agosto de 2007

Formatear rótulos de la barra lateral

Por defecto, muchas plantillas de Blogger llevan configurados los títulos de las distintas secciones de la sidebar de una manera muy simple: mayúsculas y un pequeño espaciado entre caracteres.

Para poder hacerlo al gusto, lo más cómodo es formatear el tipo de encabezamiento general.

Para ver con que nombre se han definido, pinchando en Expandir Plantillas de Artilugios, la instrucción clave para encontrarlos fácilmente en el código, es "data:title" y, en un principio, todos los artilugios lo llevan con este aspecto:

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- soo mostrar titulo si no esta vacio -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>


Como veis, en la plantilla Black Mínima, viene como Clase H2. Una vez descubierto, buscamos en la primera mital del código, la definición del aspecto de H2.

/* Headings
----------------------------------------------- */
h2 {
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}


font: tipo de fuente
line-height: altura de cada línea de escritura
text-transform: para pasar todas las letras a mayúsculas
letter-spacing: espacio entre caracteres
color: color de la fuente

Sólo nos queda cambiar los valores o añadir aquellos que queramos para que los títulos tengan el aspecto que queramos.

Se puede cambiar el color, la fuente, el tamaño, añadir un color de fondo, una imagen, etc.


Para ampliar información, aquí podeis encontrar un resumen de las funciones para formatear texto y de sus distintos atributos.

En la imagen de ejemplo, simplemente se ha añadido la línea

background:#940f04;

...a la clase H2 para conseguir un efecto fácil y vistoso de fondo rojo.

Ojo: Puede ser que la clase de los títulos de la barra, sea también utilizada para otro tipo de títulos (por ejemplo la fecha del post). Si no quereis aplicar el nuevo formato a todos ellos, poner en la clase correspondiente (H2 en el ejemplo) aquel formato que vais a usar en más sitios y luego en el sitio correspondiente formatear de manera individual.

<h2 class='title'><data:title/></h2>


Esto sería donde se indica que el título vaya con el formato H2. Se tendrían que quitar las etiquetas H2 y sustituir por el formateo individualizado. Con un poco más de trabajo, también se puede crear un nuevo formato (Hx) y aplicarlo en ese apartado.

Suerte y no olvideis utilizar Vista Previa para ver el resultado antes de actulizar la plantilla y, sobre todo, hacer una copia de seguridad antes de empezar a hacer experimentos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

2 comentarios :

  1. Tenía este post guardado esperando a tener un poco de tiempo para trastear la sidebar. Ya lo he usado y me ha quedado muy bien. Y por supuesto, con el índice que me recomendaste.

    Como siempre, gracias.

    ResponderEliminar
  2. No hay de qué... Maestro. Una vez más, a la Sara y al Charlie los has clavao :)

    Sobre el índice, el de categorías ya vi que es automático, pero creo que el de personajes lo has hecho "a mano". Piensa en el futuro, porque me parece que si sigues con el ritmo de creación actual, te vas a hinchar a redactar enlaces.

    ResponderEliminar