Las citas a menudo son la parte más memorable de su artículo. También son la parte más compartida de cualquier mensaje o presentación. Esta es la razón por la que los periódicos y los principales sitios de medios de comunicación en tiempo real personalizan su estilo de cita en bloque para que destaque. En este artículo, le mostraremos cómo personalizar el estilo de las comillas en WordPress junto con 9 hermosos ejemplos de estilo de las comillas en bloque personalizadas.
WordPress te permite añadir comillas en bloque dentro de tus mensajes y páginas usando el área de la barra de herramientas en tu sección de escritura.
Esto añadirá un poco de HTML en tu mensaje que podemos usar para personalizar el estilo. Nota: estamos usando el modo texto en el editor de posturas de WordPress. A continuación se muestra un ejemplo del HTML que debería ver.
12
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Envío urgente de dinero. 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 de las comillas de bloque en su tema de WordPress, necesitaríamos modificar el archivo style.css de su tema. Puede hacerlo yendo a Apariencia » Editor en su administrador de WordPress o editando los archivos vía FTP.
A continuación, deberá utilizar uno de los estilos que se sugieren a continuación y anular los estilos de las comillas en bloque. Si no existe ninguno, simplemente añádelo. Usted también es más que bienvenido a combinar los dos estilos y personalizar a su gusto.
1. Cita de bloque clásica de CSS
Usualmente la gente usa imágenes de fondo CSS para agregar comillas grandes entre comillas. En este ejemplo hemos utilizado CSS para añadir comillas grandes.
1234567891011121314141516161718192021222324252627282930313233cotización en bloque { font-family: Georgia, serif; tamaño de fuente: 18px; estilo de fuente: cursiva; ancho: 450px; margen: 0.25em0; relleno: 0.25em40px; altura de línea: 1.45; posición: relativa; color: #38383838; background:#ecececec;} blockquote:before { display: block; content: «201C»; tamaño de fuente: 80px; posición: absoluta; izquierda: -10px; arriba: -10px; color: #7a7a7a7a;} cita de bloque { color: #99999999; tamaño de fuente: 14px; display: block; margin-top: 5px;} blockquote cite:before { content: «2014 2009»;}
2. Cita en bloque clásica con imagen
En este ejemplo hemos utilizado una imagen de fondo para las comillas.
123456789101112131414151616171819202122232425262627 entre comillas { fuente: 16pxitalicGeorgia, gracias; ancho:450px; acolchado izquierdo: 70px; acolchado superior: 18px; acolchado inferior: 18px; acolchado a la derecha: 10px; color de fondo: #dadada; border-top: 1pxsolid#ccc; border-bottom: 3pxsolid#ccc; margen: 5px; imagen de fondo: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); posición de fondo: centro izquierda; repetición de fondo: no repetición; sangría de texto: 23px;} cita de bloque { color: #a1a1a1; tamaño de fuente: 14px; display: block; margin-top: 5px;} blockquote cite:before { content: «2014 2009»;}
3. Cita en bloque simple
En este ejemplo hemos añadido el color de fondo y punteado el borde izquierdo en lugar de las comillas. Siéntete libre de jugar con los colores.
1234567891011121314141516161718192021222324 entre comillas {font-family: Georgia, serif;tamaño de fuente: 16px;estilo de fuente: cursiva;ancho: 500px;margen: 0.25em0;relleno: 0.25em40px; altura de línea: 1.45; posición: color relativo: #38383838;border-left:3pxdashed#c1c1c1;background:#eee;} blockquote cite {color: #99999999;tamaño de fuente: 14px;display: block;margin-top: 5px;} blockquote cite:before {content: «2014 2009»;}
4. Blanco Azul y Naranja Blockquote
Las citas en bloque se pueden hacer para destacar y pueden ser tan coloridas como usted quiera que sean.
1234567891011121314141516161718192021222324 entre comillas {font-family: Georgia, serif;tamaño de fuente: 16px;estilo de fuente: cursiva;ancho: 450px;margen: 0.25em0;relleno: 0.25em40px; altura de línea: 1.45; posición: color relativo: #FFF;border-left:5pxsolid#FF7F00;background:#4b8baf;} blockquote cite {color: #efefefef;font-size: 14px;display: block;margin-top: 5px;} blockquote cite:before {content: «2014 2009»;}
5. Uso de fuentes web de Google para las comillas de bloque en CSS
En este ejemplo de CSS de cita en bloque hemos utilizado la fuente Droid Serif de la biblioteca de fuentes web de Google.
123456789101111121314141516171818192021cotización en bloque {@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:3pxdashed#d5bc8c;border-right:3pxdashed#d5bc8c;text-align:center;} blockquote cite {color: #a1a1a1a1;font-size: 14px;display: block;margin-top: 5px;} blockquote cite:before {content: «2014 2009»;}
6. Cotización en bloque de la esquina redonda
En este ejemplo tenemos una cita en bloque con esquinas redondeadas y hemos usado sombra para los bordes.
1234567891011cotización en bloque {ancho: 450px;color de fondo: #f9f9f9f9;frontera: 1pxsolid#ccc;border-radius: 6px;box-shadow: 1px1px1px1px#ccc;font-style: italic;}blockquote cite:before {content: «2014 2009»;}
7. Uso de Gradiente como fondo para Blockquotear
En este ejemplo de comillas de bloque CSS, hemos utilizado el degradado CSS3 para mejorar el fondo de la comillas de bloque. Los degradados CSS son complicados, debido a la compatibilidad entre navegadores. Recomendamos utilizar colorlabs, generador de degradados CSS.
123456789101112131414151617171819 entre comillas {ancho: 450px;color:#FFF;fondo: #7d7e7d; /* Navegadores antiguos */background: -moz-linear-gradient(top, #7d7e7d0%, #0e0e0e0e100%); /* FF3.6+ */background: -webkit-gradient(linear, lefttop, lefttbottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e0e))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #7d7e7e7d0%,#0e0e0e0e0e0e100%); /* Chrome10+,Safari5.1+ */background: -o-gradiente-lineal (arriba, #7d7e7d0%,#0e0e0e0e100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #7d7e7d0%,#0e0e0e0e100%); /* IE10+ */background: linear-gradient(to bottom, #7d7e7d0%,#0e0e0e0e100%); /* W3C */filtro: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7d7e7d’, endColorstr=’#0e0e0e0e’,GradientType=0); /* IE6-9 */borde: 1pxsolid#ccc;border-radius: 6px;box-shadow: 1px1px1px1px#ccc;font-style: italic;}blockquote cite:before {content: «2014 2009»;}
8. Cita de bloque con patrón de fondo
En este ejemplo hemos utilizado una imagen de fondo como patrón para una cita en bloque.
12345678910blockquote {ancho: 450px;imagen de fondo:url(‘http://example.com/wp-content/themes/your-theme/images/lined_paper.png’);border: 1pxsolid#ccc; sombra de caja: 1px1px1px1px#ccc; estilo de fuente: cursiva;}cita de bloque: antes {contenido: «2014 2009»;}
9. Uso de varias imágenes en el fondo de una cita en bloque
Puede usar múltiples imágenes en fondo de bloque usando css. En este ejemplo hemos utilizado blockquote:before pseudoelemento para añadir otra imagen de fondo a blockquote.
1234567891011121314141516 entre comillas {ancho: 450px;fondo-imagen:url(‘http://example.com/wp-content/themes/your-theme/images/lined_paper.png’);borde: 1pxsolid#ccc;box-shadow: 1px1px1px1px#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 en WordPress. Si tiene alguna pregunta o sugerencia, por favor siéntase libre de dejar un comentario a continuación.
Deja una respuesta