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

Las citas a menudo son la parte más memorable de su artículo. También son la parte más compartida de cualquier publicación o presentación. Esta es la razón por la que los periódicos y los sitios principales de medios personalizan su estilo blockquote para que se destaque. En este artículo, le mostraremos cómo personalizar el estilo de blockquotes en WordPress, además de mostrarle 9 hermosos ejemplos de estilo personalizado de blockquotes..

WordPress le permite agregar blockblotes dentro de sus publicaciones y páginas usando el área de la barra de herramientas en su sección de escritura.

Esto agregará un poco de HTML en tu publicación que podemos usar para personalizar el estilo. Nota: estamos utilizando el modo de texto en el editor de publicaciones de WordPress. A continuación se muestra un ejemplo del HTML que debería ver..

 
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgente tamen et nihil remittunt. Un vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; ¿Qué es lo que ocurre con la conveniencia y el mal uso de loqui? Huius ego nunc auctoritatem sequens idem faciam. Hombre sabio
 

Para personalizar el estilo blockquotes en su tema de WordPress, necesitaríamos modificar el archivo style.css de su tema. Usted puede hacer esto yendo a Apariencia »Editor en tu administrador de WordPress o edita los archivos vía FTP.

A continuación, deberá usar uno de los estilos sugeridos a continuación y anular los estilos de blockquote. Si no existe ninguno, entonces simplemente agregue estos. También es más que bienvenido a combinar los dos estilos y personalizarlos según el deseo de su corazón..

1. Clásico CSS Blockquote

Usualmente la gente usa CSS imagen de fondo Para agregar grandes comillas en blockquote. En este ejemplo hemos utilizado CSS para agregar comillas grandes.

 blockquote font-family: Georgia, serif; tamaño de fuente: 18px; estilo de letra: cursiva; ancho: 450px; margen: 0.25em 0; relleno: 0.25em 40px; línea de altura: 1.45; posición: relativa; color: # 383838; fondo: #ececec;  blockquote: antes de display: block; contenido: "\ 201C"; tamaño de fuente: 80px; posición: absoluta; izquierda: -10px; arriba: -10px; color: # 7a7a7a;  blockquote cite color: # 999999; tamaño de fuente: 14px; bloqueo de pantalla; margen superior: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

2. Blockquote clásico con imagen

En este ejemplo hemos utilizado una imagen de fondo para las comillas..

 blockquote font: 16px italic Georgia, serif; ancho: 450px; relleno-izquierda: 70px; acolchado superior: 18px; parte inferior de relleno: 18px; derecho de relleno: 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 izquierdo; repetición de fondo: no repetición; texto-sangría: 23px;  blockquote cite color: # a1a1a1; tamaño de fuente: 14px; bloqueo de pantalla; margen superior: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

3. Blockquote simple

En este ejemplo, hemos agregado color de fondo y un borde izquierdo discontinuo en lugar de blockquotes. Siéntete libre de jugar con los colores..

 blockquote font-family: Georgia, serif; tamaño de fuente: 16px; estilo de letra: cursiva; ancho: 500px; margen: 0.25em 0; relleno: 0.25em 40px; línea de altura: 1.45; posición: relativa; color: # 383838; borde izquierdo: 3px punteado # c1c1c1; fondo: #eee;  blockquote cite color: # 999999; tamaño de fuente: 14px; bloqueo de pantalla; margen superior: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

4. Blockquote blanco azul y naranja

Se pueden hacer blockquotes para sobresalir y pueden ser tan coloridos como quieras..

 blockquote font-family: Georgia, serif; tamaño de fuente: 16px; estilo de letra: cursiva; ancho: 450px; margen: 0.25em 0; relleno: 0.25em 40px; línea de altura: 1.45; posición: relativa; color: #FFF; borde izquierdo: 5px sólido # FF7F00; fondo: # 4b8baf;  blockquote cite color: #efefef; tamaño de fuente: 14px; bloqueo de pantalla; margen superior: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

5. Usando las fuentes web de Google para Blockquotes en CSS

En este ejemplo de CSS de blockquote, hemos utilizado 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 tipográfica: 'Droid Serif', serif; tamaño de fuente: 16px; estilo de letra: cursiva; ancho: 450px; color de fondo: # fbf6f0; borde izquierdo: 3px punteado # d5bc8c; borde derecho: 3px punteado # d5bc8c; text-align: center;  blockquote cite color: # a1a1a1; tamaño de fuente: 14px; bloqueo de pantalla; margen superior: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

6. Round Corner Blockquote

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

 blockquote ancho: 450px; color de fondo: # f9f9f9; borde: 1px sólido #ccc; radio del borde: 6px; cuadro de sombra: 1px 1px 1px #ccc; estilo de letra: cursiva;  blockquote cite: before content: "\ 2014 \ 2009";  

7. Uso del gradiente como fondo para Blockquote

En este ejemplo de CSS blockquote, hemos utilizado el gradiente CSS3 para mejorar el fondo de blockquote. Los gradientes de CSS son complicados, debido a la compatibilidad entre navegadores. Recomendamos usar colorlabs, generador de gradiente CSS..

 blockquote ancho: 450px; color: #FFF; fondo: # 7d7e7d; / * Navegadores antiguos * / fondo: -moz-linear-gradient (top, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, # 7d7e7d), color-stop (100%, # 0e0e0e)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (superior, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / background: gradiente lineal (hacia abajo, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px solid #ccc; radio del borde: 6px; cuadro de sombra: 1px 1px 1px #ccc; estilo de letra: cursiva;  blockquote cite: before content: "\ 2014 \ 2009";  

8. Blockquote con patrón de fondo

En este ejemplo hemos utilizado una imagen de fondo como patrón para blockquote.

 blockquote ancho: 450px; background-image: url ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); borde: 1px sólido #ccc; cuadro de sombra: 1px 1px 1px #ccc; estilo de letra: cursiva;  blockquote cite: before content: "\ 2014 \ 2009";  

9. Usando múltiples imágenes en el fondo de Blockquote

Puedes usar múltiples imágenes en el fondo de blockquote usando css. En este ejemplo hemos utilizado blockquote: antes pseudo elemento para agregar otra imagen de fondo a blockquote.

 blockquote ancho: 450px; background-image: url ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); borde: 1px sólido #ccc; cuadro de sombra: 1px 1px 1px #ccc; estilo de letra: 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');  blockquote cite: before content: "\ 2014 \ 2009";  

Esperamos que este artículo le haya resultado útil para aprender a personalizar el estilo de blockquotes en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación..