[tip] Top 10 custom vB codes !

[Lumina]

Hi !
This thread is designed for the Hints 'n' Tips forum, but I was not able to post new threads there.
It is just a compilation of the best custom vB codes I know. :)

Top 10 (unordered) [s]
<s>{param}</s>
to strike text [sub]
_{param}
to subscript text [sup]
^{param}
to superscript text [justify]
<div align="justify">{param}</div>
to justify text alignment [pre]
<span style="white-space:pre;">{param}</span>
so all spaces are non breaking [floatleft]
<span style="float:left;">{param}</span>
to have a floating object on the left (usefull for images) [floatright]
<span style="float:right;">{param}</span>
to have a floating object on the right (usefull for images) [title=]
<a title="{option}">{param}</a>
for a description (usefull for images) [background=]
<span style="background-color:{option};">{param}</span>
for the background color [li]
<li>{param}</li>
to avoid the vB3 bug with linebreaks being removed before each [*]Others [table], [th], [tr], [td]
<table>{param}</table>, <th>{param}</th>, etc.
for tables [h1], [h2], [h3], [h4], [h5], [h6]
<h1>{param}</h1>, <h2>{param}</h2>, etc.
for headers [glow=]
<span style="width:100%;filter:glow(color={option}, strength=8)">{param}</span>
to make text glow with any color [blink]
<blink>{param}</blink>
to make text blink (only Netscape)Hard ones
They might need a hack. [hr]
<hr />
for an horizontal row
(trouble : tags without closing tags, like [*], cannot be customized with vB3, and tags without parameter, like [hr][/hr] are ignored and removed with vB3) [euro]
&euro;
for the euro sign
(trouble : tags without closing tags, like [*], cannot be customized with vB3, and tags without parameter, like [euro][/euro] are ignored and removed with vB3) [spoiler]
to give some text the same color as the background
(trouble : alternance between alt1 and alt2)
example : http://forums.jeuxonline.info/showthread.php?postid=4218936#post4218936
(note: with Mozilla you can just hover the text with the mouse) [random]
for a random number between 1 and {param}, usefull for roleplaying games
(trouble : need a checksum and Javascript to avoid falsification when editing)
example : http://www.alchemicdream.com/portail/forum/viewtopic.php?t=183
(note: the nice use of [dice])Voilà !
If you have other nice ideas, solutions, troubles or other suggestions, do not hesitate to share them ! :)

[vb-hispano]

code for flash? vb3

[Lumina]

With Flash you can do 100% what is possible with HTML, Javascript, ...
So if you have Flash, it is just like if you had enabled HTML on your forum.


But if you really want a tag for it :
[swf]
<embed src="{param}" width="200" height="30" type="application/x-shockwave-flash"></embed>
Also, I would like to know if someones know a way to have a tag that disables tags and smileys within it ? I know [php] disables smileys, but it bugs a lot with vB tags, and it is not a <span>.

I would like something like :
[email=nobody@nowhere.fr]:)[/email]
Displaying as :
[email=nobody@nowhere.fr]:)[/email]
Without even disabling smileys.

[DarkDelight.net]

I use this for [hr]: <hr width="{param}">

[Wayne Luke]

[hr]
<hr />
for an horizontal row
(trouble : tags without closing tags, like , cannot be customized with vB3, and tags without parameter, like are ignored and removed with vB3)

I actually did:

{param}

Returns:
<hr style="color:{option};width:{param}" />

Play with it to customize to your needs.

[DarkDelight.net]

I actually did:

{param}

Returns:
<hr style="color:{option};width:{param}" />

Play with it to customize to your needs.

I had <hr width="{param}" color="{option}"> in vB2 but that no longer works.
Is this an XHTML thing?

[Faruk]

[spoiler]
to give some text the same color as the background
(trouble : alternance between alt1 and alt2)
example : http://forums.jeuxonline.info/showthread.php?postid=4218936#post4218936
(note: with Mozilla you can just hover the text with the mouse)

You can much more easily have a spoiler tag with a color option:

{param}

Create a table or div with the font color and background color being {option}. You'll not have to worry about alternance between alt1 and alt2 (cos it'll always be the chosen color, regardless of background), and you don't have to have messy CSS that allows for a HOVER to display the text - you need to SELECT the text in order to read it. Works better (that way, people can't accidentally see it because they move their mouse over it).

I have it as:

<span style="color: {option}; background-color: {option};">{param}</span>

That way, you can use spoilers inline without it breaking up your sentences. Works very nicely. Imagine this:

Luke goes to Yoda and after his death, he talks to Ben and then discovers something, or realizes it. (Leia is his sister!!) This knowledge puts a whole new perspective on the situation for him.

If you prefer not to have a big black block (or any other color) in user's posts, just hardcode the color to be slightly off on your alt colors, so that people see that there is something there. Then you just have the tag {param}. :)




BTW, if you want to have your lists in vB to be XHTML 1.0 Strict Compliant, check this thread:
http://www.vbulletin.com/forum/showthread.php?t=79608

[Kurisu]

Do you have buttons for those BB codes?

