When you quote a passage from another source, you can mark it as a blockquote. In the Visual editor, you highlight the text and click the blockquote button (row 1 tool 6). In the HTML editor, you highlight the text and click the “b-quote” button, or write:
Doing so will automatically result in some differentiation, to make the quote stand out. The styling varies from theme to theme:
|
Italics
Monotone Indented Ambiru |
Indented plus italics
Adventure Journal |
Additional text differentiation
Benevolence: indented, different text color [*] Also optional very prominent blockquotes |
Background and/or border
Albeo: different font, different text color, colored background
Andreas 09: indented, dashed border
Autofocus: indented, italics, larger font, top & bottom border
Chaotic Soul: indented, bottom border
Chateau: italics, larger font size, different font, in quotation marks, top/right/bottom border
Dark Wood: indented, colored background
Enterprise: indented, colored bg & border
Fresh & Clean: colored bg & border
Girl in Green: indented, different text color, colored background
Iceburgg: indented, colored background
Motion: italics, colored background
Neo-Sapien: indented, colored background
Ocadia: indented, colored bg & border
P2: colored background
Piano Black: colored background
Parament: italics, colored background & border
Pool: indented, colored background
Sapphire: indented, italics, colored border
Steira: center aligned, capitalized text, different text color, top/bottom border
Suburbia: indented, different text color, colored background
Supposedly Clean: indented, colored background, top/bottom dashed border
Vostok: indented, colored background
zBench: indented, italics, different font color, colored background & dropshadow
Other graphics
Almost Spring: indented, vertical bar left
Andrea: indented, vertical line left
Banana Smoothie: indented, italics, prominent quotation mark
Black-Letterhead: indented, different text color, vertical line left
Blogum: indented, different text color, vertical line left
Bold Life: indented, italics, different text color, prominent quotation mark
Chunk: larger font size, different font, different text color, colored background, vertical bar left
Clean Home: indented, different text color, vertical bar left
Comet: indented, italics, different text color, prominent quotation mark
Contempt: indented, different text color, vertical bar left
Day Dream: indented, different text colo, vertical bar left
DePo Square: different text color, enclosed in grey bubble
Digg 3 Column: indented, different text color, colored background, prominent quotation mark
Dusk: indented, vertical bar left
Fauna: indented, vertical bar left
Fjords 04: indented, vertical bar left
Fleur de Lys: indented, vertical bar left
Fusion: indented, italics, prominent quotation mark
Greenery: indented, vertical bar left
Green Marinée: indented, italics, vertical bar left
Greyzed: indented, different text color, prominent quotation mark
Grid Focus: indented, italics, vertical bar left
Hemingway: indented, different text color, vertical bar left
Imbalance 2: indented, larger font, different text color, vertical line left
iNove: indented, colored background, dashed border, prominent quotation mark
Inuit Types: indented, italics, different text color, vertical line left
K2-lite: indented, prominent quotation mark
Kubrick: indented, different text color, vertical bar left
Light: indented, italics, different text color, vertical line left
Liquorice: indented, different text color, colored background, vertical bar left
Manifest: indented, italics, different text color, vertical line left
Matala: indented, different font, different text color, prominent quotation mark
Misty Look: indented, different text color, prominent quotation mark
Monochrome: colored background & border, prominent quotation marks
Neat: indented, vertical bar left
Next Saturday: vertical line left
Notepad: indented, italics, larger font size, prominent quotation mark
NotesIL: indented, vertical line left
Nuntius: colored background, border, vertical bar left.
Ocean Mist: indented, vertical bar left
Oulipo: indented, italics, vertical line left
Paperpunch: indented, different text color, vertical line left
Prologue: indented, italics, vertical line left
Reddle: indented, different text color, prominent quotation mark
Redoable Lite: indented, italics, different text color, prominent quotation mark
Regulus: indented, colored background, prominent quotation mark
Retro-fitted: indented, different text color, different font, colored background, border, prominent quotation mark
Retro MacOS: indented, vertical line left
Rounded: indented, vertical bar left
Sandbox 0.6.1: indented, vertical bar left
Shaan: indented, italics, prominent quotation mark
Shocking Blue Green: indented, vertical line left
Silver is the New Black: indented, vertical line left
Skeptical: indented, italics, prominent quotation mark
Solipsus: indented, colored background & border, “QUOTE” vertically left
Spectrum: italics, different text color, vertical bar left
Splendio: indented, different text color, prominent quotation mark
Structure: indented, italics, larger text size, different text color, vertical line left
Sundance: italics, vertical bar left
The Journalist v1.3: indented, italics, prominent quotation mark
The Journalist v1.9: indented, prominent quotation mark
Thirteen: indented, vertical bar left
Titan: indented, italics, different text color, vertical line left
Triton Lite: indented, prominent quotation mark
Under the Influence: indented, different text color, prominent quotation mark
Unsleepable: indented, prominent quotation mark
Vigilance: italics, larger font size, colored background, prominent quotation mark
White as Milk: indented, different text color, vertical bar left
WordPress Classic: indented, vertical bar left
Wu Wei: indented, italics, prominent quotation mark
_____________
The default styling of blockquotes can be modified: you can add extra distinguishing features or override the default ones or both. To do that, you add the style attribute and appropriate properties & values to the opening blockquote tag (in the HTML editor).
For example, blockquotes in the theme I’m using look like this:
This is a blockquote (default styling)
If I wish to override the bold font and make them, say, orange, I’ll write this:
Result:
This is a blockquote (modified styling)
Of course, if you have the paid Custom Design upgrade, you can change the styling of blockquotes once for all.
https://wpbtips.wordpress.com/
wordpress tips 
Excellent. I have been just making blockquotes into divs to style them as I want them. I’ll experiment with your code asap.
On my main blog though, there seems to be an image in the CSS to make the corners round. So I would not be able to retain that and still change the colors, right?
I do still miss dear “Unsleepable” but don’t think I can go back to it now…
Posted by Tess | November 19, 2011, 23:22Another great one Panos! I hate the default blockquote format of my Twenty-Ten theme and have just recently started playing around with the style attribute. Something I’d like to add is the graphical quote mark (or marks) I see in some other themes. Any suggestions for simple mods to do this?
Posted by IzaakMak | November 20, 2011, 01:15@Tess:
Oh I use divs too. Depends on how much you want to deviate from the default. If you’re generally happy with it and want to modify it a little, then you use some style in the bq tag. But if you have to override, say, four different default properties and add three more, then of course you kiss bqs goodbye and use divs instead.
No, the frame in zBench is not an image: it’s the box-shadow property. Your starting point would be this (these are the default values of the theme):
<blockquote style="-moz-box-shadow:4px 5px 29px #ddd;-webkit-box-shadow:4px 5px 29px #ddd;box-shadow:4px 5px 29px #ddd;">
You can play with the examples here to familiarize yourself with the thing:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow
@IM:
You can type a regular quotation mark at the beginning of the blockquote and enclose it in span tags with the properties and values you want. Try this simple example and tell me what you’d like to change:
<blockquote>
<span style="font-size:200%;color:#456;margin-left:-22px;margin-right:10px;">"</span>QUOTATION HERE
<.blockquote>
Posted by Panos | November 20, 2011, 02:38Wow, thanks Panos! I’ll do some playing around and get back yo you.
Posted by IzaakMak | November 20, 2011, 02:46Interesting. I played with the shadow effect back when you made your post about rounded borders, but forgot about it. I like the effect I got in my latest post using divs with background color variations though. But I could try the box shadows for fun again on another post. I should learn something about CSS but I don’t even know where to find the CSS for any of the themes I’m using. As I recall, the shadows got messed up on WordPress, though they worked well enough on my work website. I don’t think they showed up in IE though. Neither did the rounded borders.
Posted by Tess | November 20, 2011, 07:04Yes, IE used to ignore both border-radius and box-shadow. According to w3schools.com, IE9 understands them.
And yes, as you realized, to find what the bq frame in zBench is I had to check the CSS of the theme (just as with the table quirks in 2011 etc.). You can see it in Appearance > Custom Design > CSS > “View the original stylesheet”; also here:
https://wpcom-themes.svn.automattic.com/ (click theme name, click style.css).
To avoid having to do that each time I need to find something, I have copied the styleheets of all the themes and saved them in a folder in my computer.
Posted by Panos | November 20, 2011, 16:01Thanks.
Just for fun I made the Zynga blockquote orange in this article here:
[Link to non-wp.com site and username link to commercial site removed – P.]
Posted by David Bennett | December 6, 2011, 01:30Could you remove the earlier comment I made? If you don’t like part, then I would prefer none at all, if that’s OK with you?
[Username link to wp.com blog that links to the other ones removed – P.]
Posted by David | December 6, 2011, 03:21A spammer who wants to inform us that he posted an orange bq is amusing. A spammer who then asks for favors is twice so.
Posted by Panos | December 6, 2011, 06:15David is NOT a spammer.
Posted by timethief | December 6, 2011, 08:18TT, suppose you didn’t know me, and suppose I first showed up in your blog with a comment that said, you know what, I posted a yellow image today; and my comment linked to two different self-hosted sites, complete with their buy this and that and their affiliate links and everything. What exactly would you call that comment if not spam?
Posted by Panos | December 6, 2011, 11:41Yes, I do understand why you thought so. I happened to be here looking for another reference and saw this. I’m am sorry this happened between you. :(
Posted by timethief | December 7, 2011, 01:41Many thanks for this tipp!!!
Posted by robrandall | December 8, 2011, 00:36Panos,
For those seeing this thread:
I highlighted the ‘orange’ blockquote in article about ‘churn’ – the tendency of people to stop using a product or service because it simply fails to appeal to them any longer.
I contrasted that with a talk by a world-class musician that I had just seen, who had illustrated the points he was making in his talk by playing short extracts and whose playing had the hallmark of quality that defies ‘churn’.
I linked in that article to an article in Techcrunch about a game maker that was having trouble maintaining its customer base, and to a Wikipedia reference to a famous lyricist who had something to say about fashion versus longevity.
The blog on which I posted the article has as of this date approximately 350 articles that I have posted over the last three years and which are mainly about politics, society, and the environment.
My last article is about the convenience to Western countries of classifying what is happening in Syria as a civil war rather than as was the case in Libya, as a popular uprising, and thereby avoiding having to intervene.
My gravatar links to two sites I have – that is how I have my photo in my gravatar when I reply to comments on those sites. I do not think that is unusual in the least – quite the contrary.
Posted by David | December 11, 2011, 12:45So what? None of this changes the fact that planting links when no links are needed, in moronic comments like “look ma, just made an orange turd”, is spamming. Ok you made the turd, congratulations, now quit the turd polishing.
Posted by Panos | December 12, 2011, 03:56This is awesome! Thanks.
Posted by Cris | January 21, 2012, 03:30