viernes, 23 de julio de 2010

Como poner la letra capital en las entradas

Una vez que realices los cambios te quedara la letra capital así de grande cada vez que publiques algo

 Como poner la letra capital al inicio de cada entrada

Lo único que hay que hacer es agregar el pseudo-elemento first-letter que hará que tome la primera letra del texto y le aplique los estilos que hayamos elegido.

Para realizarlo sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> lo siguiente:
.post-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

A partir de ahí ya aparecerá la letra capital en todas las entradas, pero también puedes agregar otros estilos a la letra, tales como el tipo de fuente, grosor, etc.
Estos son algunos otros atributos que puedes agregar:
font-weight: bold; /* letra en negrita */
font-family: Arial;
 /* tipo de letra */
font-style: italic; 
/* letra cursiva */

El procedimiento es muy sencillo y se puede aplicar a muchas áreas, por ejemplo:
Si quieres que los comentarios también tengan letra capital agrega esto:
.comment-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título de las entradas tenga letra capital agrega esto:
.post h3 a:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título del blog tenga letra capital agrega esto:
#header h1:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que los bloques entrecomillados tengan letra capital agrega esto:
.post-body blockquote:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Consideraciones finales:
  1. Funciona en todos los navegadores.
  2. Si hubiera una imagen antes del texto entonces no se mostrará la letra capital.
  3. Si la letra capital tuviera un signo antes o después de ella estas también se verán afectadas con los estilos.

0 comentarios:

Publicar un comentario