Crear bloques de citas

En muchos blogs habreis visto que los bloques entrecomillados tienen una apariencia única y destacan completamente con respecto al resto del texto. Para poder hacer algo así en nuestro blog tenemos que hacer una serie de cambios en la plantilla, muy similar al truco de las "dropcaps" .
Necesitamos definir el bloque con lo que añadiremos este código en la zona CSS de la plantilla.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Para modificar a gusto de cada uno el estilo, deberemos definir los colores de cada uno de los parámetros en nuestra plantilla (pullquoteBgColor, borderColor y pullquoteTextColor). Todas las variables se definen en nuestra plantilla. Para encontrarlo hay que buscar este encabezado de texto:

/* Variable definitions
====================

A partir de ahí, copiamos la estructura de una variable y ponemos por ejemplo:

(Variable name="pullquoteBgColor" description="Color de fondo para cita"
type="color" default="#fff" value="#ffffff")

donde añadimos el color que queremos usar. Haremos lo mismo para cada una de las variables o bien, la manera más vaga y directa es sustituir esas variables en el código por otras ya usadas en la plantilla. También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

Ahora, cuando estemos escribiendo una entrada y queramos entrecomillar un bloque, en lugar de usar (blockquote)(/blockquote) usaremos :
(span class="pullquote") texto (/span)

Ejemplo:

También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

al mismo tiempo, se pueden definir diferentes parámetros para cambiar la apariencia del bloque. En este ejemplo se ha ensanchado el bloque y lo he alineado a la izquierda. Para controlar esos cambios no tenéis más que cambiar el código donde pone "width" y "float" (en este caso 50% y left)

Una cosa más, en la que ya no caía y creo que vale la pena comentar:
El hecho de definir cada una de las variables al estilo blogger, es que una vez terminado, podremos cambiar la apariencia del color de fondo, texto... etc con tan sólo ir a la página de Diseño en la opción "colores y fuentes".

Una vez más, este truco se lo debemos a BeatifulBeta.