miércoles, 1 de abril de 2015

¿Cómo personalizo las blockquotes?

En un primer momento puede parecer algo complicado, pero ¡para nada! Empezamos por abrir el diseñador de plantillas de blogger, y vamos a la opción de añadir CSS:


Y ahí copiamos lo siguiente:

.post-body blockquote {
border-left: 15px solid; border-color: #bf0000
border-right: 1px solid; border-color: #bf0000;
border-top: 1px solid; border-color: #bf0000;
border-bottom: 1px solid; border-color: #bf0000;
background: #ffffff;
padding: 25px;
font-size: 15px;
color: #323232;
font-family: 'Hanuman', serif; 
font-style:italic; 
border.radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Y voilà!, eso es todo... si quieres que tu blockquote sea exactamente igual que la mía.

Para adaptarla a tus gustos, podemos modificar los colores (siempre usando el sistema hexadecimal. Yo siempre me ayudo con esta página para seleccionar el color perfecto ;)), la letra (tamaño, color y fuente) e incluso redondear los bordes (para eso sirven las tres últimas líneas, y a más píxeles más redondeados quedarán los bordes, si solo los quieres curvarlos un poquito, pon un valor más cercano a 0px en las tres líneas).

Ah, si queremos cambiar el estilo de los bordes, podemos cambiar solid por dashed (para que estén formados por guiones), dotted (para que estén hechos de puntos) o incluso double (para que haya dos líneas).

Bonus track! También podemos poner una imagen de fondo, añadiendo simplemente esta línea:

background-image: url('url de la imagen');

Aquí os dejo algún ejemplo de blockquotes que yo misma he hecho en un momentín :D (sí, lo sé, lo siento, sé que son bastante horteras, pero tenía que exagerarlo todo mucho para que vieseis las distintas opciones sin para eso hacer ochenta modelos):



.post-body blockquote {
border-left: 12px solid; border-color: #EC1789;
border-right: 12px solid; border-color: #EC1789;
border-top: 3px solid; border-color: #EC1789;
border-bottom: 3px solid; border-color: #EC1789;
padding: 15px;
font-size:17px;
color: #EC1789;
font-family: 'Pacifico', serif;
background: #FFDCEF;
border.radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;

}




.post-body blockquote {
border-left: 12px solid; border-color: #907249;
border-right: 1px solid; border-color: #907249;
border-top: 1px solid; border-color: #907249;
border-bottom: 1px solid; border-color: #907249;
padding: 30px;
font-size:13px;
color: #000000;
font-family: 'Times New Roman', serif;
background: transparent;
border.radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}



.post-body blockquote {
border-left: 7px solid; border-color: #FF0731;
border-right: 7px solid; border-color: #FF0731;
border-top: 7px solid; border-color: #FF0731;
border-bottom: 7px solid; border-color: #FF0731;
padding: 70px;
font-size:16px;
color: #FF0731;
font-family: 'Coming Soon', serif;
background-image: url('http://feelgrafix.com/data_images/out/13/871810-polka-dot-wallpaper.jpg');
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}





Eso es todo lo que tienen las blockquotes. ¿Algo que no quede claro, alguna duda, pregunta, ruego o sugerencia?

No hay comentarios:

Publicar un comentario