Borgs' [BB Code] Pack For vB 4.0.2+

[Brew]

Borgs' [BB Code] Pack For vB 4.0.2+


This is an update to the BB codes mod called Borgs' Pack - Signs, User, Divider, Search Tags, Float Images, which can be found here:

https://vborg.vbsupport.ru/showthread.php?t=103257

Kudos to borgs8472 for the original mod and for his permission to get these updated for vBulletin 4.0.+

I have made tweaks to most of the codes to make them a bit nicer from the originals and I have added a some new ones.

Two codes are not included with this update:
The "user" BB Code is not here because vBulletin has made a major change to the URL to member profiles. You can't get to a profile by just using a member's name any longer. I'm currently looking for a work-around for this.
The "100" BB Code is no longer needed as vBulletin now has built-in image resizing, with lightbox.All of the following codes are added in your admincp under:
Custom BB Codes -> BB Code Manager -> Add New BB Code
or
Custom BB Codes -> Add New BB Code

Where you see '-->>' in the instructions, this is to show you an example of the output of using the code. Do not copy that data into your bbcode form. Also, the BB codes holding signs are transparent so they should work with most backgrounds.

I have tested these in Firefox & Internet Explorer and vBulletin version 4.0.2pl1. These should work with earlier version of vBulletin, your mileage may vary.

All images in the images folder in the attached "Borgs BB Codes.zip" file go into /images/borgs_bbcode/ under your Forums root folder.

[B]What BB Codes are included?

The sign tags can also hold other smilies. Just add :name of smiley: (smiley name between colons) in the box when you make your tag in a post.

Sign Tag

A quirky little smiley holding a sign with words you supply.

Example -->> http://www.freeimagehosting.net/uploads/5bf123ea93.png

-------------------------------------------------------------

Devil Sign Tag

A devil smiley holding a sign with your words.

Example -->> http://www.freeimagehosting.net/uploads/d4f9c94b39.png

-------------------------------------------------------------

Mouse Sign Tag

A mouse smiley holding a sign with your words.

Example --> http://www.freeimagehosting.net/uploads/1e19f07f98.png

-------------------------------------------------------------

Mad Sign Tag

An angry smiley holding a sign with your words.

Example --> http://www.freeimagehosting.net/uploads/a7dbb5fd84.png

-------------------------------------------------------------

Banana Sign Tag

A banana smiley holding your sign.

Example --> http://www.freeimagehosting.net/uploads/fe68def046.png

-------------------------------------------------------------

Bubble Sign Tag

A speech bubble over your smiley.

Example --> http://www.freeimagehosting.net/uploads/ca6581a8bb.png

-------------------------------------------------------------

Strike Through

Strike out text with a line through the middle.

Example --> http://www.freeimagehosting.net/uploads/25e8c9ce10.gif

-------------------------------------------------------------

Google Tag

A link to Google for the word you select.

Example --> http://www.freeimagehosting.net/uploads/22788f877e.png

-------------------------------------------------------------

Wikipedia Tag

A link to Wikipedia for the word you select.

Example --> http://www.freeimagehosting.net/uploads/e64f8c55ad.png

-------------------------------------------------------------

Float Left

Float an image to the left of your text and the text wraps around the image.

Example --> http://www.freeimagehosting.net/uploads/dcb179ff2e.gif

-------------------------------------------------------------

Float Right

Float an image to the right of your text and the text wraps around the image.

Example --> http://www.freeimagehosting.net/uploads/207ca85aba.gif

-------------------------------------------------------------

Ebay

Search eBay for the word you select.

Example --> http://www.freeimagehosting.net/uploads/7e8c9f8116.png

-------------------------------------------------------------

Marquee

Make your text scroll across the screen in your post.

-------------------------------------------------------------

Horizontal Dividers

Horizontal dividers from 25% to 100% width

-------------------------------------------------------------

Highlight Text

Choose the color for highlighting your text.

Example --> http://www.freeimagehosting.net/uploads/3dc5e78cb9.gif

-------------------------------------------------------------

Glowing Text

Glowing text that works in both IE and Firefox.

Example --> http://www.freeimagehosting.net/uploads/4aac512a14.png

-------------------------------------------------------------

Spoiler

Hide text until mouseover.

-------------------------------------------------------------

Drop Caps

Mark the first letter in a paragraph and set it's size and style. Text will flow around it.

Example --> http://www.freeimagehosting.net/uploads/232b73b4aa.gif


--------------------------------------------------------------

