PDA

View Full Version : BB Code Enhancements - Quote It! Emphasize a quote to draw attention


davidw
03-08-2009, 10:00 PM
As I have this running on 3.8.1 with no issues, I am releasing this now. If anyone has any issues, please report them so that I may correct them.

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

Coroner
03-09-2009, 12:18 PM
looks, pretty cool.

Arcade Fire
03-09-2009, 01:37 PM
Nice, but in the last line of the code isn?t

<blockquote class="floatLeft"><p><span><img class="floatLeft" src="http://www.yoursite.com/forums/images/quote.png" alt="" /></span>{param}</p></blockquote>

is


<blockquote class="floatLeft"><p><span><img class="floatLeft" src="http://www.yoursite.com/forums/images/editor/quote.png" alt="" /></span>{param}</p></blockquote>

to show image quote.png

Thanks! installed.

davidw
03-09-2009, 02:31 PM
The location of the quote.png is an example - On my site I have the quote.png file in the images/misc/ directory and my code reflects the images/misc/ directory. It just has to reflect where you upload the quote.png file. The editor button is for the quoteit.png (for the Quick Reply / Full / WYSIWYG editor).

Coroner
03-09-2009, 02:37 PM
You can also use (I think there's no need for the full URL):
<blockquote class="floatLeft"><p><span><img class="floatLeft" src="images/quote.png" alt="" /></span>{param}</p></blockquote>
If you want the box with a background color, use this example:
<blockquote style="background-color: #FFFFFF" class="floatLeft"><p><span><img class="floatLeft" src="images/quote.png" alt="" /></span>{param}</p></blockquote>

davidw
03-09-2009, 02:50 PM
No, there isn't a need for a full URL, but I was doing testing on non-forum areas and kept it.

Jasem
03-30-2009, 12:53 PM
Good work, thank you!

Installed

Brew
02-15-2010, 04:30 PM
Is this compatible with vB 3.8.4 or vB 4.0.+?

Thanks!

davidw
02-15-2010, 06:20 PM
3.8.4 yes, 4.0 not tested.