Quote It! Emphasize a quote to draw attention

[davidw]

What does this do?
This allows you to add an extra quote to your news/stories/blogs/etc/ anywhere that bbcode is used practically (although not 100% tested, but it does quote as that has been tested) and emphasize and make stand out an area (left or right depending on how you set it up). You've probably all seen news stories where there was a little quote - even in a magazine that stood out and immediately you read it - something interesting. This gives you the ability to do just that.

Any issues?
None really, aside from the fact that you really wouldn't want to use this if you don't have the need to. For example, if you only have one paragraph of text, it will not look right. Also, based on the <style> it will push the quote down and may appear in the signature area. I would only use this if you have a lot of text - see screenshots/examples.


Step 1:
Upload quoteit.png to http://www.yoursite.com/forums/images/editor/quoteit.png
Quoteit.png is a famfamfam silk icon - it is a free icon and if you wish, you can use something else. If you use a different image or different location, edit the Button image in the BBCode.

Step 2:
Upload your quote.png/quote2.png image to your website and put the location in the replacement area (see <blockquote> tag line for details). I created quote.png/quote2.png for this use only - please do not claim it as your own.

Step 3:
Add New BBCode:

Title: Quote It!

BB Code Tag Name: quoteit

Replacement:
<style type="text/css">
blockquote {
color: #AA0;
display: block;
padding: 2px 20px 2px;
font-size: 110%;
width: 350px;
}
img.floatLeft {
float: left;
margin: 3px;
}
blockquote.floatLeft {
float: left;
margin: 4px;
}
blockquote.floatRight {
float: right;
margin: 4px;
}
</style>
<blockquote class="floatLeft"><p><span><img class="floatLeft" src="http://www.yoursite.com/forums/images/quote.png" alt="" /></span>{param}</p></blockquote>

Example: This is quotable Text!

Description: This allows you to quote a certain part of a news story and emphasize it.

Use {option}: No

Button Image: http://www.yoursite.com/forums/images/editor/quoteit.png

Remove Tag If Empty: Yes

Disable BB Code: No

Disable Smilies: No

Disable Word Wrapping: No


Note:
If you want your quote on right side, change:
<blockquote class="floatLeft">
to
<blockquote class="floatRight">

Also, if you want to change the color of the quoted text, just look for this:
<style type="text/css">
blockquote {
color: #AA0; and change the #AA0; to whatever color you want.

Temporary Demo (may only last a week or two):
http://www.christianboards.org/forums/showpost.php?p=26174&postcount=1

[davidw]

I am not currently supporting this, although if there are any issues with this, I will attempt to address them.

[PoetJA-1975]

Wow! Looks quite nice!
Thanx DAVID ;)

Jacquii.

[davidw]

Thanks - been considering something like this for a couple months and there are a few inline image modifications, but nothing on quotes. I almost considered putting in the option use for class=" " so that the user could use either floatLeft or floatRight, but it might prove too difficult for a few out there and I just decided to keep it simple.

[rapidphim]

thanks for this beautiful add-on. It works on vB Blog too right? Also, what will be the CSS italic code for the quote section?

[davidw]

I don't see why it wouldn't work on a blog. Are you wanting it italicized?

[rapidphim]

Yes... I did try font-style: italic; but not working :-) and you think it looks best on the left or right side?

[davidw]

Try this (I've not tested this, so it may not work)
Change
{param}
to
<i>{param}</i>

Personally, I think left side actually looks a little better, but it also depends on your layout as well.

[rapidphim]

yup... that worked. I thought it should be font-style and under blockquote section. Didn't know that it's infront of param. thanks for this, again. Is it possible for you to create the quoteit.png icon but this time for the right side?

[davidw]

Give me a moment...
Fixed it.

[rapidphim]

awesome. thanks for a great support.

[davidw]

no problem

[rapidphim]

hope you can answer me this ... how am I going to show all bbcode for the quick reply/quick comment (vb Blog)

[davidw]

What do you mean? Like have the icons themselves show up there?

[rapidphim]

yes, right now the quick comment in Blog doesn't have all the custom bb code

[GrandHolyKing]

Is it normal for this mod to remove the text from the article for the quote? I have to replace it manually or type the quote and then use the quote tags.

Is there a way for it to keep the quoted text in the article and quote it without doing it manually?

Great mod by the way, if only that little problem (At least for me it is) could be sorted. ;)

[davidw]

