Cómo personalizar el estilo de los blocs de notas en los 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 transmisión 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 los blocs de notas en WordPress y le mostraremos 9 hermosos ejemplos de estilos de blocs de notas personalizados.

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

Esto agregará algo de HTML a 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 los blocs de notas en su tema de WordPress, necesitaríamos editar el archivo style.css de su tema. Puedes hacer esto subiendo Apariencia »Editor en su administrador de WordPress o edite archivos a través de FTP.

A continuación, debe utilizar uno de los estilos sugeridos a continuación y anular los estilos de citas en bloque. Si no existe ninguno, simplemente agréguelos. También eres más que bienvenido a combinar los dos estilos y personalizarlos según los deseos de tu corazón.

1. Clásico CSS Blockquote

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

Ejemplo de blockquote clásico solo con 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. Cita en bloque clásica con imagen

En este ejemplo usamos una imagen de fondo entre 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(https://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 en bloque simple

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

Ejemplo simple de blockquote 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

Las citas se pueden hacer para que destaquen y pueden ser tan coloridas como usted quiera.

Ejemplo de blockquote con 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 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 fuentes web de Google en CSS para Blockquote

blockquote {
@import url(https://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 en bloque de esquina redonda

En este ejemplo, hemos redondeado las dimensiones del bloque de esquinas y hemos utilizado sombras paralelas para los bordes.

Esquinas redondeadas de 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. 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. Recomendamos usar colorlabs, generador de degradado CSS.

Se agregó 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 usamos una imagen de fondo como patrón para blockquote.

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


blockquote {
width: 450px;
background-image:url('https://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 de fondo Blockquote

Puede usar múltiples imágenes de fondo blockquote 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('https://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('https://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 citas en bloque en WordPress. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario a continuación.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir