Personalizar el blockquote

Ya hemos visto anteriormente cómo personalizar los saltos de línea en las entradas. Siguiendo el mismo camino de personar las plantillas, hoy veremos cómo personalizar el blockquote, que son las citas textuales en las publicaciones. En estas citas podemos agregar palabras importantes para resaltar, algún fragmento que es copiado de una web o para mencionar algo que escribimos con anteriorad.

Así se ven las citas textuales:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus arcu in odio ullamcorper ullamcorper. Maecenas eu nulla et augue pellentesque ullamcorper. Duis vehicula libero lacus, non fermentum est pharetra id. Nunc ante diam, mattis et euismod vitae, interdum vel mi. Donec et metus convallis, rutrum dolor vitae, consequat turpis. Proin ornare, nisi in convallis pretium, magna arcu gravida ligula, ut gravida nisi leo eu nunc.

Para crearlas simplemente tendremos que hacer click en las de las opciones del editor de texto o agregar el texto entre <blockquote> y </blockquote>.

Para personalizarlas, tenemos que ir a Plantilla, Personalizar, Avanzado y Añadir CSS. En la casilla de texto de arriba de todo tendremos que pegar este código:

blockquote {
font-style: italic;
font-family: Georgia;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
margin: 20px 35px 0 35px;
padding: 10px 20px 0;
background:#fafafa;
}

Haciendo uso de estos estilos, el bloque entrecomillado se verá así:

Si queremos colores vivos y un diseño más atractivo, podemos usar este código:

blockquote {
font-family: Arial;
font-style: italic;
border-radius:8px;
webkit-border-radius:8px;
margin: 20px 35px 0 35px;
padding: 10px 20px 0;
background:#0174DF;
color:#fff;
box-shadow: 2px 2px 2px #2E2E2E;
}

El resultado es este:

Es cuestión de ir probando pequeñas modificaciones, empezando por el tipo de letra y su estilo, el borde del blockquote o el fondo, hasta que quede a gusto de cada uno.