you're reading:
Blockquotes, Themes

Blockquote style

https://wpbtips.wordpress.com/

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:

<blockquote>QUOTATION HERE</blockquote>

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
Andreas 04
Brand New Day
Elegant Grunge
Emire
Fadtastic
Flower Power
Fresh Bananas
Freshy
Garland
Jentri
Nishita
Quentin
Rubric
Sandbox 1.1
Sandbox 1.6.1
Sandbox 1.6.2
Simpla
Strange Little Town
Sweet Blossoms
Toni
Toolbox
Treba

Indented plus italics

Adventure Journal
Beach
Blix
Bouquet
Choco
Connections
Coraline
Duotone
Esquire
Fruit Shake
Modularity Lite
Neutra
Quintus
Spring Loaded
Twenty Ten
Vermilion Christmas
Vertigo

Additional text differentiation

Benevolence: indented, different text color
Bueno: indented, italics, larger font size
Chaos Theory: indented, different text color
DePo Masthead: italics, different text color
Dusk to Dawn: indented, italics, different font
Duster: indented, italics, different font [*]
Forever: indented, different text color
iTheme2: indented, italics, different font
Koi: italics, different text color
MLB (all three): indented, different text color
Pink Touch 2: indented, larger font size
Rusty Grunge: indented, different text color
Selecta: indent, italics, different text color
Sunburn: indented, italics, different text color
Sunspot: indented, italics, different text color
Tarski: indented, different text color
The Morning After: indented, larger font size, different font, bold
Twenty-eight Thirteen: indented, different font, different text color
Twenty Eleven: indented, italics, different font [*]

[*] Also optional very prominent blockquotes
(see The workings of Twenty Eleven / Duster)

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:

<blockquote style="font-weight:normal;color:#ff4500;">QUOTATION HERE</blockquote>

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/

Please don’t paste code in comments – see comment guidelines.
Advertisements

Discussion

16 thoughts on “Blockquote style

  1. 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:22
  2. Another 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
  3. @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:38
  4. Wow, thanks Panos! I’ll do some playing around and get back yo you.

    Posted by IzaakMak | November 20, 2011, 02:46
  5. Interesting. 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:04
  6. Yes, 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:01
  7. Thanks.

    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:30
  8. Could 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:21
  9. A 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:15
  10. David is NOT a spammer.

    Posted by timethief | December 6, 2011, 08:18
  11. TT, 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:41
  12. Yes, 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:41
  13. Many thanks for this tipp!!!

    Posted by robrandall | December 8, 2011, 00:36
  14. Panos,

    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:45
  15. So 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:56
  16. This is awesome! Thanks.

    Posted by Cris | January 21, 2012, 03:30

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 3,442,291 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: