Improve the “blockquote” object

In an HTML page you can use the <blockquote> tag to give emphasis to a chunk of text: most of the times it is used to display a block of quoted text.

Sandvox 2.1 added a new blockquote object that does just this: it adds a blockquote tag to your page. This block of text is displayed by default as slightly indented text.

All my current designs don’t specify any particular formatting for blockquotes, so the use of this object may be somehow frustrating. I plan to add support for this feature with future updates but – in the meantime – you can add some spice to your blockquotes with few lines of code (general instructions on how to use code injection are here, as usual).

Here are few examples but, of course, you can mix code as you wish and try different combinations.

Example 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Light gray background with a left, thick border. The code:

blockquote {
    background-color:#EEE;
    padding:10px 20px;
    margin:10px 20px;
    border-left:10px solid #CCC;
}

Example 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Italic and light grey. Notice the “blockquote em” statement: since the text is all italic, emphasized text wouldn’t be noticed without this instruction; this way the formatting is typographically correct (in this example, “quis nostrud exercitation ullamco laboris” was italic in the original text). The code:

blockquote {
    color:#999;
    font-style:italic;
}
blockquote em {
    font-style:normal;
}

Example 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Double border. The code:

blockquote {
    border-left:3px double #CCC;
    padding-left:20px;
}

Example 4

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Graphic opening quotes. This one is a bit more complex: it adds opening quotes on the left side of the text block. The code:

blockquote {
    margin:0 40px;
}
.blockquote-container .graphic:before,
.blockquote-container .pagelet-body:before {
    content: "\201C";
    font-size:4em;
    color:#ccc;
    float:left;
    margin:0 10px 0 0;
    line-height:1em;
}