Cómo personalizar el estilo de Blockquotes en temas de WordPress

Las citas suelen ser la parte más memorable de su artículo. También son la parte más compartida de cualquier publicación o presentación. Es por eso que los periódicos y los principales sitios de medios personalizan su estilo de cita en bloque para que se destaque. En este artículo, le mostraremos cómo personalizar el estilo de blockquotes en WordPress y le mostraremos 9 hermosos ejemplos de estilo personalizado de blockquotes. WordPress le permite agregar blockquotes a sus publicaciones y páginas usando el área de la barra de herramientas en su sección de escritura.

Esto agregará algo de HTML en su publicación que podemos usar para personalizar el estilo. Nota: Estamos usando el modo de texto en el editor de publicaciones de WordPress. A continuación se muestra un ejemplo del código HTML que debería ver.

Ella no podía igualar. Lamento decir la tabla de Cleanthes, que tiene algunas palabras muy usadas para pintar. Urgente, sin embargo, y nada es para devolverlos. Pero si a sus ojos está mal, ¿a quién se le ha atribuido las virtudes de un alma tan notable? Los suyos son griegos; ¿Por qué, entonces, «cuando algo le conviene, no preferimos hablar inglés de la forma habitual?» Y lo tengo ahora, siguiendo la autoridad de la misma voluntad.
Hombre sabio

Para personalizar el estilo blockquotes en su tema de WordPress, necesitaríamos modificar el archivo style.css de su tema. Puedes hacer esto yendo a Apariencia »Editor en su administrador de WordPress o edite archivos a través de FTP. Luego, deberá usar uno de los estilos sugeridos a continuación y anular los estilos de citas en bloque. Si no hay ninguno, simplemente agréguelos. También eres más que bienvenido a combinar los dos estilos y personalizarlos a tu gusto.

1. Clásico CSS Blockquote

Por lo general, la gente usa la imagen de fondo CSS para agregar comillas grandes en el blockquote. En este ejemplo, usamos CSS para agregar comillas grandes.

