[tip] Top 10 custom vB codes !

**the Sandman** · Thu 27 Nov '03, 9:18am

Is there a reason to use:

HTML Code:

<span title="{option}">{param}</span>

instead of the way I did it?:

HTML Code:

[color=#008000]<a title=[color=#0000ff]"{option}"[/color][color=#008000]>[/color][color=#800080]<img src={param}>[/color][color=#008000]</a>[/color]

[/color]
Your way requires the use of [img] tags around the image url and my way (which came from you too

) doesn't which is arguably easier.

**Faruk** · Fri 28 Nov '03, 1:21am

Yeah, there is a good reason for it. This way you can put it around anything, not just an image (ie. image, text, etc.).

That's the only reason though. If you don't want people to be able to add a Title to a bit of text, your method would work too. However, what you have there (the <a title=""> with the <img>) would make it a hyperlink, so if you only want to do an image with a title="" effect, just remove the <a> tags entirely and put the title="" inside the <img> tag

**GHDpro** · Mon 22 Mar '04, 9:51am

Since it was not possible to put this in a seperate thread, I'll guess I post it here (I guess it could also be posted at vbulletin.org, but since it doesn't need hacks and works with all styles, I thought it would also be suitable here).

I've created a slightly different type of spoiler tag. Instead of requiring you to hightlight the text, you click a small button to show the contents. The advantage of this tag is that it works with all styles and may include anything, including images, links etc!

Usage:
[spoiler=episode 2]he gets killed![/spoiler]

HTML Code:

<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> for <i>{option}</i>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>

The bbcode should be easy to modify if you don't want to use a {option} to show what the spoiler is for (or use both, as I do on my forum). It has been tested to work in all the latest browsers (IE 6, Mozilla 1.4, Opera 7.2, Safari 1.2).

Now I'm not quite sure if this is allowed (so if it isn't, mods please delete this part) -- for an example of how it works, see this thread on my own forum (again my apologies if I'm breaking any rules here by posting this).

**Reeve of Shinra** · Tue 23 Mar '04, 11:31am

GHDpro - thanks for the contribution. I am now using it on my forums. =)

**GHDpro** · Wed 24 Mar '04, 1:58am

Bug detected! My forum members pointed out that the spoiler tag was breaking the
"Preview Post" feature when replying. The cause of this was the < form > HTML tags
I put in my spoiler tag.

