My question is: it is possible to change the background color (for exemple) to an article who is categorized under "quote" format. (or whatever format like Aside or Link)?

I want that an article in Quote format appears different from others, with a specific font color, or specific background color.

Is that possible?

The theme is Twenty Eleven

Thank you!

  • I tried with .format-quote .entry-content { background: #ddd; } , It works well when you see the whole article, but if you do an excerpt, the background doesn't show. Even with the Advanced Excerpt plugin installed... any suggestion?
    – Apteryx
    Mar 22 '13 at 12:08

Targeting the whole page

First, ensure that you're calling body_class() inside of the HTML <body> tag:

<body <?php body_class(); ?>

Then, you can take advantage of the post format-specific classes output by body_class() to style according to your needs.

Single blog posts use the class single-post-format-{format}

body.single-format-aside {}

Archive index pages for a post format taxonomy term use the class term-post-format={format}:

body.term-post-format-aside {}

That should let you target the body, or use it as an ancestor selector to target anything else on the page.

Targeting the post container

First, ensure that you're calling post_class() inside the post container:

<div id="post-"<?php the_ID(); ?> <?php post_class(); ?>>

Then, you can take advantage of the post format-specific classes output by post_class() to style according to your needs.

Posts with a post format assigned use the class `format-{format}'

div.format-aside {}
  • TY, the function is called and the formats run just fine. Actually (thanks Harish Chouhan) I've found the part of CSS that changes the article aspect and I succeded to change the background color, but his not shows in the HOME PAGE because the article appears as an excerpt... how to show the background in the home page?
    – Apteryx
    Mar 22 '13 at 12:13
  • Displaying the_content() vs. the_excerpt() should make no difference whatsoever, because post_class() is output in the post container, that contains the call to the_content()/the_excerpt(). Mar 22 '13 at 12:30
  • It should be, but the excerpt is formatted differently in the home from the original article... don't know why.
    – Apteryx
    Mar 22 '13 at 12:35
  • We'd have to see your actual, rendered code to figure out why. Mar 22 '13 at 12:46
  • I've find out! I've modified the: .format-quote .entry-summary { font-style: italic; background: #ddd; //sfondo grigio } who's the style for the excerpt the same way as I do for entry-content: .format-quote .entry-content { font-style: italic; background: #ddd; //sfondo grigio } Now it works fine!
    – Apteryx
    Mar 22 '13 at 12:53

If you only wish to change the background color of the block that contains your post format, then you can add CSS rule similar to this:

.format-image { background: #000; }
.format-quote { background: #000; }
  • thank you, not a bad solution but is not yet what I search to do. In this way all the article get the black background, from title to footer. I would be able to change just the content. possibly it can be something like .format-quote.content { background: #000; } ? (I try)
    – Apteryx
    Mar 22 '13 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.