Otra forma de mostrar el post-footer

El post-footer es el bloque que contiene los datos que vemos a continuación de el post, contiene el número de comentarios, etiquetas, autor, el sobrecito de envío de entradas por correo, evaluación de estrellas, reacciones, hora, ubicación.

Si somos de los que prescindimos de la mayoría de esos complementos hay una forma de personalizar el post-footer bastante original, la añadí hace poco a esta plantilla

Para realizar ese cambio debemos tener claro lo que vamos a hacer y que estos ejemplos son para una plantilla Minima sin modificar es decir con un ancho de 660px aunque de ser más ancha no sería problema, es necesario eliminar todo el contenido de la plantilla que se encuentra en:

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Una vez eliminamos ese contenido lo único que se mostrará en el post-footer es el nombre de autor, las etiquetas y el número de comentarios.

Lo primero que haremos será descargar una copia de la plantilla y a ser posible probar antes en otro blog. Marcamos para expandir la plantilla y buscamos:

<!-- clear for photos floats -->

unas líneas más abajo veremos:
<div class='post-footer'>

Eliminaremos todo lo que se encuentra incluido dentro de
<div class='post-footer'> y </b:includable>

<div class='post-footer'>
código...
código...
código...
código...
</b:includable>

y en su lugar añadimos el contenido de este archivo.
Luego localizamos los antiguos estilos para el post-footer, según plantilla sería algo así:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

los eliminamos y en su lugar añadimos:
Ver código de estilos [+/-]

.post-footer {
margin: 50px 10px 0 10px;
font-size: 14px;
solid #990000;
border-top: 1px solid #990000;
border-bottom: 1px solid #990000;
height:70px;
}
.post-footer li {
float: left;
width: 120px;
padding: 10px 0 7px 10px;
list-style-type:none;
}
.post-footer li .post-labels {
border-left: 1px solid #990000;
border-right: 1px solid #990000;
padding-left:5px;
height:60px;
padding-top:10px;
}
.post-footer li span {
display: block;
}
.post-footer li .head {
font-size: 14px;
text-transform: none;
font-family:Times New Roman,sans-serif;
font-style:Arial;
font-variant:normal;
solid #990000;
}
.post-footer li a:link, .post-footer li a:visited {
font-size: 14px;
color: #990000;
text-decoration: none;
font-style:Arial;
}
.post-footer li a:hover {
color:#000000;
}
.post-labels {
margin-top:-10px;
}

Miramos en vista previa, si el número de etiquetas que normalmente usamos supera ese espacio lo solucionamos modificando en los estilos de la siguiente forma:

En los estilos de .post-footer aumentamos el valor height de esa forma le damos más altura.
Para las líneas de separación tengan la misma altura del contenido aumentamos en .post-footer li .post-labels también el valor height.

El color de las líneas aparece como #990000 igual que en los enlaces que también podemos cambiarlo en color;#990000.
Para el efecto hover del enlace está definido con color:#000000