Blockquote plugin to style "" quote marks WordPress

Giri comments:

Just use pseudo class before.

I mean like this

blockquote:before{
content: '“';
font-size:60px;
line-height:50px;
}

Here is the jsfiddle demo.

[[LINK href="http://jsfiddle.net/Viruthagiri/HyrHw/8/"]]http://jsfiddle.net/Viruthagiri/HyrHw/8/[[/LINK]]

@Doug Montgomery

Yeah jsfiddle is a cool tool. Go ahead and play with it.

Steve Watson comments:

Hi Giri

Thanks that's just what I'm after. How do I adjust the quote mark to be inline with the first sentence of the paragraph?

http://www.rawappetite.com/testimonials/

See here for what I mean: http://screencast.com/t/50x7jpX8nM

This is my code

blockquote {
quotes:;
background: #f6f6f6;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}

blockquote:before{
content: '“';
font-size:60px;
line-height:50px;
color: #B9132B;
}

Also how do we add a closing quote mark at the end of the last sentence?

Giri comments:

To add closing quote use after pseudo class

Here is the demo. I added some styles too

[[LINK href="http://jsfiddle.net/Viruthagiri/xdDMh/8/"]]http://jsfiddle.net/Viruthagiri/xdDMh/8/[[/LINK]]

Steve Watson comments:

Thank Giri

The output when I add that code to the site is not quite the same

http://www.rawappetite.com/testimonials/

What do I need to teak?

Giri comments:

I guess you are using p tag inside blockquote

So use this code

blockquote p:before, blockquote p:after {
font: bold 45px/1px Times, serif;
color: #B9132B;
position: absolute;
}
blockquote p:before {
content: "\201C";
margin: 15px 0 0 -25px;
}
blockquote p:after {
content: "\201D";
margin: 23px 10px 23px 10px;
}

Steve Watson comments:

Ok we are getting close now. I'm not using p tags in the page html though.

I would like to have the grey background before and to give the blockquote some margin left and right

This is my page code

<blockquote>Curabitur vulputate diam eget sapien convallis, et gravida sapien adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna nibh, sit amet tincidunt nisl rutrum at. Ut aliquam ipsum in lacus vestibulum ultricies. Donec vel erat metus. Quisque auctor mattis elementum. Fusce lacus erat, egestas non tellus eget, rhoncus blandit justo. <strong>Mr Testimonial, Acme Ltd.</strong></blockquote>

<div style="margin-bottom: 20px;"></div>

<blockquote>Curabitur vulputate diam eget sapien convallis, et gravida sapien adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna nibh, sit amet tincidunt nisl rutrum at. Ut aliquam ipsum in lacus vestibulum ultricies. Donec vel erat metus. Quisque auctor mattis elementum. Fusce lacus erat, egestas non tellus eget, rhoncus blandit justo. <strong>Mr Testimonial, Acme Ltd.</strong></blockquote>

Giri comments:

I think you removed the blockquote styles from your code. Thats why it looks like that.

Just place this code there

blockquote {
font-style: italic;
background: #f6f6f6;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
display:block;
}

Steve Watson comments:

Hey Giri

I've run into another issue that I think is to do with the P tag

When entering content within the block quote tags if I want a space between paragraphs I get extra quote marks that i dont need

http://screencast.com/t/wZfuWMGD1PZf

http://www.rawappetite.com/services/dietary-asessment/

How can we adjust it so we can remove the undeeded quote marks.

Does that make sense?