La etiqueta < blockquote > es una etiqueta que con frecuencia utilizamos, o en caso contrario rara vez lo hacemos. Esta etiqueta básicamente nos permite en un párrafo largo resaltar una fracción de texto, por ejemplo cuando citamos textos de otras Web, de una fuente en particular, etc. Si utilizas un theme prediseñado, esta etiqueta tendrá seguramente un estilo diseñado por el autor. Puede que este estilo te convenza como no. Pero lo genial es que mediante css todo puede personalizarse en minutos, basta tener un poquito de ganas para dedicarle un poco de tiempo al diseño de nuestro blog.
Desde css-tricks nos muestran algunas alternativas para cambiar completamente el estilo de nuestras citas (blockquote). No todos los estilos son bonitos, pero como digo siempre, serán una buena base para crear los propios.
Algo a tener en cuenta es que en la técnica se agrega el elemento < span > junto con el elemento < blockquote >, lo verán en el ejemplo.
Para implementar los diseños del nuevo estilo a nuestro blog, simplemente deberemos buscar la etiqueta blockquote en nuestra hoja de estilo (style.css), y sustituirla por el código que posee el estilo que nos a gustado.
Podrán ver aquí diferentes estilos, pero en mi caso particular me ha gustado mucho este.
CSS:
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