The reason I put them in there was because I thought that Netscape would otherwise
ignore the buttons (as they're < input > HTML tags). But in any of the browsers I've tried
this is not the case -- it's fine to keep the < form > tags out of the spoiler tag code.

I've modified my post above to reflect this change. If you've already used the bbcode on
your forum, simply remove the < form > and < /form > tags from the code.

Edit: And today I finally upgraded to "Gold" and found yet another bug.
Seems like vBulletin likes to #$@ with Javascript that is output by bbcodes.
vB Team: please put the "anti-hacking" code BEFORE parsing the bbcodes please?

Anyway, fortunately my script will work even without a specific javascript:
directive on the "OnClick=" part. So I've fixed the tag again, and seems to be working
again for me. To fix your forum, just do the same -- remove the "javascript:" part.

**Grover** · Tue 30 Mar '04, 10:45am

Introducing 'Named Anchors' to your VB

Lumina,

What about the ones I came up with today?! :

See http://www.vbulletin.com/forum/showthread.php?t=99823 :

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

Hi,

I am curious how it works when I want to link to a named anchor inside a posting.

I will give you an example:

-----------------------------------------------------
Thread 'Marsupilami FAQ'
----------------------
Posting 1

Hi, welcome to the 'Marsupilami' FAQ!

Click through the following chapters to learn more about the Marsupilami:

Chapter 1 : Who or what is the Marsupilami?
Chapter 2 : What does he eat?
Chapter 3 : How does he eat it?
Chapter 4 : Why does he eat it?
Chapter 5 : Why does he not throw it away then?

----------------------
Posting 2

Chapter 1 : Who or what is the Marsupilami?

Hi, welcome to Chapter 1 : Who or what is the Marsupilami?

Yes... you always wondered about the Marsupilami. Well... he's the story....blah-blah-blah.....

Chapter 2 : What does he eat?

Yes.... you tell me about it!

Blah-blah-blah....
----------------------

I want to achieve this : clicking on Chapter 1 : Who or what is the Marsupilami? in Posting 1 will transfer the user to this Chapter inside Posting 2. Yes... I know how to link to an individual posting but I do not want that... I want to link to different anchors in the same posting.

I guess this is fairly simple to achieve, but I could not find out how to do it in VB3...

Anyone?

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

Originally posted by Wayne Luke

You would need to enable HTML for this and by default each link will still open a new window unless you edit the code.

Are you serious??!! The amazing thing is that seconds ago I found the solution by MYSELF! Yesssss.... learning day by day!

I just thought.... what about 'Custom BBCode'? So knowing a little bit of basic HTML I tried to create 2 new BBCodes. This is what I came up with:

Link to anchor
-------------------------------------------------------------------
Title : Link to anchor
Tag : link_to_anchor
Replacement : <a href="#{option}">{param}</a>
Example : [link_to_anchor=Chapter1]Link to Chapter1[/link_to_anchor]

And......

Set anchor
-------------------------------------------------------------------
Title : Set anchor
Tag : Set_anchor
Replacement : <a name="{option}">{param}</a>
Example : [set_anchor=Chapter1]This IS Chapter1[/set_anchor]

And......

IT WORKS!!!!! YAHOOOO!!!! I AM SO HAPPY!!!
---------------------------------------------------------------

FANTASTIC. I feel so happy....

I am amazed to have achieved it by myself!

The thing is....I need a supporting website for my forums. I need a website that integrates with the forums. I need a CMS for that task. Since the VB CMS hasn't been released yet I have to find alternative ways to present my members with structured information. So I decided to use my existing forums as a 'CMS'. :

In all the 'main' forums I put a sticky thread in and called it '<main forumtopic> FAQ'. So all the main forums got a FAQ in it. I just wanted to find a way to make this FAQ thread more structered and useable for my members.

Introducing those ANCHOR-tags makes it all much more userfriendly, because now I can make my FAQ TOC (table of contents / index) linkable!!! YEAH!
---------------------------------------------------------------

**BustaCap** · Sun 11 Apr '04, 3:32pm

Originally posted by GHDpro

Usage:
[spoiler=episode 2]he gets killed![/spoiler]

HTML Code:

<div style="margin:20px; margin-top:5px">
 <div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> for <i>{option}</i>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
 </div>
 <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
 <div style="display: none;">
 {param}
 </div>
 </div>
 </div>

Where do I put this code to get it to work?

**Reeve of Shinra** · Sun 11 Apr '04, 7:26pm

You need to go into the admin panel and create a new bbcode. If your using vb3 its one of the options on teh sidepanel. When you create a new one, you'll see where to post it.

**Floris** · Tue 13 Apr '04, 1:52pm

[BB Code] [3.0.0] [fieldset]boo[/fieldset]

**ryanozawa** · Sun 25 Apr '04, 2:28am

GHDpro, thanks for the best spoiler implementation I've seen yet. My users love it, and are hunting for excuses to use it.

One issue that was reported, however: MacOS Internet Explorer 5.2.2 doesn't work, but Safari does. Known issue? (I'm not sure what the latest MSIE version is on the Mac.)

Thanks!

**GHDpro** · Thu 29 Apr '04, 12:28am

ryanozawa:
Don't think I had tested it in IE 5 for Mac yet, but I have now -- on my Mac
running Internet Explorer 5.2.3 under Mac OS X 10.3.3, I can't see any problems.
It seems to work fine. Also it's possible the tag may also break in all kinds of other
older browsers, due to the level of Javascript and DOM used.

IMHO, if you're using a Mac, just use Safari or FireFox. Or perhaps Netscape 7.0
if you're still running Mac OS 9 (since Netscape 7 is based on Mozilla, it should
work in theory).

( latest version of IE 5 for Mac can be found here: http://www.microsoft.com/mac/ )

**ryanozawa** · Thu 29 Apr '04, 12:31pm

Thanks for checking into this. I'm not sure what's up. The IE 5.2.2 user says the button does expand the spoiler box, but that the text just isn't visible. But another Mac OSX 10.3 user on the latest IE version also says it doesn't work.

I'm wondering if an edit I made is the problem. I tweaked your code to not use/require the [spoiler=value] thing... just going [spoiler][/spoiler] in the expectation that the poster would explain what the spoiler is. In case I'm a lousy coder, could you perhaps post a version of your code without the {value} switch?

**Koobi** · Fri 16 Jul '04, 2:40pm

Originally posted by Lumina

But if you really want a tag for it :

[swf]
<embed src="{param}" width="200" height="30" type="application/x-shockwave-flash"></embed>

Actually, I doubt the embed tag will work for all browsers. You might have to use the object tag as well to make it cross browser compatible. I believe the embed tag was created by netscape for gecko browsers.

**Mr. Brian** · Sun 5 Sep '04, 5:55pm

Any ideal for getting a shadow effect?

I tried using this but don't seems to be working though.

<span style="filter:shadow(color=#006699 , direction=225)">{param}</span>

[tip] Top 10 custom vB codes !

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment