Quotes in Blogger - Customization

December 28, 2008

We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, borders, background.....changing size of it, font, style...

WHAT ARE QUOTES?
Quotes are used for quoting. Heh. Quoting defines:

► repeating or copying the words of another, usually with acknowledgment of the source
► citing or referring for illustration or proof
► repeating a brief passage or excerpt

DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEM
Default quotes ain't much of a fun. Really. They are rather dull. And blank.
When you're composing the Post, and want to make a quotation, you will:

► highlight the part of the text that will be a quote
► and click on the quote button in the Blogger toolbar
This will change highlighted part into a quote, with a default design, and that is:
It just added some margins to it....not fun at all. I told you so.

SO, WHAT CAN WE DO?
Well, a lot! First, let's see what part of the code (CSS style) we have to play with....

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

...that's the one! You can find it easily going to LAYOUT ► EDIT HTML ► and scroll until you find it (use CTRL + F to make it easier)...
...yours may be a bit different (if you have customized template), but it will be something like that...

I'll show you a few examples, and in each one, you will have to DELETE the code from above, and REPLACE it with the one from example.

◄ Borders, font styles and colors ►

Example 1	Example 2	Example 3	Example 4

Example 1.

.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Example 2.

.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Example 3.

.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

Example 4.

.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

...these are just examples, so you can see what variables you can adjust....
...change the colors (hex values)...change border styles...
...font size, font style (italic), font color (color)...
...margins (the space between box and the post content)...
...padding (space between quote text and the borders)...

◄ Picture in the quotes ►

Example 1	Example 2	Example 3	Example 4

Example 1.

.post blockquote {
color:#666666;
background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);
background-position:top left;
background-repeat:no-repeat;
margin: 6px 6px 6px 6px;
padding: 8px 0px 8px 74px;
font-size: 14px;
font-style:italic;
line-height:1.4em;
}

Example 2.

.post blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}

Example 3.

.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

Example 4.

.post blockquote {
color:#000000;
background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);
margin: 6px 6px 6px 6px;
padding: 8px 6px 8px 6px;
font-size: 14px;
line-height:1.4em;
}

...remember to change the URL address of the pic with your own...
...you have lots of options here....be creative...change....
...trial and error...
...read some more about background pictures is Blogger...

If you have some doubts/questions, just ask....

Smile!