yes, right now the quick comment in Blog doesn't have all the custom bb code
So far, what I've gotten to work in the blogs is to do this:
Edit the Show Threads Quick Reply template in your style(s) and add this where appropriate.

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_quoteit"><img src="$stylevar[imgdir_editor]/quoteit.png" width="16" height="16" alt="Quote It!" /></div></td>
However, where it says this... id="{$editorid}_cmd_quoteit" - it isn't working (of course not) - but I've not found a way yet to make it work - possibly this afternoon if I have time.

Is it normal for this mod to remove the text from the article for the quote? I have to replace it manually or type the quote and then use the quote tags.
Yes, this is normal. You are emphasizing the text if you are highlighting it. However, what I would recommend, and what I do, is to just copy and paste where you want the quoteit to go (above, below) and then emphasize it with the bbcode, leaving the original untouched. Of course, don't go too high or low or it doesn't look right.

Is there a way for it to keep the quoted text in the article and quote it without doing it manually?

Great mod by the way, if only that little problem (At least for me it is) could be sorted. ;)
Currently no, as it is bbcode and made to wrap the tags around the selected text. I had originally sought out to do just that - create a separate text box to type in what you want to quote and then allow you to just do the rest as you normally would have but there were many issues with that. This was by far more easier with very little issues - and it worked relatively easy. Depending on time, I may work on the other version I originally intended to.

[Spank]

Looks like it might be a good hack, however I would like the quote block to be narrower and with a border with maybe some speech mark images. Is this possible?

[davidw]

All of that should be editable in here:
<style type="text/css">
blockquote {
color: #AA0;
display: block;
padding: 2px 20px 2px;
font-size: 110%;
width: 350px;
}
img.floatLeft {
float: left;
margin: 3px;
}
blockquote.floatLeft {
float: left;
margin: 4px;
}
blockquote.floatRight {
float: right;
margin: 4px;
}
</style>
Did you have something specific in mind for the speech mark images?

[Spank]

thanks for that. I'll have a go at this during the week.

Probably something similar to the speech marks you get when you quote on vbulletin.org

<--------like that =D

[rapidphim]

@Spank: nice idea...

@David: how am I going to move the quotation image to the right of the quote instead of the left?

[davidw]

Just a stab, but try this:
In your CSS, change this:
img.floatLeft {
float: left;
to
img.floatRight {
float: right;
and then change this part:
<blockquote class="floatLeft"><p><span><img class="floatLeft"
to
<blockquote class="floatLeft"><p><span><img class="floatRight"
I'm at work so I don't have time to test this.

[rapidphim]

Thanks David. It worked perfectly.

[davidw]

Glad you like it.

[SuperDave71]

Did you ever get a chance to fix the:

However, where it says this... id="{$editorid}_cmd_quoteit" - it isn't working (of course not) - but I've not found a way yet to make it work - possibly this afternoon if I have time.


Thank you!

[karlm]

I haven't installed this yet, but it does look nice! If it works, and I see no reason why it wouldn't, on vbadvanced (and possibly on vbdrupal - as I use both), I'm sure I'll be investigating the option of installing...

Nice work!

[davidw]

Did you ever get a chance to fix the:




Thank you!
No, I didn't - sometimes I need a little nudge ;)

I haven't installed this yet, but it does look nice! If it works, and I see no reason why it wouldn't, on vbadvanced (and possibly on vbdrupal - as I use both), I'm sure I'll be investigating the option of installing...

Nice work!I've heard it does work on vbadvanced - but I've not heard any feedback on vbdrupal. It should work wherever bbcode works.

[SuperDave71]

Nudge....nudge...nudge..

lol

Thanks in advance,

Dave

[karlm]

This is nice, but doesn't work within an[indent] tag. (Just an observation, not a complaint).

[davidw]

Ok, figured it out - almost tried to use javascript, but that was going overboard. Find where you want the quick reply button and put this snippet of code in there. I don't know why I didn't use this before. I was having a bald moment.

<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quoteit"><img src="http://www.yoursite.com/forums/images/editor/quoteit.png" alt="Wrap QUOTEIT tags around selected text" width="16" height="16" border="0" /></div></td>

[SuperDave71]

Works like a charm


For the new guys, the code is now the following:

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quoteit"><img src="http://www.yoursite.com/forums/images/editor/quoteit.png" alt="Wrap QUOTEIT tags around selected text" width="16" height="16" border="0" /></div></td>


BE SURE TO EDIT YOUR SITE NAME UNDER THE HTTP://


Thanks so much!


Dave


*installed*

[davidw]

Don't forget to click install ;)

[K4GAP]

Anyone have this going on 3.8?

[davidw]

I plan to release it for 3.8

[itsheinz]

Nice one^^installed. . .