TrickBlogger: Customize Block-Quotes in your Posts

"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.

Most Blogger templates define how block quotes should appear in the style section of your template, between the tags. In this blog I have customized the appearance of block quotes by adding a background image and stronger color so these sections are defined more clearly. In this post, I'll give you some examples of how you can customize your own block quotes to achieve a more personalized look.

How do I use Block Quotes?

If you are unfamiliar with block quotes, you may be wondering how to use them in your posts. But don't worry, they are very easy to use!

If you write your posts with the "rich text editor", you simply need to highlight the section of text you'd like to block-quote, and click on the "blockquote" button which is highlighted in the image below:

This button also features in the HTML editor, and is easier to spot as there are fewer buttons to choose from!

Alternatively, you can choose to wrap your quotations in blockquote tags, like this:

<blockquote>Write your quotations here</blockquote>

How the style of block quotes is defined

In the style section of your template (between the <b:skin> and </b:skin> tags), it is most likely that you'll find a section which looks something like this:

blockquote {
margin:1em 20px;
}

These few lines of code define how block quotes will appear when published in your posts. By default, any text enclosed in <blockquote> tags will be slightly indented on the left hand side. Most block quote definitions will also add a margin above the block quote to separate it from the main body of the text, as in the example above.

In your own template, you may notice that ".post" is added before the "blockquote". This statement would then define how the block quote would look inside a blog post, which is where most people would need to add a quotation. However, if you plan on using styled block quotations in your sidebar/footer/header section, it may be a good idea to remove the ".post" phrase so that all block quotes which appear in your template will display in the same way.

Adding some style to your block quotes

Here I will illustrate three common methods you may like to use to style your block quotes: borders, backgrounds and font styles.

Borders

Adding borders to your block quotes can really make a visual impact that the content is separate from the main body of text. The simplest way to add a border is to add these lines in red to the styling definitions for "blockquote" in your style section:

blockquote {
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}

Which would produce the following effect:

A solid black border around the whole block quote which is one pixel thick. The "padding" in this example ensures that there is five pixels of blank space between the border and the text it contains, which helps make it easier to read.

Here is an example of a different style of border:

blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}

And here is the effect:

A dotted red border which is 3 pixels wide, with 10 pixels of padding between the border and the text it contains.

You can experiment with different settings for the border property, such as the thickness, the color and the style using these two examples as a guide. For a full description of the CSS Border property, take a look at Tizag's excellent tutorial which includes a section for you to try out different properties for yourself.

Using background colors and images

In this blog I used a combination of background image and color to highlight block quotes from the main body of text. The method for this is very similar to how we can define the main background of a blog. Here is a simple example to define the background color as a pale grey:

blockquote {
margin:1em 20px; background: #cccccc;
}

This would produce the following effect:

Here is an example of the block quote background property to define only the background color

You could of course change the hex value of the background color to better suit the theme of your blog template. You may also prefer to add some padding, so that the text doesn't run to the borders of the background.

Let's suppose you want to add some pizazz to the block quotes by using a background image, as in this example...

This uses a background image which is aligned to the top of the block quote section, and also a background color which blends with the image so that it appears to be a complete background image. You could recreate this in your own blog template by using the following code within your b:skin section:

blockquote {
margin:1em 20px;
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;
padding: 30px 10px 10px 10px;
}

Alternatively, if you would like to use the "quote marks" image and blended background which I use here, you could use this definition instead:

blockquote {
margin:1em 20px;
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;
padding: 8px 8px 8px 65px;
}

You could also create your own background images to signify the blockquote and define them in a similar way.

Using different font styles

A subtler method of styling block quotes is to define a different font style to the main body of the text, such as making the font bold, italic or a different color.

Here is an example of a block quote which defines all three of these elements at once, though you could of course choose only one or two of these properties...

All three of these properties may be defined in the following statement:

blockquote {
margin:1em 20px;
font-weight; bold;
font-style: italic; color: #ff0000;
}

Experimenting with these different font styles can easily help you create a style which is perfect for highlighting your quotations.

The overall effect

Using styles for your block quotes can greatly complement your theme, and ensures that the quotations are easily recognizable from the main body of your posts.