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;
}
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>
<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>
<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.
Y muchos más artículos interesantes si nos sigues en...
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
ResponderEliminarMuchas gracias.
Un saludo.
Buen blog... pero aveces quedo perdido con algunos temas jaja, yo quiero letra capital en mi blog pero pues no entendí nada! jajaja
ResponderEliminarCarlos 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
ResponderEliminarEurelio, 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.
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.
ResponderEliminarGracias por tu respuesta.
Un saludo
Carlos Benjamín si tienes la librería prototype.js la solución es meter un parcher. Aquí tienes como hacerlo.
ResponderEliminarEn los comentarios no había probado nunca está genial se le podría sacar punta al dato :)
ResponderEliminarGem@En Singenio Blog tienes el ejempo, pero como no me lees allí :p
ResponderEliminarGracias por dejarte caer ;)
Gracias Oloman por tu ayuda, ya conseguí insertar el gadget de seguidores.
ResponderEliminarUn saludo !
Recibido Carlos Benjamín. Saludos.
ResponderEliminar¡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/
ResponderEliminarGracias
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.
ResponderEliminarSi 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
Tengo una pregunta, y este es el tema que mas se acerca a mi duda.
ResponderEliminarTengo 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.
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.
EliminarComo 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.
Gracias, ya diré como va la el código.
EliminarUn beso y muchas gracias de nuevo.
Hola OLOMAN,el código esta genial, muchísimas gracias
Eliminar