Version 1.0.4
Added:
Drop Cap BB Code.
image for Drop Cap in the toolbar in the .zip file.Version 1.0.3
Added:
Spoiler Hidden text BB Code.
image for Spoiler BB Code to .zip file.Version 1.0.2
Added:
Added the image for the Glow BB code in the zip.
Added new Horizontal rules for varying widths.
Created button images for some BB codes.Updated:
Fixed typos found in the instructions. (thanks for the heads-up guys!)
Change BB code for Highlight to make it easier to use. (now it's just [hl=color])Version 1.0.1
Added:
Added the "Glow" BB Code. No new images to upload.
Include a page for instructions within the .zip file.Be sure the images extract to forum-root/images/borgs_bbcode/

If you install these tags, please rate it and click install (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=236950)

[Brew]

*reserved*

[Mike_K]

Good work!

[denman75]

great work

cant w8 till the glow comes out

[Leo Brazil]

Just awesome !!

[HappyFeet]

Good stuff man! Keep 'em coming.:up:

[tafreeh]

Woooohoooo :)

[TimberFloorAu]

Great work, many of which we have installed from previous offerings.

[kuervo]

Good Work!

Thank!

[War.Frog]

Awesome - tagged!

I'd love to see a BBCode for Drop Caps to use in the CMS at the start of articles!

[Pimpin PSP]

Awesomeness! Thanks for releasing this! I've been wondering on making a line through text.
Tagged!

[sulasno]

is there a bug with the image for SIGN TAG ?

instead of an image, I get the following in the menu;

Wrap [S] tags around selected text

[Brew]

great work

cant w8 till the glow comes out

Glowing text is ready.

Enjoy!

[Brew]

is there a bug with the image for SIGN TAG ?

instead of an image, I get the following in the menu;

Wrap [s] tags around selected text

You need to put the images in the correct directory.

Right-click on those words and select Copy Image Location (if you're using Firefox) and paste it into the address bar. That will tell you where it is expecting to find the image.

[sulasno]

the images are in the correct directory
/forum/images/borgs_bbcode

all the other images are working alright

have tried changing the name of the s-tag.gif to s_tag.gif, ss_tag.gif to no avail

[archet1337]

Thanks a lot, been looking for custom BB codes.

There's a typo in the first sign url:
images/borgs_bbcodes/s-tag.gif
shoud be
images/borgs_bbcode/s-tag.gif
and the Glow button is missing from the Zip file :)

Other than that, A+

[denman75]

having problems in firefox ,with glow and strike
for the rest thumbs up !

edit was my bad ,its working great tnx alot

[madotds]

Thank you very much! I am loving the glow text effect in my chat box :)

1 bug maybe with this or maybe with vsa chatbox, I am not sure. The scrolling text tag does not scroll in the chatbox within firefox but it does within google chrome. Any idea?

Mark

Edit: ok it would appear that the text does scroll for a few seconds on a page refresh untill the chatbox goes into an idol state. but this only happens on firefox not on google.

[sulasno]

Thanks a lot, been looking for custom BB codes.

There's a typo in the first sign url:
images/borgs_bbcodes/s-tag.gif
shoud be
images/borgs_bbcode/s-tag.gif
and the Glow button is missing from the Zip file :)

Other than that, A+

thank you very much

you made my day :-)

[Brew]

Thanks a lot, been looking for custom BB codes.

There's a typo in the first sign url:
images/borgs_bbcodes/s-tag.gif shoud be
images/borgs_bbcode/s-tag.gif and the Glow button is missing from the Zip file :)

Other than that, A+

Yes, I haven't updated the zip yet.

I'm working on another BB code but I had finished the button for that one and decided to go ahead and update the post with it.

When I'm done with the next code I'll update the zip.

In the mean time y'all can snap the image from the instructions.

I'll fix that typo too now too.

Thanks for the heads up :)

[Brew]

Issues have been fixed and the highlight BB Code has been changed. Zip has been updated with new instructions and images.

If there's something I left out or if there are any typos please let me know.

Cheers!

[War.Frog]

Hmm...I don't see the .zip file??

[TimberFloorAu]

Glowing text is ready.

Enjoy!

Excellent !

[Brew]

Hmm...I don't see the .zip file??

You're only allowed up to 2004 characters to a mod post...so I had to split it and put the last half in the first comment.

You'll find the zip in the first comment.

I have a feeling that if I add more codes I'll have to redo the whole thing. :eek:

[TimberFloorAu]

Theres a BBCODE we use.

More than welcome to add to your pack.

title: Spoiler

tag: sp

replacement:<span style="color: #ffffff; background: #ffffff;" onmouseover="this.style.color='#4096d4';" onmouseout="this.style.color='#ffffff';">{param}</span>

example: Hide your message

description: This tag changes the text into a coloured box which is unreadable. If you hover the mouse over the message box, the text will magically appear.

[Brew]

Theres a BBCODE we use.

More than welcome to add to your pack.

title: Spoiler

tag: sp

