Las citas son a menudo 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 principales sitios de medios personalizan su estilo entre comillas para que se destaque. En este artículo, le mostraremos cómo personalizar el estilo de cotización en WordPress y le mostraremos 9 hermosos ejemplos de estilo de cotización personalizado.

WordPress le permite agregar citas dentro de 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 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 de blockquotes en su tema de WordPress, debemos editar el archivo style.css de su tema. Puede hacerlo yendo a Apariencia »Editor en su administrador de WordPress o edite archivos a través de FTP.

A continuación, debe usar uno de los estilos sugeridos a continuación y anular los estilos de comillas. Si no existen, simplemente agréguelos. También puede combinar los dos estilos y personalizarlos según sus deseos.

1. Cita de bloque CSS clásico

La gente suele usar CSS background-image para agregar comillas grandes entre comillas. En este ejemplo, usamos CSS para agregar comillas grandes.

Ejemplo de cita en bloque CSS clásica únicamente

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. Cita clásica con imagen

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

Cita en bloque clásica con imagen de 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. Cita sencilla

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

Ejemplo simple de cita de bloque CSS

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. Cita en bloque blanco azul y naranja

Los blocs de notas se pueden hacer extraordinarios y se pueden colorear de la manera que desee.

Ejemplo de cita en bloque con fondo azul y letra blanca


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 Google Web Fonts para Blockquotes en CSS

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

Importación de fuente web de Google en 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. Cotización de esquina redonda

En este ejemplo, tenemos dimensiones de bloque con esquinas redondeadas y usamos la sombra paralela para los bordes.

Cotización masiva con esquinas redondeadas


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. Usar el degradado como fondo para Blockquote

En este ejemplo de cita en bloque CSS, usamos el degradado CSS3 para mejorar el fondo de la cita en bloque. Los gradientes de CSS son complicados debido a la compatibilidad entre diferentes navegadores. Recomendamos usar colorlabs, un generador de degradados CSS.

Agregar el 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. Cotización masiva con patrón de fondo

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

Cita masiva de 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 múltiples imágenes en Blockquote Background

Puede usar múltiples imágenes de fondo de citas en bloque usando css. En este ejemplo usamos blockquote:before pseudo elemento 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 de las comillas en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.

Cómo personalizar el estilo Blockquotes en temas de WordPress

Ultima actualización en 18 de junio de 2013 por Redacción | Divulgación del lectorDivulgar: Nuestro contenido es respaldado por el lector. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Descubra cómo se financia WPBeginner, por qué es importante y cómo puede apoyarnos.

Comportamiento

Para compartir

Pío