Blockquote and Code

On WordPress powered web sites Blockquote and Code tags can help to edit posts in a more attractive and differentiated way. By Semiomantics XO styles the blockquote as a “pullquote”; the difference between block and pullquote is that text wraps around pullquotes, while blockquotes keep empty space left or right of the blockquote.

What is a Blockquote

According to Wikipedia:

“In HTML and XHTML, the blockquote element defines a block quotation within the text.”

The style of blockquotes is defined in the CSS style sheet. In Semiomantics XO, you find the relevant entry under #leftcontent blockquote.

Blockquote in your Style Sheet

#leftcontent blockquote {
width: 250px;
font-size: 24px;
line-height: 26px;
float: right;
margin: 0 0 0 30px;
padding: 0;
font-style: italic;
}

#leftcontent blockquote p {
padding: 0;
margin: 0;
}

The style sheet defines the width of the box as well as some other style elements. All parameters can be easily changed and others can be added, such as a background color or image, a font family and more.

On this site we have added a background in light gray #eaeaea as well as we have defined the font family. In order to insert some vertical space after the blockquote, we have added a margin of 20px at the bottom and decreased the left margin from 30px to 20px.

The Blockquote in this site’s Style Sheet:
#leftcontent blockquote {
width: 400px;
background: #eaeaea;
font-size: 16px;
line-height: 18px;
float: right;
margin: 0 0 20px 20px;
padding: 5px;
font-style: italic;
font-family: 'trebuchet ms',
verdana, sans-serif; color: #000125;
}

Here is the code as used on this site.
You notice that this text wraps around the blockquote: for this reason we call this special case of blockquote a “pullquote”.

Note that the font style is italic for the blockquote content, the code font style in red however is normal.

Also, in view of the large column width we increase the blockquote width to 400 pixels.

Code in this site’s style sheet

To differentiate between the blockquote style and the code style, we need to define “code” in the style sheet. By default the Semiomantics XO style sheet has no entry for “code”.

For this reason we just add a few lines of code after the blockquote definition in the style sheet.

Here is what I have entered for the purpose of this site:

#leftcontent code {
font-family: courier, monospace;
color: #b30000;
font-style: normal;
}


We define the font family and use namely monospace fonts. Then we add color and we make sure the fonts will be in normal style as opposed the italic style in the blockquote.

Pullquotes in Semiomantics XO

According to Wikipedia:

“A pull quote (also known as a lift-out quote or a call-out) is a quotation or edited from an article that is typically placed in a larger typeface …” and according to wiktionary: “… In newspaper and magazine publishing, a brief excerpt drawn from an article and used out of context…”.

Semiomantics XO uses the blockquote feature by default as a pullquote. The difference is in the style: text wraps around pullquotes.

The above use and style of the pullquote is defined in function of the use we make of this feature: this web site features web design elements and samples and therefore we focus first of all on text and text style.

Other applications entail other style definitions. If you use the pullquote feature mainly for featuring images, you may style the pullquote as defined in one of our earlier posts HERE.