replacement:<span style="color: #ffffff; background: #ffffff;" onmouseover="this.style.color='#4096d4';" onmouseout="this.style.color='#ffffff';">{param}</span>example: Hide your messagedescription: This tag changes the text into a coloured box which is unreadable. If you hover the mouse over the message box, the text will magically appear.

Thanks Timber!

I'll have to play around with it a bit.

When the forums have a white background you can't see where the text is.

I'll keep working on it.

[TimberFloorAu]

Just change replacement to :

<p>Hover ><span style="color: #ffffff; background: #ffffff;" onmouseover="this.style.color='#4096d4';" onmouseout="this.style.color='#ffffff';">Hide your message</span></p>

[ndut]

nice... thanks

[Brew]

Updated the Codes to include the hidden text by TimberFloorAu which updates the mod to ver 1.0.3

Thanks goes out to TimberFloorAu for this :)

[Brew]

Awesome - tagged!

I'd love to see a BBCode for Drop Caps to use in the CMS at the start of articles!

I just added Drop Caps for you

Enjoy!

:D

[War.Frog]

I just added Drop Caps for you

Enjoy!

:D

ZOMG you're a rock star! :D Installing...thanks!

[Brew]

ZOMG you're a rock star! :D Installing...thanks!


I like it myself.

It's also cool that you can change the font type to make it stand out even further.

Select the letter, change the font type and use the Drop Cap button..... 6 is a good size :)

[War.Frog]

I like it myself.

It's also cool that you can change the font type to make it stand out even further.

Select the letter, change the font type and use the Drop Cap button..... 6 is a good size :)

It's awesome. Is there any way to reduce the white space above a letter so it aligns to the top of the text beside it? Or is it the nature of CSS/HTML?

[Videx]

For some reason, Glow pushes my text down a line, causing chaos in the shoutbox.

[Brew]

It's awesome. Is there any way to reduce the white space above a letter so it aligns to the top of the text beside it? Or is it the nature of CSS/HTML?

I'm having issues with my server right now.

When it's up again I'll test some ideas I have.

[Brew]

For some reason, Glow pushes my text down a line, causing chaos in the shoutbox.

That's the nature of having no standards in this stuff.

With the Firefox part it's not a problem as you can use the span tag.

However, in IE, you have to put the code into a table, P, H1 (or 2 etc) or div tag, which forces it to be on it's own line.

You'll notice that the part in the code for FF I used H1 tags so it will be more closely to what you'd get in IE.

You can remove the H1 tags in the FF portion of the code and it will be what you're after....however, those who use IE will be forced to see the results on it's own line and other areas where you use the code will be different for IE and FF users.

One of these days they'll get their acts together and start standardizing these things....but I'm not holding my breathe.

The method I used to get the code to work with both browsers was the best to reconcile the differences between the two ways they implement glowing text. (actually FF doesn't have a "glow" feature and you have to use a trick of shadowing the text to create the same effect that IE does naturally).

Sorry about this...it's the nature of the browser wars that you get this nonsense.

[Brew]

It's awesome. Is there any way to reduce the white space above a letter so it aligns to the top of the text beside it? Or is it the nature of CSS/HTML?

I've played around a bit and even set the padding to 0px for the top (padding: 0px 8px 0px 0px; ). It seems that the letter will not go any higher. Even when trying absolute padding it didn't work, and actually that totally messed it all up.

Short of using an image as a drop cap and wrapping text around it I think this is the best you'll get using text.

[War.Frog]

I've played around a bit and even set the padding to 0px for the top (padding: 0px 8px 0px 0px; ). It seems that the letter will not go any higher. Even when trying absolute padding it didn't work, and actually that totally messed it all up.

Short of using an image as a drop cap and wrapping text around it I think this is the best you'll get using text.

Thanks so much anyway - I still love it...especially as you say changing the font size and weight and color of that drop cap letter.

[War.Frog]

To complement the Drop Cap, I created a Justify BB Code that provides full text justification in newspaper style and it really improves the look of CMS articles. Feel free to improve/include it here if you like. Button image attached.

Code: <div style="text-align: justify;text-justify: newspaper";>{param}</div>


Also attached is a Drop Cap button in case you want to retain the look and feel of existing editor buttons.

[zeroality]

Uh, how are we supposed to see how it works? All the example images are broken.

[Brew]

Uh, how are we supposed to see how it works? All the example images are broken.

I linked to images on my server.

During an upgrade the whole server tanked.

It should be back up shortly.

Sorry bout that :/

[Jabong82]

Hello great mod! Nominated and installed!

Question though. All of these work for me except "Highlight" and "Glow". I'm guessing I have to modify these (ie. color) to get them to work? How do I do this? (sorry Im a computer nerd).

Thanks again this is great.

[Brew]

Use the syntax:


Your Text Here

and

Your Text Here
Of course you can pick whatever color you want pretty much.

Or you can click the button on the toolbar and a popup will show where you input your color.

[Jabong82]

Thank you!

[Trek]

Installed these, I really like 'em!

One issue I have though is on things where you enter text like Google, Wikipedia or Ebay. You can't enter multiple words. If you do, it only uses the first one.

The way I got around this is by using a %20 for the space, which makes it work, but the text on the page looks crappy because it displays the %20 as literal text (as it should), but the %20 works for a space in URL encoding.

Anyway, not sure how (or if) it's possible to work around it, but I don't know how. =)

