Block quotes in eleven40 Pro

[tatami]

I'm hoping someone can help me with a couple of fine-tuning issues I'm having.

The way the theme is configured by default, there are opening quote marks but no closing quote marks. I'd like to add those closing quote marks. How can I do this?

When I have an image to the right of a block quote, the block quote indentation doesn't work. How can I resolve this?

You can see an example at http://aenigma-images.com/2015/07/quite-a-trooper/. I'd really appreciate some advice here. Thanks in anticipation!

Philip

[Ginger]

Hi Philip,

This was a tough one since I had not styled blockquotes myself yet. If you Google "blockquotes styling" or something like that you can get a lot of helpful articles if you want to change this further. The article that explains the entries used for the quotes themselves is here:

http://webdesign.tutsplus.com/articles/start-using-quotation-marks-the-correct-way--webdesign-16905

In your site have a look in your style.css file and replace lines 206 through 218 with this code:

blockquote {
	margin: 40px 40px 24px;
	display: inline-block;
}

blockquote,
blockquote::before,
blockquote::after {
	color: #999
}

blockquote::before {
	content: "\201C";
	font-size: 30px;
	position: relative;
	float:left;
	top: -20px;
	left: -20px;

}

blockquote::after {
	content: "\201D";
	font-size: 30px;
	position: relative;
	float: right;
	top: -40px;
	right: -10px;

}

This puts a matching closing quote to the bottom right of the text which offsets the opening quote on the top left. The key is the before and after and the \201C and \201D entries. Hope this gets you closer to what you want!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[tatami]

Ginger

I'd pretty much given up hope of getting help on this so it's a lovely surprise that you've taken the time to offer me some advice. This looks terrifically helpful and I'll certainly have a go at following what you've suggested. I'm on holiday right now and I'm going to wait until I get back home to make changes. I'll let you know how I get on. In the meanwhile, THANK YOU 🙂

Philip

[tatami]

Ginger

I couldn't resist updating my style.css file with the code you suggested. It does indeed put smart quotes at the end of each quotation, just as I wanted. There is one unintended consequence, though, which is bugging me, For some reason I can't fathom, it indents the first two lines of the quote. As an experiment, I enlarged the quote mark font size from 30pt to 60pt and that resulted in indenting the first four lines. Have you any idea what's going on here and how to correct it?

http://aenigma-images.com/2015/07/quite-a-trooper/

Thanks again

Philip

[Ginger]

Hi Philip,

You did a good job, glad it's working for you! Sometimes I cannot resist a challenge 🙂

One thing I forgot was the original code had height: 0; under the blockquote::before section. If you add that back to the before and after sections it will reduce the "footprint" of the quotes and stop indenting the text.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[tatami]

Thanks, Ginger, for your help and for your encouragement. I think I've done as you suggested but it seems to make no difference, Here's the code I'm using.

blockquote {
margin: 40px 40px 24px;
display: inline-block;
}

blockquote,
blockquote::before,
blockquote::after {
color: #999
}

blockquote::before {
content: "\201C";
font-size: 30px;
height: 0;
position: relative;
float:left;
top: -20px;
left: -20px;

}

blockquote::after {
content: "\201D";
font-size: 30px;
height: 0;
position: relative;
float: right;
top: -40px;
right: -10px;

}

Can you spot my undeliberate mistake?

Best wishes

Philip

[Ginger]

I can see the changes, it looks good. Probably its a caching issue in your browser.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[tatami]

Thank you, Ginger, you're right and you're a total star!!!

Best wishes

Philip

[Author]

Posts