Personaliza la Cita / Quote de tus Entradas.

¿Qué tal?
Bueno hace unos díitas estaba por Facebook mirando cosillas y publicando otras y me llegó un mensaje privado de una chica con el nombre de Alice Twisaga Twivampdiaries (espero que no lea mi opinión sobre Crepúsculo ajajajajajja, es broma)
Preguntándome sobre si se podía personalizar, cambiar, quitar el quote de una entrada.
¿Qué es el quote?
Es Citar, cuando citamos algo que no es nuestro, o una conversación, vamos lo que es citar de toda la vida, que sale más a un ladito y a veces remarcado o en un cuadrito.
Le dije que sí, como siempre, ¿por qué no voy a ayudaros? pues bueno, vamos al lio.
Para poner un quote tenemos que escribir una entrada como hacemos siempre y seleccionar el texto que queremos marcar como cita. Luego hacemos clic a las comillas que hay arriba a la derecha del editor de texto de la entrada.

Al hacerlo veremos que el texto, como se ve en la foto, se mete para la derecha.
Ya tenemos la cita creada, pero lo mas importantísimo:
¿Cómo personalizo el cuadrito que saldrá luego en el blog para que no sea feo?
Pues nos vamos a Plantilla y Editar HTML (hacer la copia ya lo sabéis, siempre por si metemos la pata)
Una vez ahí desplegamos el artilugio de CSS que ya sabéis cuál es. El que está entre <skin> y </skin>, hacemos click en el texto del código y apretamos CTRL y F a la vez. En la cajita de buscar pegamos lo siguiente:
.blockquote
#blockquote
post. blockquote
UNA DE ESTAS TRES, porque estas tres son las maneras en las que puede aparecer en vuestra plantilla. Si os sale, bajar ya a la parte de personalizar el código.
¿No sale? pues lo añadiremos, nos vamos al final de nuestra plantilla, aunque ahora con lo que sabéis podéis diferenciar cada parte del código CSS y podéis ponerlo donde queráis. Pero vamos a ir a lo seguro.
Buscáis esto en vuestra plantilla:
]]></b:skin>
Y justo encima pegáis el código de personalizar el quote:
blockquote {
background: #EBB8CC url() top left no-repeat;
padding: 5px 15px 10px 32px;
margin: 10px 15px 3px 3px;
width: 600px;
border-top: 1px dashed #C6829C;
border-right: 1px dashed #C6829C;
border-left: 1px dashed #C6829C;
border-bottom: 1px dashed #C6829C;
font-style: normal;
}
Este es mi código y os saldrá así:

Para personalizároslo, os explico cada parte del código así podréis ponerlo como más os guste:
blockquote {
background: #EBB8CC url() top left no-repeat;  --->Color de fondo, si queréis un color solo tenéis que cambiar lo que aparece en ROJO. Si queréis una imagen de fondo, poned la URL de la imagen entre los paréntesis () que hay después de url sin borrar nada, sólo metiendo ahí la url.
padding: 5px 15px 10px 32px;
margin: 10px 15px 3px 3px; ---> no lo toquéis es el margen y la ubicación del texto dentro del cuadrito. Si queréis podéis tocarlo e ir probando a ver cómo os gusta más.
width: 600px; ---> esto es el ancho que queréis que tenga el quote, sin esto ocupará todo el ancho de la entrada. Cambiar sólo el numerito.
border-top: 1px dashed #C6829C;
border-right: 1px dashed #C6829C;
border-left: 1px dashed #C6829C;
border-bottom: 1px dashed #C6829C; ---> Todos estos border son el marco o borde que enmarcan la cita, para cambiar el color cambiar lo que aparece en ROJO, sólo el número y letras. Esto # no lo toquéis.
Donde dice dashed, es lo que os enseñé en el tutorial de Pon y personaliza el borde de tu blog. Echadle un vistazo si no os acordáis. Cambiar sólo la palabra dashed por el tipo de marco que os guste más.
Donde dice 1px es lo ancho o gordo que saldrá el borde, si lo queréis mas gordito pondréis 2 o 3 px, id probando.
font-style: normal; ---> estilo de la fuente, letra, si la queréis normal pues dejais el normal, si la queréis cursiva pues poned italic, en negrita pues bold...y así.
} ---> no lo toquéis esto cierra el código
Si no queréis que se vea nada, pues el truquito de momento es ponerle de color de fondo el mismo color que vuestro fondo de donde publicáis la entrada, el color blanco es #FFFFFF.
En los bordes con que pongáis 0px ya no se verán bordes. Y así solamente os saldrá el texto más metido a la derecha pero sin ningún marco ni color ni nada.
Espero que os haya gustado y que podais personalizar sin problemas el Quote de vuestro Blog.
Muah!
¡Gracias por suscribirte! Muchos besos. ❀Lireth❀