Saltar al contenido

Cómo personalizar el estilo Blockquotes en temas de WordPress

Add Blockquote in 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 cual los periódicos y los principales sitios de medios de comunicación personalizan su estilo blockquote para que se destaque. En este artículo, le mostraremos cómo personalizar el estilo de blockquotes en WordPress junto con 9 hermosos ejemplos de estilos personalizados de blockquotes.

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

Agregar Blockquote en WordPress

Esto agregará un poco 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.

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. Wise Man

Para personalizar el estilo blockquotes en su tema de WordPress, necesitaríamos modificar 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á usar uno de los estilos sugeridos a continuación y anular sus estilos de comillas en bloque. Si no existe ninguno, simplemente agregue estos. También puede combinar los dos estilos y personalizarlos según sus deseos.

1. Classic CSS Blockquote

Por lo general, las personas usan CSS-imagen de fondo para agregar comillas grandes en blockquote. En este ejemplo, hemos usado CSS para agregar comillas grandes.

Ejemplo clásico de solo blockquote CSS

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. Classic Blockquote con imagen

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

Classic Blockquote con imagen para 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. Blockquote simple

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

Ejemplo simple de CSS blockquote

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. Blockquote blanco azul y naranja

Las citas en bloque se pueden destacar y pueden ser tan coloridas como quieras que sean.

Ejemplo de blockquote de fondo azul y fuente 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 fuentes web de Google para citas en bloque en CSS

En este ejemplo CSS de blockquote, hemos utilizado la fuente Droid Serif de la biblioteca de fuentes web de Google.

Importar 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. Cita redonda Blockquote

En este ejemplo, tenemos blockquote con esquinas redondeadas y hemos usado sombra paralela para los bordes.

Esquinas redondas blockquote


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 Blockquote

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

Agregar gradiente 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.

CSS blockquote 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. Uso de múltiples imágenes en el fondo de Blockquote

Puede usar varias imágenes en el fondo de blockquote usando css. En este ejemplo, hemos usado blockquote: before pseudo element 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 sido útil para aprender a personalizar el estilo de las comillas de bloque en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.

.