Letra capital en párrafos, posts o comentarios | Oloblogger Lo de la letra capital es una cosa que ya vimos, pero se conoce que por antiguo, no lo encontráis fácilmente y algunos seguís preguntado por...

27 de noviembre de 2010

Letra capital en párrafos, posts o comentarios

Lo de la letra capital es una cosa que ya vimos, pero se conoce que por antiguo, no lo encontráis fácilmente y algunos seguís preguntado por la manera en que se consigue este efecto. Aprovechando el recordatorio, veremos cómo aplicar esto de manera automática, también en entradas o en comentarios.

Esta denominación -capital- corresponde a las letras iniciales de textos con un tamaño mucho mayor que el resto. Como esta E:

Etiam in elit eget lorem fringilla tempus. Maecenas lectus massa, malesuada ut molestie a, varius a libero. Aenean a augue arcu. Praesent nec lacus justo, id faucibus nisl. Donec tempus eleifend diam quis dapibus. Nam id tellus vitae eros sodales tincidunt. Mauris erat metus, facilisis a vestibulum nec, placerat at nunc. Cras viverra hendrerit augue, in vehicula dui ullamcorper sed.

Todo se consigue con CSS, ya que sólo se trata de aplicar determinadas propiedades a esa primera letra, distintas de las genéricas. Además, para hacernos la vida más fácil a nosotros y al intérprete del navegador, tenemos una pseudo clase que localiza cual es la primera letra :first-letter.

Poniendo todo esto junto, comenzamos añadiendo en nuestra parte CSS (antes de ]]></b:skin>) el siguiente código:

.capital:first-letter {
float:left;
display:block;
font-family:"times new roman";
font-size:3em;
color:#990000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Algunas cosas como la tipografía (font-family), el tamaño (font-size) o el color de esa primera letra, se pueden cambiar sin ningún problema para adaptar el estilo al de vuestro blog.

A continuación, para que cualquier párrafo en una entrada lleve este efecto, sólo tendremos que incluirle la clase capital. Cualquiera de estas tres maneras serviría:

<p class="capital">Texto</p>

<div class="capital">Texto</div>

<span class="capital">Texto</span>



Una vez que tenemos el estilo instalado, nada impide que lo usemos en otros sitios de manera automática. Por ejemplo, si queremos que la primera letra de cada entrada sea de este tipo, tendremos que localizar la variable que soporta el contenido del artículo y añadirle la susodicha clase:

<p class="capital"><data:post.body</p>

<span class="capital"><data:post.body/></div>

Si nuestra plantilla incluye las etiquetas de párrafos para el data:post.body, usaremos la primera opción añadiendo lo que he marcado en verde. Si no las tiene, tendremos que añadir al menos un span, un p o un div y su correspondiente cierre, con esta misma clase, tal como se ve en la segunda línea del anterior ejemplo.


Por último, para los comentarios se hace de la misma manera, sólo que en este caso, la variable a localizar en la plantilla sería <data:comment.body/>

<p class="capital"><data:comment.body/></p>


En el enlace teneis un ejemplo de los dos últimos sistemas. Allí también podreis ver cómo se ha incorporado una imagen de fondo. Esa imagen iría como background-image en la parte CSS del principio de esta entrada.

¿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

15 comentarios :

  1. Excelente artículo, quería formularle una pregunta, quisiera insertar google friend connect en mi blog, pero siempre me sale un error y no se como cambiar los valores predeterminados de la plantilla. Mi email de contacto es info@eleconomist.com y mi URl: www.eleconomist.com

    Muchas gracias.
    Un saludo.

    ResponderEliminar
  2. Buen blog... pero aveces quedo perdido con algunos temas jaja, yo quiero letra capital en mi blog pero pues no entendí nada! jajaja

    ResponderEliminar
  3. Carlos Benjamín, como tienes Blogger, lo más directo es que añadas el gadget desde tu panel de Elementos de Página. Se llama Seguidores y aquí tienes una entrada que explica algo sobre él: Enlace

    Eurelio, lo más directo si no controlas mucho es que pongas el primer trozo de código que aquí se ofrece y el tercero, dónde se indica en cada caso.

    ResponderEliminar
  4. Gracias Oloman, pero eso ya lo intenté y aún así no aparece, incluso busqué en foros de internet y recomendaban cambiar de navegador (a firefox) para que se pudiera así visualizar. Pero cuando añado el gadget aparece el siguiente mensaje: Utilizar estilos predeterminados de plantilla, y no aparece, quito los valores predeterminados y sigue sin salir, incluso probé a incorporarlo con el código html desde google friend connect, y sigo sin conseguirlo.

    Gracias por tu respuesta.
    Un saludo

    ResponderEliminar
  5. Carlos Benjamín si tienes la librería prototype.js la solución es meter un parcher. Aquí tienes como hacerlo.

    ResponderEliminar
  6. En los comentarios no había probado nunca está genial se le podría sacar punta al dato :)

    ResponderEliminar
  7. Gem@En Singenio Blog tienes el ejempo, pero como no me lees allí :p

    Gracias por dejarte caer ;)

    ResponderEliminar
  8. Gracias Oloman por tu ayuda, ya conseguí insertar el gadget de seguidores.

    Un saludo !

    ResponderEliminar
  9. Recibido Carlos Benjamín. Saludos.

    ResponderEliminar
  10. ¡Hola! Olo. Le he hecho tantas intervenciones a mi plantilla, que ya no reconozco el html de la original. Tal vez por eso, no encuentro dónde ubicar los códigos pa ra la letra capital. Llevo 5 días intentándolo y estoy a punto de perder hasta la familia. Por favor, dame una manota. (si quieres acceder a mi plantilla, esta es mi url: http://dorianvillas.blogspot.com/
    Gracias

    ResponderEliminar
  11. Dorian Villa S., si lo vas a utilizar para casos puntuales, tendrás que instalar la clase .capital en la parte CSS y luego irla usando según necesites.

    Si lo quieres poner para los otros casos (post o comentarios), entonces tienes que localizar los DATA que se citan arriba. Aparecen si cuando accedes a Edición HTML, pinchas primero en la casilla Plantillas de artilugios expandidas

    ResponderEliminar
  12. Tengo una pregunta, y este es el tema que mas se acerca a mi duda.
    Tengo un blog, del que quiero cambiarle el color de las entradas, pero solo me cambia las nuevas, ya que hasta ahora he ido poniendo yo el color en cada entrada.
    ¿Tendría que cambiarlas una por una, de nuevo? o ¿Hay alguna formula mágica, de las tuyas?
    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Abigaill. Si has ido añadiendo el color a cada entrada, en la propia entrada, esa orden, instrucción o regla tiene preferencia sobre lo que parece que ahora has programado directamente en plantilla. Por tanto, la respuesta es que tendrás que cambiarlas una por una.

      Como truco podrías añadir un !important al selector que usaste para cambiar el color de forma genérica. Yo he visto estos tres:
      .post-body, .post-body h4, .post-body h4 span {
      color: white !important;
      }
      Si añades eso a tu CSS forzarás que el texto en las entradas, incluidos encabezados h4, pasen a color blanco.

      Eliminar
    2. Gracias, ya diré como va la el código.
      Un beso y muchas gracias de nuevo.

      Eliminar
    3. Hola OLOMAN,el código esta genial, muchísimas gracias

      Eliminar