Posted 3 years ago #
People use various terminology. Basically I have searched high and low and cannot find a plugin that allows embedding of "quote boxes" into posts. I'm not talking the standard blockquote, but like a little box that would align some text of my choosing into the middle of the post, text wrapped around just like it wraps around a photo.
Anyone?
You can do that purely with CSS by adding a class to the existing blockquote. Add the following to your theme's style sheet...
blockquote.mag{float:right;
font-family:Georgia, Arial, Serif;
margin:.5em;
padding:.5em;
font-size:1.25em;
background:none;
width:150px;
border-top:#FFA500 2px solid;
border-bottom:#FFA500 2px solid;
color:#FFA500;}You can adjust that anyway you wish --> width, background, borders, float right or left etc
When you want to add a pullquote to a post, select blockquote then add `class="mag"
For example...
blah blah blah blah <blockquote class="mag">blah blah blah</blockquote>
Posted 3 years ago #
Nice explanation LenK.
I believe you could do the same, but delete ".mag" from the top line. Then this style would affect alllllll your past <blockquote> areas without having to go back and add class="mag"
Absolutely Dgold. You can call it whatever you want but the OP wants a way to distinguish a regular blockquote from a pullquote which is why I assigned a class.
In my own blog I modded the post toolbar and added a button to it that automagically does this.
Posted 3 years ago #
Ahh, yes, adding a button in your Write Post area that automatically inserts this style. If you do NOT use the visual editor (I don't), then such a button can be called a "quicktag" and there are plugins / methods for easily adding a quicktag. If you use Visual Editor I'm not sure how, but it probably can be done then too.
As for the CSS code and idea you showed above, I am going to try something similar soon with the "code" style that's already in default WP, just as "blockquote" style is already in default WP. I've got a blog where users have already put
<code>Some of the content inside "code" tags like this</code>
So I am hoping to create a CSS style much like you did above, and have it retroactively restyle all the past posts. Something like this, I hope will work for it:
code {
font-family:Courier;
margin:.5em;
padding:.5em;
font-size:1.25em;
background:none;
width:300px;
border-top:#FFA500 2px solid;
border-bottom:#FFA500 2px solid;
color:#FFA500;}
Posted 3 years ago #
@ LenK (or anyone else who knows the answer...)
In my own blog I modded the post toolbar and added a button to it that automagically does this.
How *do* you add a button to the visual editor? I've been using the TinyMCE Advanced plugin... would love to be able to add buttons for certain things like this...
@Dgold - I don't use the visual editor either. In fact I abhor the thing.
@StrangeAttractor - I modded core files which is something I advise against for 2 reasons:
1. If you don't know what you're doing you can completely f**k your site
2. Your mod will vanish the next time you upgrade.
Having said that the file you're dealing with is located at wp-includes/js/quicktags.js Open quicktags.js and at about Line 60 you'll see...
edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);Somewhere below that add...
edButtons[edButtons.length] =
new edButton('ed_pull'
,'p-quote'
,'\n\n<blockquote class="mag">'
,'</blockquote>\n\n'
,''
);That will add the pullquote button to the toolbar.
Posted 3 years ago #
Thanks a lot.
Yeah, I used to modify core files quite a bit which made upgrading a bit of a slog, and then learned how to mostly do it with filters in the functions file (for the PHP files).
But thank you -- this is useful enough to me to want to take the risk.
This topic has been closed to new replies.