otherwise, all good stuff, thank you for sharing!

[Silvio]

tagged for future installation.
really nice job ty.

would be very nice to add [you] code
(example : Hi [you], I would like to find you bbcode in this gorgeous compilation!)
something similar to the archived you replace product by Boofo.
Is that possible?

[ARPRDcom]

Can you add the Table BBCode to be used with Vb ?? This is the actual code for SMF...


<operation>
<search position="replace"><![CDATA[
'table' => array('code' => 'table', 'before' => '', 'after' => '', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '', 'after' => '', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '', 'after' => '', 'description' => $txt[437]),]]></search>
<add><![CDATA[
'tabletrtd' => array('code' => 'tabletrtd', 'before' => '\n\n', 'after' => '\n\n', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '\n', 'after' => '\n', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '', 'after' => '', 'description' => $txt[437]),]]></add>
</operation>
</file>

<file name="$sourcedir/Subs.php">
<operation>
<search position="replace"><![CDATA[
'before' => '<table style="font: inherit; color: inherit;">',]]></search>
<add><![CDATA[
'before' => '<table style="font: inherit; color: inherit;" class="table_bbc">',]]></add>
</operation>
</file>

<file name="$themedir/style.css">
<operation>
<search position="end" />
<add><![CDATA[

/* Table Plus BBCodes */
.table_bbc { border-spacing: 2px; background: #88A6C0 url(images/catbg.jpg) repeat-x }
.table_bbc td { padding: 5px; background: #E9F0F6 url(images/titlebg.jpg) repeat-x 0 -17px }
]]></add>
</operation>
</file>

</modification>



<operation>
<search position="replace"><![CDATA[
'table' => array('code' => 'table', 'before' => '\n\n', 'after' => '\n\n', 'description' => $txt['table']),]]></search>
<add><![CDATA[
'tabletrtd' => array('code' => 'tabletrtd', 'before' => '\n\n', 'after' => '\n\n', 'description' => $txt['table']),
'tr' => array('code' => 'tr', 'before' => '\n', 'after' => '\n', 'description' => $txt['table_tr']),
'td' => array('code' => 'td', 'before' => '', 'after' => '', 'description' => $txt['table_td']),]]></add>
</operation>
</file>

<file name="$themedir/style.css">
<operation>
<search position="end" />
<add><![CDATA[

/* Table Plus BBCodes */
.bbc_table { border-spacing: 2px; background: #88A6C0 url(images/catbg.jpg) repeat-x }
.bbc_table td { padding: 5px; background: #E9F0F6 url(images/titlebg.jpg) repeat-x 0 -17px }
]]></add>
</operation>
</file>

</modification>

[djbaxter]

Can you add the Table BBCode to be used with Vb ??

This one works for vBulletin 4.x (except don't use the sortable.js sorting feature):

https://vborg.vbsupport.ru/showthread.php?t=107985

[Videx]

I tried to use the Highlight today and both Firefox and Chrome ask me "Please enter the option for your [HL] tag:". Okay, but I can't see anywhere to explain to people they're supposed to enter a color here. The flyout just says "Wrap HL tags around selected text".

Does anyone know how I can add an explanation or, barring that, just set it to yellow?

[bpr]

Thanks saved some work!

[session-one]

the glow highlight and drop cap are not working, am i doing something wrong?

[PSC001]

Will the Spoiler tag hide an image or is it just text?

[reddyink]

What is the bbcode for image that is uploaded (first image uploaded). The MOD here is for a URL type image but I would like align the first uploaded image.

Thank you for the help

[OurCouponHome]

How do you get these to show up in Quick reply?

[WEBDosser]

Awesome - tagged!

[Mr Morningstarr]

the glow highlight and drop cap are not working, am i doing something wrong?

After recently upgrading my forum the glow BBCode stopped working when placed inside another BBcode, like This Text Is Glowing! for example.

But if I use the glow code on the outside it works fine: This Text Is Glowing!

[Spangle]

I have installed these in VB4.2. Patch3, all seem to work except float left & right.

Anyone else had this problem or got a fix

[Limality]

hey these bbcodes are great!

I'd like to edit the Bubble TAG to add bubbles to my existing smilies...how would i go about doing that?