Potential Pullquotes Plugin.

peregrine

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.

vrijvlinder

fox a few css issues
few css problems
messing with css

Yes, you had me at css....

peregrine

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

vrijvlinder

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;
}

peregrine

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]

vrijvlinder

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.

vrijvlinder

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;
}

vrijvlinder

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>');

vrijvlinder

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.

vrijvlinder

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

peregrine

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

vrijvlinder

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

vrijvlinder

maybe this one came out better

peregrine

thx. v. perfecto.

vrijvlinder

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 !!

peregrine

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