WordPress.org

Ready to get started?Download WordPress

Forums

Plugin for "pull quote" or "popout box" or "promo"??? (8 posts)

  1. rjustin
    Member
    Posted 5 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?

  2. Len
    Member
    Posted 5 years ago #

    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>

  3. Dgold
    Member
    Posted 5 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"

  4. Len
    Member
    Posted 5 years ago #

    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.

  5. Dgold
    Member
    Posted 5 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;}
  6. StrangeAttractor
    Member
    Posted 5 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...

  7. Len
    Member
    Posted 5 years ago #

    @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.

  8. StrangeAttractor
    Member
    Posted 5 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.

Topic Closed

This topic has been closed to new replies.

About this Topic