Question

On the design I just created for my website, I have a blockquote styled with two quote images using the span technique in css:

blockquote {
background-image: url(images/openquote.jpg);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
padding-right: 30px;
font-style: italic;
}

blockquote span {
background-image: url(images/closequote.jpg);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
font-style: italic;
}

Then I format the HTML like this:

<blockquote><span>
"The worst part of writing fiction is the fear of wasting your life behind a keyboard. The idea that, dying, you ll realize that you only ever lived on paper. Your only adventures were make-believe, and while the world fought and kissed, you sat in some dark room, masturbating and making money."<br /><br /><b><div align="right">- Chuck Palahniuk</div></b>
</span></blockquote>

On the test HTML page I created, the quote works fine and shows up exactly how I wanted to. Now that I m transferring all of my coding to Wordpress, however, the blockquote doesn t show up the same way.

HTML: lifesgarbage.com/rebnation.html (sorry, I can t post more than one link yet)

Wordpress: http://test.lifesgarbage.com

How can I change my CSS so it shows up on Wordpress similar to the way it does on the regular HTML?

Answer 1

I think the answer is that wordpress defines the default MARGIN for the blockquote tag to 0. You should just add an explicit margin value in your css.

alt text

Answer 2

also, wordpress is inserting a < p > tag after the < blockquote >. Maybe try using < p class="blockquote" > and style as .blockquote{margin:x; padding:x;}

The left margin doesn t seem to be part of the blockquote style, so the < p > might be resetting something.

Answer 3

The problem is that WP wraps the content inside an auto-generated <p> tag, hence you should modify your CSS to take that into account as well.

Answer 4

You can target the blockquotes explicitly using something like this:

.entry-content blockquote > p { }

That should work on regular Wordpress installations.

Answer 5

With Wordpress you can add a filter in the content to do exactly what you wish to get a great block quote

I have a blog post on this that can answer this question.

blockquote tutorial

友情链接