I would like to create pull-quotes for my blog. I am using the Ecto theme.
-
When I took Blogging 101, I learned how to insert pull-quotes in my blog posts. It worked fine in the Photography theme, but it is not working in my new theme (Ecto). Is there a way I can use pull-quotes with Ecto?
The blog I need help with is: (visible only to logged in users)
-
Hi carolyn220
I think you are referring to blockquotes. They are working on your site. An example is this post – http://skip22037.com/2015/09/04/siblings-a-special-blog-post/
The blockquote is the green block with the large quotation mark under the photo with the text:
“I don’t believe an accident of birth makes people sisters or brothers. It makes them siblings, gives them mutuality of parentage. Sisterhood and brotherhood is a condition people have to work at.” … Maya Angelou
The styling of a blockquote will be different in each theme.
If you would like to change the blockquote style for the Ecto theme I can help you with some custom CSS.
You will need to be on the WordPress.com premium plan to add custom CSS.
Let me know if I can help or if I have misunderstood something
-
Thank you for your response. The pull-quotes I refer to are different from the block quotes you are currently seeing on my blog. The pull-quotes, as I learned them in Blogging 101, take a line or two of text, usually something from the post, and pull it out to the side (either left or right) of the main text in the blog post, setting them aside in a different color or font for the purpose of emphasis. They worked really well when I was using the Photography theme, but when I try them in Ecto, they just look like misplaced regular text stuck into the main text of the post.
-
@g471n
Pull quotes are basically blockquotes with special formatting so they extend beyond the edges of the text area. Some themes have a special class for this. See this page from the Twenty-Eleven demo for an example: https://twentyelevendemo.wordpress.com/2011/05/27/pull-quotes-in-twenty-eleven/@carolyn220
You can use the following code as a starting point. Paste this into your CSS panel in the Customizer (I assume you have the Premium upgrade, right? Otherwise you won’t be able to do this.).pull-right { width: 33%; margin: 0 -10% 0 1.625em; display: inline; float: right; background-color: #ddd; } .pull-left { width: 33%; margin: 0 1.625em 0 -10%; display: inline; float: left; background-color: #ddd; }I just copied and tweaked the classes as they are set for Twenty-Eleven a bit. You can change the background-color to something that matches your colour scheme, and if you want a different font you can add the font-family property to each class. Let us know if you need more specific help with that. You can also play around with the width and margins to get the exact look you want.
Then, when you want to insert a pull-quote, insert a regular blockquote, switch to the text editor view, and add class=’pull-left’ or class=’pull-right’ inside the opening blockquote tag. You can see in the link for Twenty-Eleven I pasted above how to do this.
Here’s how it looks in Ecto on my test site: http://snag.gy/WbO7G.jpg
-
-
-
Thanks to both of you. Your willingness to help is great. I’ll let you know what happens when I can try it out tomorrow. :)
-
Hello again. I pasted that code into my CSS panel in the customizer, changing only the background color, and it did work…sort of. I encountered two problems I didn’t know how to correct, so I guess I need more help.
First problem: I had already used the CSS panel to paste code to create block quotes (not pull quotes) that used the little quotation mark symbol and gave them a green background to match my blog posts. However, when I removed that code from the CSS panel and replaced it with the code you gave me and added in the extra coding to make it a pull-quote, all of my original block quotes with the quotation mark symbol and green background disappeared. So I must have done something wrong. Should I have saved that first coding before replacing it with the coding you suggested for pull-quotes? How do I do that?
Second problem: The coding you gave me worked. I ended up with pull quotes and I was even able to change the color of the background to match the green of my blog posts. The problem was in the placement of the pull-quotes, the margins and such. And I don’t know how to adjust that.
I really appreciate your help, but my limited knowledge of CSS makes this a challenge for me. (Not that I mind a challenge.) At this point, I have replaced the block quote CSS with the green background and quotation mark symbol, and I’m in a holding pattern until I get some more (much needed) help.
Thanks!
Carolyn -
Should I have saved that first coding before replacing it with the coding you suggested for pull-quotes? How do I do that?
You shouldn’t have replaced the existing CSS, just added the new code. The code I gave you creates a class specifically for pull quotes, but it doesn’t change regular blockquotes.
Add back all the code @thesacredpath gave you here https://en.forums.wordpress.com/topic/how-to-change-appearance-of-block-quote-in-ecto-theme?replies=6#post-2459659, in addition to the code I gave you for the pull quotes. In fact, with that code you shouldn’t need to specify the background and quote symbol again in my code, as the two build on each other.
The problem was in the placement of the pull-quotes, the margins and such. And I don’t know how to adjust that.
How exactly do you want the pull quotes positioned? Do you want it more to the outside or inside? At the moment it aligns with the top line of the paragraph. Do you want it to appear lower down, say in the middle of the paragraph?
It will also help if you can give a link to a published post that has a pull quote in. I can play around with this on my test site, but it would be better if I can preview changes directly on yours with actual pull quotes you added.
-
Good morning. I’m back to working on this block quote/pull-quote situation again. I think I’m making some progress, thanks to your help. I have placed a block quote and a pull-quote in my article on Chautauqua Institution. I can see a difference in how they are placed with in the article and in how they work, i.e. the block quote is placed inline with the regular text, while the pull-quote is pulled off to the left (or right) of the main text. That is more or less the effect I am looking for; however, while I do want the quotation mark symbol at the beginning of the block quote, I don’t want it at the beginning of the pull-quote. Is that possible? The code I added inside the opening block quote tag is
inserted quote.</blockquote.
Regarding background color, there are two points:
1. I’m not sure I like the green, and I will play around with it to see if I can get a color I like better. I know how to do that, but…
2.What I don’t understand is how to get the background color back to white at the end of the block quote or pull-quote. As it stands currently, the same green color continues clear from the beginning of the block quote to the end of the article, well past the end of the quote. There is text in there that is not part of either quote. When the quote (block quote or pull quote) ends, the background should go back to white.Your help and your patience are terrific. I feel very hopeful about this, thanks to you. if you can help me correct the problem with the background color, I will have almost the effect I am hoping to achieve.
-
I looked again at your sample pull-quote from the Twenty-eleven theme, and that is even closer to the way I would like the pull-quote to look…pulled slightly more out to the left (or right) and possibly without a different background color. I would like it to stand out from the main text to give it emphasis. The block quote, I do want in line with the text and with a different color background.
-
Okay, the reason for that first blockquote’s background going on is in the HTML. Open that post for editing and switch to the text editor.
Find the opening blockquote tag. If you look carefully, you’ll see its closing /blockquote tag is only at the end of your post, so the editor thinks you’re quoting the entire thing. Remove the closing /blockquote tag at the bottom of the post and insert it at the point where the quote is supposed to end. That will fix the colour issue.
although the edges of the pull-quote are more perfectly geometrical than I would like them to be.
I don’t know how to make them irregular, but you can add the property “border-radius:10%;” to each of the two pull classes to give them rounded corners, or add it to the blockquote code itself to apply it to regular blockquotes and pull quotes. The higher the percentage, the more rounded the corners. Let us know if that’s not what you want.
Lastly, to remove the quotes:
Add the following line to both the pull classes:
padding: 0 0 0 1em;And add the following code below all the others:
.pull-left::before { display:none; } .pull-right::before { display:none; }I’m still learning CSS, so I don’t know if it’s the best solution, but it works on my test site.
-
Hello. I’m back to working on my blog. Following your directions, I found the problem that was making the green background color extend clear to the end of the post.Thanks you!
However, I have not been able to remove the quotation symbol from the pull-quotes. I copied and pasted the code you provided above. I added the padding code to both the pull classes and the other code below all the others as you said, but the quote symbol is still there and now it is partially covering the quotation. Did I misunderstand you and put them in the wrong places? Please check and let me know.
Thank you.
Carolyn -
I don’t see that last code that’s supposed to remove the quote if I view your site’s source code, so it’s either not working or there’s something wrong where you added the code in the Customizer.
As I said, my expertise in CSS is still somewhat limited, so I think I’m going to tag this for staff to follow up. Please be patient while waiting for them to respond.
-
Thank you for the help you have given me, kokkieh, and also for tagging the staff to follow up. I examined the code carefully and made changes to remove the bold type on the block quote and to correct the issue with the green color extending all the way to the end of the post. That has been corrected. I will wait to hear from someone on staff about the issues with the pull-quotes.
Thanks.
Carolyn aka Skip -
-
Hey there @skip22037
And add the following code below all the others:
.pull-left::before {
display:none;
}
.pull-right::before {
display:none;
}
I’m still learning CSS, so I don’t know if it’s the best solution, but it works on my test site.This was actually right. It looks like the one for pull-left was missing, so I’ve added that in for you, and poof. No more quote marks on your pull quotes.
Good job, @kokkieh !
-
- The topic ‘I would like to create pull-quotes for my blog. I am using the Ecto theme.’ is closed to new replies.
WordPress.com Forums 