blockquote {familia de fuentes: Georgia, serif; tamaño de fuente: 18px; estilo de fuente: cursiva; ancho: 450px; margen: 0.25em 0; relleno: 0.25em 40px; altura de la fila: 1,45; posición: relativa; color: # 383838; fondo: #ececec; } blockquote: before {display: block; contenido: » 201C»; tamaño de fuente: 80px; posición: absoluta; izquierda: -10px; alto: -10px; color: # 7a7a7a; } cita en bloque {color: # 999999; tamaño de fuente: 14px; bloque de visualización; margen superior: 5px; } citas en bloque: antes de {contenido: » 2014 2009″; }

2. Cita en bloque clásica con imagen

En este ejemplo, usamos una imagen de fondo para las citas.

blockquote {fuente: 16px cursiva Georgia, serif; ancho: 450px; padding-left: 70px; relleno superior: 18px; acolchado en la parte inferior: 18px; padding-right: 10px; color de fondo: #dadada; borde superior: 1px sólido #ccc; borde inferior: 3px sólido #ccc; margen: 5px; imagen de fondo: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); posición de fondo: medio a la izquierda; repetición de fondo: sin repetición; sangría del texto: 23px; } cita en bloque {color: # a1a1a1; tamaño de fuente: 14px; bloque de visualización; margen superior: 5px; } citas en bloque: antes de {contenido: » 2014 2009″; }

3. Cita en bloque simple

En este ejemplo, hemos agregado un color de fondo y un borde izquierdo discontinuo en lugar de comillas. No dudes en jugar con los colores.

blockquote {familia de fuentes: Georgia, serif; tamaño de fuente: 16px; estilo de fuente: cursiva; ancho: 500px; margen: 0.25em 0; relleno: 0.25em 40px; altura de la fila: 1,45; posición: relativa; color: # 383838; borde izquierdo: 3px con puntos # c1c1c1; fondo: #eee; } cita en bloque {color: # 999999; tamaño de fuente: 14px; bloque de visualización; margen superior: 5px; } citas en bloque: antes de {contenido: » 2014 2009″; }

4. Blockquote blanco azul y naranja

Las citas en bloque se pueden exhibir y pueden ser tan coloridas como desee.

blockquote {familia de fuentes: Georgia, serif; tamaño de fuente: 16px; estilo de fuente: cursiva; ancho: 450px; margen: 0.25em 0; relleno: 0.25em 40px; altura de la fila: 1,45; posición: relativa; color: #FFF; borde izquierdo: 5px sólido # FF7F00; fondo: # 4b8baf; } cita en bloque {color: #efefef; tamaño de fuente: 14px; bloque de visualización; margen superior: 5px; } citas en bloque: antes de {contenido: » 2014 2009″; }

5. Uso de fuentes web de Google para citas en bloque en CSS

En este ejemplo de cita en bloque de CSS, usamos la fuente Droid Serif de la biblioteca de fuentes web de Google.

blockquote {@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); familia de fuentes: ‘Droid Serif’, serif; tamaño de fuente: 16px; estilo de fuente: cursiva; ancho: 450px; color de fondo: # fbf6f0; borde izquierdo: 3px con puntos # d5bc8c; borde derecho: 3px con puntos # d5bc8c; alineación de texto: centro; } cita en bloque {color: # a1a1a1; tamaño de fuente: 14px; bloque de visualización; margen superior: 5px; } citas en bloque: antes de {contenido: » 2014 2009″; }

6. Cita en bloque de esquinas redondeadas

En este ejemplo, tenemos blockquote con esquinas redondeadas y usamos una sombra para los bordes.

blockquote {ancho: 450px; color de fondo: # f9f9f9; borde: 1px sólido #ccc; radio del borde: 6px; sombra de cuadro: 1px 1px 1px #ccc; estilo de fuente: cursiva; } citas en bloque: antes de {contenido: » 2014 2009″; }

7. Usando el degradado como fondo para Blockquote

En este ejemplo de cita en bloque de CSS, usamos el degradado CSS3 para mejorar el fondo de la cita en bloque. Los degradados de CSS son complicados debido a la compatibilidad entre navegadores. Le recomendamos que utilice colorlabs, un generador de degradado CSS.

blockquote {ancho: 450px; color: #FFF; fondo: # 7d7e7d; / * Navegadores antiguos * / background: -moz-linear-gradient (arriba, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / background: -webkit-gradient (lineal, arriba a la izquierda, abajo a la izquierda, color-stop (0%, # 7d7e7d), color-stop (100%, # 0e0e0e)); / * Chrome, Safari4 + * / fondo: -webkit-linear-gradient (arriba, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / fondo: -o-linear-gradient (arriba, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / fondo: -ms-linear-gradient (arriba, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / fondo: degradado lineal (hacia abajo, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = «# 7d7e7d», endColorstr = «# 0e0e0e», GradientType = 0); / * IE6-9 * / border: 1px sólido #ccc; radio del borde: 6px; sombra de la caja: 1px 1px 1px #ccc; estilo de fuente: cursiva; } citas en bloque: antes de {contenido: » 2014 2009″; }

8. Blockquote con patrón de fondo

En este ejemplo, usamos una imagen de fondo como patrón para la cita en bloque.

blockquote {ancho: 450px; imagen de fondo: url (‘http://example.com/wp-content/themes/your-theme/images/lined_paper.png’); borde: 1px sólido #ccc; sombra de cuadro: 1px 1px 1px #ccc; estilo de fuente: cursiva; } citas en bloque: antes de {contenido: » 2014 2009″; }

9. Uso de varias imágenes de fondo de Blockquote

Puede usar múltiples imágenes de fondo de blockquote usando css. En este ejemplo, usamos blockquote: before pseudo element para agregar otra imagen de fondo a blockquote.

blockquote {ancho: 450px; imagen de fondo: url (‘http://example.com/wp-content/themes/your-theme/images/lined_paper.png’); borde: 1px sólido #ccc; sombra de cuadro: 1px 1px 1px #ccc; estilo de fuente: cursiva; } blockquote: antes de {posición: absoluta; margen superior: -20px; margen izquierdo: -20px; contenido: url (‘http://example.com/wp-content/themes/your-theme/images/pin.png’); } citas en bloque: antes de {contenido: » 2014 2009″; } Esperamos que este artículo le haya resultado útil para aprender a personalizar el estilo de las citas en bloque en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.