Ask your WordPress questions! Pay money and get answers fast! (more info)

Blockquote plugin to style "" quote marks WordPress

  • SOLVED

Hi Guys

What is the best way to achieve large grey quote marks when using the <blockquote> tag?

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

Any guidance is greatly appreciated.

Thanks
Steve

Answers (3)

2013-07-26

Giri answers:

Check this jsfiddle

[[LINK href="http://jsfiddle.net/_jro/LwnYJ/"]]http://jsfiddle.net/_jro/LwnYJ/[[/LINK]]


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?

2013-07-26

Doug Montgomery answers:

To be honest, I have no idea what you mean. Need just a 'bit' more information.


Doug Montgomery comments:

Here's a nice block quote plugin in but I'm not sure if it what you are after.

http://www.sophrosynelife.com/2013/02/custom-block-quote-plugin/


Steve Watson comments:

Sorry my question has not come through correctly LOL

What is the best way to get a large grey quotemark at the beginning of a paragraph of text that is in a blockquote

I have this css styling already

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

and I would like a large grey quote mark before and after the paragraph

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


Doug Montgomery comments:

Thanks Giri....a nice tool I didn't know about.

2013-07-26

Sabby Sam answers:

Hi Steve,
This is little important one as we need to check the browser compatible. I would recommend you to use the images.
Here are the some example
http://bdlab.blogspot.com/2010/12/22-amazing-examples-to-customize.html

Browser compatible http://www.w3schools.com/cssref/sel_before.asp