[Faruk]

I don't have any buttons for custom codes, mostly because I never bothered looking into making more buttons.

[Floris]

<s> and <strike> are no longer valid I think?

[Gio Takahashi]

It should be valid, I just installed it on my forums.

tag s

replacement <s>strike me!</s>

example Strike me!

[Gio Takahashi]

the glow bbcode does not seem to work for me.

[thefluke]

the glow bbcode does not seem to work for me.
It only works in IE because of the non standard coding needed to use it.

[Aaron Freed]

Here's a good spoiler tag code

{param}

<B><I>(SPOILER)</I></B> <span style="color: black; background-color: black;">{param}</span>

That renders text invisible (unless you highlight it, of course) regardless of what background it's over. You can then proceed to change black to whatever colour you want; I make it replacement-dependent and place it halfway between the two alt colours in each styleset, to make it as unintrusive as possible.

IMO, Jelsoft should hack a spoiler tag into the code that actually appears the same colour as a post's background colour, but eh.

[Faruk]

I like how you can do the whole (SPOILER) bit of your suggestion in CSS and simply remove that part from the code entirely ^_^

This is what my new spoiler tag is going to look like:

<span class="spoiler">{param}</span>

with this css:


.spoiler {
color: #000;
background: #000;
}
.spoiler:before, .spoiler:after {
content: '[Spoiler: ';
font-size: 10px;
color: red;
font-weight: bold;
font-style: oblique;
}
.spoiler:after {
content: ' ]';
}

people are free to use this if they want, btw :)

[Gio Takahashi]

It only works in IE because of the non standard coding needed to use it.
I DO use IE btw.

[the Sandman]

[title=]
<a title="{option}">{param}</a>
for a description (usefull for images)How is this code meant to be used? I'm assuming the parameter is the text for a title but what is the option meant to be placed in the [title=] box? And where does the image link go??

[Faruk]

it's a wrapper tag, you put it around an image to make it have a title="" attribute, though it will link to nothing.

you can also put it around text, though, or whatever you want. it just adds a block with a title="" around whatever you put in it.

[the Sandman]

For some reason I can't get this to work - could you show me an example of the exact syntax to use? I was able to get the rest of them to work...:confused:

Thanks.

[Faruk]

that's what I reckon, anyway.

[the Sandman]

that's what I reckon, anyway.I've tried every variation of this I can think of and it just doesn't work for me...:(

[Faruk]

Do you ever get title="" tooltips when you hover over (for instance) acronyms or named / id'd items on pages?

for instance, go to www.csszengarden.com and hover over the word CSS in the page that is underlined with dots. If you get a tooltip saying "Cascading Style Sheets", it should work for you, if not, show me what your vB Code for this is (what you made it in your Admin panel). :)

[the Sandman]

I did see the tooltips on that page. I don't see that or anything else when I attempt to use the [title] vBcode on my Board. This is what I entered in my Custom vB manager:
<a title="{option}">{param}</a> Use {option} is set to yes.

[Faruk]

Try changing it to a <span> tag instead of an <a> tag..

[the Sandman]

Still doesn't work.

What exactly should this tag do?

[Faruk]

Still doesn't work.

What exactly should this tag do?



<a title="Foooo"><img src="ava-ipb.png"></a>


Effect:
(see attachment)
.

[the Sandman]

OK, based on the HTML code you posted I changed my coding for the [title] tag to:


<a title="{option}"><img src={param}></a>

Now it works! The title text goes in the [title=] tag with or without quotes, and the image url goes between the tags *without* [img] tags.
Thanks!

[the Sandman]

I also added a [highlight] code to my Board, which is basically the [background=] code with the color fixed as yellow and the "option" turned off. Works great and easier for the members to use than the [background=yellow].


<span style="background-color:yellow;">{param}</span>

[Faruk]

That will work too, but that shouldn't have had to be necessary.

Unless nesting of custom codes is not allowed anymore... o_O I'll look into it on my vB3 tomorrow :)

[Faruk]

Okay, I did this:




vB code: (value)
HTML: <span title="{option}">{param}</span>

test case:




And the outcome worked fine. No need for what you did (a combination of title with embedded <img> html).

[the Sandman]

Is there a reason to use:


<span title="{option}">{param}</span>
instead of the way I did it?:


<a title="{option}"><img src={param}></a>
Your way requires the use of [img] tags around the image url and my way (which came from you too :p ) doesn't which is arguably easier.

[Faruk]

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]

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:
he gets killed!


<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('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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 (http://forums.animesuki.com/showthread.php?t=9780) thread on my own forum (again my apologies if I'm breaking any rules here by posting this).

[Reeve of Shinra]

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

[GHDpro]

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]

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?:D

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

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



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 Chapter1

And......

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

And......

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

FANTASTIC. I feel so happy.... :D 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]

Usage:
he gets killed!


<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('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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]

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]

[BB Code] [3.0.0] boo (http://www.vbulletin.com/forum/showthread.php?t=101337)

[ryanozawa]

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]

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]

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 thing... just going [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]

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]

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>