[CrocusReview]

Hi,

I’d like to experiment with making changes to the format of the blockquote. What is the best way to do that?

In other words, can you give me the coding for the current blockquote formatting so I can paste this into my custom CSS field and modify a few parameters? (If this is the best way to do this.)

Also, How can I change the color of the quote image and the citation line within the blockquote?

Thanks,

Gary

[ahmetsali]

Hi, try this custom css code;

/* quote */
.format-quote:before { font-family: Georgia, "Times New Roman", Times, serif; font-size:5.5em; line-height:1; color: #096; }
.format-quote blockquote { font-size: 1.6em; margin:0; }
.format-quote blockquote cite { font-size: .7em; }

[CrocusReview]

Hmm.. this didn’t affect the appearance of my blockquote.

I don’t know if this makes any difference, but I already have this custom css code in the Theme Options > Style > Custom CSS box to modify the spacing below my blockquote, which works fine:

blockquote { margin-bottom: 20px; padding-bottom: 20px; }

Gary

[ahmetsali]

can you provide the page url in which you have the blockquote you want to style ?

[CrocusReview]

Sure, here’s that page:
http://crocusreview.com/tao-the-path-to-happiness/

I’d like to change the appearance of all block quotes on my site so they have these features:

1. Have a quote mark image appear both before (top/left) and after (bottom right) the quoted text.
2. Have the quote text appear in Georgia italic font. (I haven’t decided on font size yet).
3. Change the color of the quote marks and citation line from light gray to something like #666699 or a faded version of this color.

Hope you can help. Thanks.
Gary

[ahmetsali]

you can build on this custom css;

blockquote {
    font-family: Georgia,serif;
    font-style: italic;
}

blockquote cite {
    color: #666699;
}
blockquote:after {
    display: block;  
    content: "\201D";  line-height: 1;  font-size: 6em;  font-family: Georgia, "Times New Roman", Times, serif;  position: absolute;  
    right: 0;  
    bottom: -0.4em;  color: #DDD;
}
blockquote:after, blockquote:before {
    color: #666699;
}

[CrocusReview]

This works. Thanks!