Títulos en la sidebar

Hace unos dias, Sidhe and Darky Dragonseeker preguntaba la forma de colocar los títulos tal como se ven en la sidebar, utilizando dos colores o dos tipos distintos de fuentes. Es una técnica bastante simple. Basta agregarle una etiqueta extra al encabezado.

Gem@ se suma a la pregunta y, curiosamente, da la respuesta cuando en su último artículo, habla de la etiqueta span y los estilos porque, en realidad, de eso se trata.

En HTML, hay dos etiquetas que podrían llamarse de usos multiples, que no hacen nada por si solas pero que sirven para "contener cosas", especialmente estilos CSS. La que siempre vemos es DIV pero hay otra similar llamada SPAN. La diferencia entre una y otra es que DIV es un bloque (crea un salto de línea) y SPAN no, es lo que se llama una etiqueta inline así que si uno escribe:

un texto con una <span>etiqueta span</span> no veremos nada particular

Entonces ¿para que sirve? Por ejemplo, para cambiar el estilo de cierto texto:

un texto con una <span style="color:red;">etiqueta span</span> que se verá diferente

Usamos SPAN para cambiar las propiedades de una parte sin cambiar las del resto.

Lo mismo ocurrirá con los encabezados de la sidebar aunque allí, lo que deberíamos hacer primero es quitarle el código que pone Blogger.

Cuando agregamos un elemento siempre nos da la posibilidad de agregarle un título. Aunque no nos interese mostrarlo, es útil ponerlo porque de esa manera, identificamos los distintos elementos cuando los queremos editar. Si no queremos que se vean, lo que debemos hacer es ir a la plantilla y editarla expandiendo los artilugios. Por defecto, suele verse esto:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>

Lo único que hace eso es mostrar el título del elemento si es que existe. La clase class='title' suele no estar definida jamás y <data:title/> es el texto del título que le colocamos al elemento. Si no queremos mostrarlo, basta eliminar ese código y listo.

Si lo vamos a mostrar, podemos cambiarlo utilizando el criterio anterior, por ejemplo, cambiamos todo y lo reemplazamos por una línea más simple:

<h2>este es <span>mi título</span></h2>

Ahora, lo que faltaría es agregar o modificar las definiciones CSS genéricas que suelen encontrarse en alguna parte entre <b:skin> y </b:skin>:

.sidebar h2 {
.......
}

Necesitamos dos definiciones:

.sidebar h2 {
... serán las propiedades generales del título ...
}
.sidebar h2 span {
... serán las propiedades de esa parte modificada ...
}

¿Qué propiedades podemos usar? Las que que quieran, imágenes de fondo, colores, tipos de fuente, etc. Por ejemplo, podríamos usara algo así:

.sidebar h2 {
color: DarkSalmon;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: Tomato;
}

este es mi título

Hay propiedades que no solemos usar frecuentemente, una de ellas es letter-spacing que establece la distancia extra entre las letras de un texto.

Como esta propiedad acepta valores negativos, con ciertas tipografías se logran efectos interesantes colocando valores de -1 o -2 pixeles para "acercar" las letras entre si. Claro que nada impide hacer cosas más extrañas como colocar valores muy altos, tan altos que el texto se ve invertido:

letras
letras

Más ejemplos:

.sidebar h2 {
-moz-border-radius: 5px;
background-color: DarkRed;
color: yellow;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 40px;
line-height: 40px;
text-align:center;
width: 300px;
}
.sidebar h2 span {
color: YellowGreen;
font-family: Arial;
font-size: 40px;
}

este es otro título

.sidebar h2 {
-moz-border-radius: 5px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 45px;
line-height: 41px;
text-align: center;
width: 300px;
}
.sidebar h2 span {
-moz-border-radius: 5px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 5px;
}

y este es otro título

Otra propiedad poco común que podemos usar es line-height. Con ella es posible controlar la posición de las letras con respecto a un fondo:

.sidebar h2 {
background-color: #345;
color: #999;
font-family: 'Times New Roman';
font-size: 24px;
height: 30px;
line-height: 5px;
text-align: center;
width: 370px;
}
.sidebar h2 span {
color: #CCC;
font-size: 56px;
}

otro título más