Miscellaneous Hacks - BBcode Mouse Over Spoiler Tag

Im not a huge fan of all the spoiler tags that require buttons to activate the hidden text, nor can they be used within a paragraph of text multiple times, so I wrote one that you can place the tags around the text within a paragraph (multiple times if you wish) and all one has to do is MOUSE OVER each one to reviel the hidden text. The reason I say "each one" is that you can have a review with multiple spoiler tags within the review and each one is activated seperately upon mouse over.

2 Simple Steps

Step 1 - Add new BB Code as follows:

Title: Spoiler
Tag: spoiler
Replacement:

<span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

Example:

[spoiler]Stuff goes here[/spoiler]

Description: The spoiler tag will hide the text between the tags, and will appear only when you put your mouse over the hidden text.

Step 2 - Add an Additional CSS Definition

Edit the Style(s) that you wish to apply this too .... (Style Manager >> All Style Options) scroll down towards the very bottom of the Options and you will see an area for "Additional CSS Definitions " Enter the below code to the end of the Additional CSS Definitions

.spoiler
{
color: #000000;
text-decoration: none;
background-color: #000000;
}

Thats all there is too it.

[KevNJ]

Simple, easy install, very effective. Thanks!

[AzH]

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

[bobster65]

Originally Posted by AzH

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

Just change the Black (#000000) and White (#FFFFFF) color codes to suit your needs.

[razmyth]

Just some additions I did to make this code more fun, also solves problems like bgcolours, text colours, skins, etc. Thought I'd share it cause I loved the original code this thread provided.

<table  border bgcolor="yellow"><tr><td><font size= 3><font color="red"><b>Spoiler Alert:  </b></font><font color="yellow"><span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#FFFF00'">{param}</span></font></tr></table>

Then the css code

.spoiler
{
color: #FFFF00;
text-decoration: none;
background-color: #FFFF00;
}

Results:

[Magnumutz]

Dude... remove that second picture, it's offensive.

[razmyth]

Hardly offensive but i won't argue, done

[repairman jack]

Originally Posted by Trillian

I've also attached an optional Icon to use with the Spoiler Tag.

How do you add this icon to vBulletin?

[bobster65]

Originally Posted by repairman jack

How do you add this icon to vBulletin?

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

[repairman jack]

Originally Posted by bobster65

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

Great. Thanks!

[Thelonius Beck]

This works well with 3.7 as well. Just so everyone is aware.