♡ 41☆ BPT. Cambiar el formato del título del post.

41 Compartir en Facebook Compartir en Twitter Enviar entrada por correo Imprimir artículo

Seguimos destripando un poco el significado de todo ese texto "extraño" :-) que aparece en nuestra plantilla.

Si lo que queremos es modificar el formato de los títulos de nuestras entradas, tenemos que prestar atención al trozo de código CSS en el que se especifica la clase H3. Cada plantilla tendrá una descripción (propiedades) distinta, por lo que comentaremos lo más general, para que seais capaces vosotros mismos de cambiar aquello que deseeis.


Dentro del código, aparecerá declarada la clase y, entre corchetes, las distintas propiedades:

.post h3 {
margin:0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
font-size:150%;
text-align:center;
color:#555555;
background:url("http://flickr.com/1075/129.gif") no-repeat right top;
}

Las propiedades que se pueden poner son todas las que permite CSS. Por citar las más comunes, podremos encontrar fácilmente las que regulan el COLOR, tamaño del texto (FONT-SIZE), su alineación (TEXT-ALIGN), algunos efectos decorativos (TEXT-DECORATION), los márgenes (PADDING, MARGIN), los bordes (BORDER), el fondo (BACKGROUND)... Para ver una lista más completa de propiedades así como sus atributos y la forma de redactarlas para que no haya errores de sintaxis, echad un vistazo a este enlace de HTMLHELP.

Una vez que se tiene claro donde hay que meter mano y las herramientas para modificar lo que deseamos, hay que saber también lo que significan las distintas sub-clases h3 que normalmente nos encontramos:

• post h3 - Aspecto del título del post
• post h3 a - Aspecto del enlace del título
• post h3 a:visited - Aspecto del enlace del título, después de haberse visitado
• post h3 a:hover - Aspecto del enlace del título cuando se pasa el cursor por encima (sin pulsar).

En la primera pondremos las propiedades comunes al título y en las otras clases, definiremos los distintos aspectos que tendrá el título en su función de enlace.

Así, para un título grande, centrado, de color rojo sobre fondo negro y separado de los extremos derecho e izquierdo del contenedor definido para el post, las propiedades tendrían que ser...

.post h3 {
font-size:150%;
text-align:center;
color:#990000;
background:#000000;
margin:0px 20px 0px 20px;
}

Para que además, los títulos estén subrayados indicando que sirven de enlace (el título en Blogger siempre es un enlace a la dirección permanente de la entrada), para que al pasar el cursor por encima, el texto pase a negrita, deje de estar subrayado y cambie a color azul y, para que una vez visitados, salga en tono gris, habría que añadir las siguientes subclases:

.post h3 a{
text-decoration:underline;
}
.post h3 a:hover {
font-weight:bold;
text-decoration:none;
color:#0000FF;
}

.post h3 a:visited {
color:#999999;
}

¿Vemos otro post al azar por si le encuentras utilidad?