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 utilizada de una publicación o presentación. Debido a esto, los periódicos y los sitios de los principales medios de comunicación están ajustando su estilo de citas en bloque para que se destaque. En este artículo, le mostraremos cómo personalizar el estilo de cotización en bloque en WordPress, y le mostraremos 9 hermosos ejemplos del estilo de cotización en bloque personalizado.

WordPress le permite agregar citas en bloque a sus publicaciones y páginas utilizando el área de la barra de herramientas en su área de escritura.

Agregar Blockquote en WordPress

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

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

Para personalizar el estilo Blockquotes en su tema de WordPress, tendríamos que cambiar el archivo style.css de su tema. Puede hacer esto yendo a Apariencia »Editor en su administrador de WordPress o edite los archivos a través de FTP.

A continuación, deberá utilizar uno de los estilos sugeridos a continuación y anular los estilos de Blockquote. Si no hay ninguno, simplemente agréguelos. También puede combinar los dos estilos y ajustarlos a su gusto.

1. Cuota de bloques CSS clásica

Normalmente la gente usa CSS background-image para agregar comillas grandes en blockquote. En este ejemplo usamos CSS para agregar comillas grandes.

Ejemplo de una tasa de bloques CSS clásica

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

2. Cuota de bloque clásico con imagen

En este ejemplo usamos una imagen de fondo para las comillas.

Cita en bloque clásico con imagen entre comillas

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

3. Probabilidades de bloque simple

En este ejemplo, agregamos color de fondo y un margen izquierdo discontinuo en lugar de comillas en bloque. Siéntete libre de jugar con los colores.

Ejemplo de cotización de bloque CSS simple

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

4. Cuota de bloque blanco, azul y naranja

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

Muestra de bloque de script de fondo azul y blanco

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

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

En este ejemplo de CSS de Blockquote, usamos la fuente Droid Serif de la biblioteca Google Webfonts.

Importación de fuentes web de Google a CSS para Blockquote

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

6. Probabilidades de bloque de esquina redonda

En este ejemplo, tenemos una cuota de bloque con esquinas redondeadas y sombras para los bordes.

Esquinas redondeadas bloquean probabilidades

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

7. Uso de degradado como fondo para la cuota de bloque

En este ejemplo de CSS Blockquote usamos el degradado CSS3 para mejorar el fondo de Blockquote. Los gradientes CSS son difíciles debido a la compatibilidad entre navegadores. Recomendamos usar Colorlabs, generador de degradado CSS.

Agregar un degradado CSS como fondo para Blockquote

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
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.

Cita de bloque CSS con patrón de imagen de fondo

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

9. Usar varias imágenes en el fondo de la cita en bloque

Puede usar varias imágenes en el fondo de la cita en bloque con CSS. En este ejemplo usamos blockquote:before Elemento ficticio para agregar otra imagen de fondo a blockquote.

Agregar múltiples imágenes de fondo en Blockquote usando CSS

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content: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 Blockquotes en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.