HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Potential Pullquotes Plugin.

peregrineperegrine MVP
edited December 2013 in Feedback

Pull quotes - you surround your text with pullquote tags and it pulls a copy of text over to right and highlights.

I modified my button bar to have the Pullquote button that adds pullquote tags around selected text.
But you could still add your own [pullquote] tags manually.

I'll upload it if anyone wants to try to outfox (fix) a few css issues. Anyone interested in messing with css for a potential plugin.

As you can see it is on the right hand side. It needs a bit of work. Still got a few css problems. Any one try to fix, if I upload it.

had to add extra lines here, otherwise pullquote overflows message box.

I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    fox a few css issues
    few css problems
    messing with css

    Yes, you had me at css....

  • peregrineperegrine MVP
    edited December 2013

    @vrijvlinder said:

    she's here at http://vanillaforums.org/addon/pullquote-plugin

    you can either post snippets of changes or pm me and i'll incorporate it.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    ok here is my fix, I tested this using Cleditor, so it works with Cleditor as well.

    .pullquote {
    background:#C39733;
    border: 1px dotted #666;
    clear: right;
    color: #fff;
    float: right;
    font-size: 20px;
    font-style: italic;
    padding: 10px;
    width: 200px;
    height: auto;
    }
    
  • peregrineperegrine MVP
    edited December 2013

    close but no cigar!

    add a pullquote like this and you will see the second pullquote drops down below comment box.
    may need some jquery to adjust message height or something.

    this is a discussion of using a pullquote of a highlighted piece of text floated to the right to enhance.
    [pullquote]"this is my pullquote."[/pullquote] As you can see it is on the right hand side. It needs a bit of work.
    Still got a few css problems. Any one try to fix, if I upload it.

    what do you think?

    had to add extra lines here, otherwise [pullquote]pullquote overflows As you can see it is on the right hand sidemessage box.[/pullquote]

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Not sure I understand this is how mine looks and it acts fine. Maybe because of my theme. Who knows but I do not see what you describe. Will test in another forum.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited December 2013

    I also added this to the css because if you use span with colors in the message then the pullquote takes those colors and they do not work with the background color of the pullquote

    .pullquote span {
        color: #fff!important;
    }
    

    if you want the quote to be horizontal and take up less room

    .pullquote {
    background: #C39733;
    border: 1px dotted #666;
    clear: both;
    color: #fff;
    float: right;
    font-size: 20px;
    font-style: italic;
    padding: 10px;
    width: auto;
    height: auto;
    }
    

    if you want the text more condensed add line-height

    .pullquote {
    background: #C39733;
    border: 1px dotted #666;
    clear: both;
    color: #fff;
    float: right;
    font-size: 20px;
    font-style: italic;
    padding: 10px;
    width: 200px;
    height: auto;
    line-height: 1;
    }
    

    What I find affects the content is in the main style.css it adds 8px margin top makes the pullquote go down some

    style.css:1215
    .Preview .Message, .Preview .Message p, .MessageList .Message, .MessageList .Message p {
    margin: 8px 0;
    }
    
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    Ok to fix the overflowing of the pullquote when the message/comment is shorter than the pullquote

    add this to the plugin to make the message area a little longer to give slack to the container of the message to hold the pullquote.

        .Preview .Message, .MessageList .Message {
    clear: both;
    line-height: 1.6;
    }
    

    Adding line-height: 1.2; to .pullquote also helps combat this issue.

    Also if you add two line breaks right after the pullquote closing tag will help avoid this issue. You could probably add that in the plugin It worked for me .

    $replace = Array('$2 <p class="pullquote"> $2 </p><br><br>');

    if you do this then you do not need the css above this. All you need is to add the line height to the .pullquote to condense the lines more or add more line breaks in the $replace

    or even <p>&nbsp;</p> in case they are stripping line breaks ...

    $replace = Array('$2 <p class="pullquote"> $2 </p><p>&nbsp;</p>');

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Here are all my changes :

    css

    .pullquote {
    background: #C39733;
    border: 1px dotted #666;
    clear: right;
    color: #fff;
    float: right;
    font-size: 20px;
    font-style: italic;
    padding: 10px;
    max-width: 180px;
    height: auto;
    line-height: 1.2;
    }
    .pullquote span {
        color: #fff!important;
    }
    br.pq{
    line-height:5;
    }
    

    In the default.php you had sender instead of Sender not sure if that matters I changed it

    public function DiscussionController_Render_Before( $Sender ) {

    in public function DiscussionController_AfterCommentFormat_Handler($Sender) {

    I added this to the $replace function to better control the size of the break and not affect other breaks in the page. With it's corresponding css rule.

    $replace = Array('$2 <p class="pullquote"> $2 </p><br class="pq">');

    Now if you pullquote and it is the last thing on the message it will not overflow ... But you should probably check it yourself.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    before it overflowed as you said , here is after my changes

  • peregrineperegrine MVP
    edited January 2014

    thanks V, I used a few ideas of yours, and a few ideas i didn't. But they all were insightful :) But I changed a bit, thanks for the sender spot, makes it consistent anyway. check out version 1.1

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Here is icon, if you want , if you want something else just let me know :)

    pq.png 24.9K
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
  • peregrineperegrine MVP
    edited January 2014

    thx. v. perfecto.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You are welcome p, I saw what you did, pretty much along the same lines of adding something after the pull quote to add space. The div works fine too. I like this plugin very much. Makes the posts look very professional like a magazine and you can pick the good parts. Thanks !! :)

  • @underdog if you want to close this - that would be cool. any new thoughts can be added under plugin

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

This discussion has been closed.